javascript

[JS] ReactJS + FireBase 簡易即時聊天室

ReactJS 由 Facebook 推出的前端 Library
記錄一下利用 ReactJS 和 FireBase (Baas) 練習的簡易即時聊天室
使用 ReactJS + FireBase + Github 結合而成完全, 零成本即時聊天室
ReactJS 繪製畫面, FireBase 提供 即時資料庫, Github 提供線上空間

 

 

先簡單說明各個服務, 和你最好會使用的技術...
技術方面...
很多 GIT
一些 HTML, Javascript
CSS 可有可無
nodejs, npm 等, 為了使用 ReactJS 請務必會安裝,
(如果是純 Javascript + jQuery 就可以不需使用 nodejs)

 

 

 

ReactJS

reactjs-logo
Facebook 出品的 Javascript Library
主要用於使用者介面 (UI, User Interfaces) 的繪製
利用 虛擬物件 (Virtual DOM) 的方式, 讓網頁畫面的呈現更有效率, 速度更快

更成為目前 前端工程師(F2E) 最火紅的必學技術之一

 

 

 

FireBase

firebase-logo
BaaS, Backend as a Service 提供商, 剛被 Google 收購
能讓一般開發者簡單使用一些後端功能與服務, 即時資料庫(Realtime Database), 使用者登入/管理 等...
類似這樣的服務, 最近不少. 而 FireBase 的免費方案, 足夠拿來做一些小練習

免費方案的功能(2015-11-15) :
https://www.firebase.com/pricing.html

  • 同時 100 個連線
  • 1 GB 儲存量
  • 10 GB 流量限制

 

 

 

Github

github-logo
程式碼寄存、版本控管服務
git 工程師必學、必用的技術

Github 提供免費的方式讓開發者把作品, 程式, 用公開的方式存放在雲端
除了 git 基本的功能外, Github 還提供顯示靜態網頁的功能

 

 

 

簡易即時聊天室

 

目錄結構 :
index.html : 主要頁面容器, 載入 react lib, css lib 等...
package.json : npm 套件安裝檔, 說明使用哪些套件. e.g. firebase 套件等...
build 目錄 : js 轉換完成的 jsx 碼
src 目錄 : 原生 js 碼

reactjs_firebase_message-folder
(整個專案很小、很單純)

 

ReactJS 的部份

ReactJS 會執行 jsx (Javascript 中使用的 XML 語法) 而不是原生 js
這部份也算是 react 速度快的原因之一, 詳細原理先不提...

首先, 寫的時候還是寫 js, 但是 react 讀取使用的是 jsx
所以需要把 js 碼轉為 jsx 碼

官網內的example code
reactjs-js
(react 的格式, js 碼)

reactjs-jsx
(轉換為 jsx 後)

從上面兩張圖看來, 其實沒有太大不同, 不過為了方便開發,
我自已還是寫 js 碼.

(官網教學 : https://facebook.github.io/react/docs/tutorial.html)

 

如何把 JS 轉 JSX

兩種方式 : 線上與線下

線上的方式 :
當使用者打開頁面時, 即時將 js 轉為 jsx
優點 : 開發者比較方便
缺點 : 使用者打啟畫面花費時間較久, 也失去 react  的意義
使用方式 :
在 html 頁面, 戴入 reactjs 兩個 lib 之後加入

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

 

 

線下的方式 :
開發時利用 babel 工具預先將 js 轉為 jsx, 這個方式需要有 npm, 也就是需要 nodejs(註1) 的幫助

已經有 npm 的情況下, 利用 npm 安裝下列兩個套件

npm install --global babel-cli
npm install babel-preset-react

(透過 npm 全域安裝, 兩個 react 會使用到的套件)

安裝完成之後, 在其 react 專案根目錄下, 執行

babel --presets react src --watch --out-dir build

執行 babel 監控轉換 js 為 jsx, 他會常註在 cli 畫面上, 然後監控 src 資料夾下所有 .js 檔,
將轉換成功的 jsx 檔放到 build 資料夾下

 

轉換畫面大概像這樣, 每一次 .js 檔儲存變動時, 會自動轉換為 jsx 格式

src/myreace.js -> build/myreact.js

當有錯誤時, 也會出現提示
babel-reactjs-screenshot

 

src/myreact.js 的程式主體, 大都是由 官方 example 來的
https://github.com/facebook/react/wiki/Examples

 

 

FireBase

新建一個 APP 之後, 就可以直接使用了.
FireBase 提供多種 lib 供使用, 這官網查詢可以使用的 lib ( https://www.firebase.com/docs/web/libraries/ )
firebase-doc 這次要用 ReactJS 所以直接選用 ReactFire lib.

 

在 html 頁面中戴入, firebase client lib

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

 

在 cli 下執行 npm install

npm 會讀取 package.json, 並安裝所需套件.
安裝完後, 專案目錄下會多一個 node_modules 資料夾.
接著在 index.html 再戴入 reacefire.js

<script src="node_modules/reactfire/dist/reactfire.js"></script>

 

 

記得到 FireBase 管理頁去建立一個APP, 預設的設定就可以直接使用了
你的 APP 名稱會成為 服務的 url

例如:https://[你的 APP 名稱].firebaseio.com/

 

 

Github

利用 github 建立頁面.

官網的說明 : https://help.github.com/articles/creating-pages-with-the-automatic-generator/

依說明, 執行完 automatic page generator 之後
會建立出一個 branch 叫 gh-pages
裡面預設就會有一些基本頁面 html, css
github-gh-pages

 

把 automatic page generator 的內容蓋掉.
依需求把 branch 上的內容改掉
github-gh-pages
在 gh-pages branch 多了一個 node_modules 的資料夾, 正常來說這個資料夾是不該被收錄至 git 的.
( npm 的套件資料夾 )

此時, http://cscolabear.github.io/reactjs_firebase_message/ 就可以看到內容了

 

 

 

後記:

利用 FireBase 和 Github, 完成 資料庫 和 Web Server 的服務
配合 ReactJS 完成即時聊天室的畫面

過程跳的比較快, 如果對部份技術沒概念的話, 有點難懂... Q.Q

ReactJS 的語法, 可以多看 Github 裡的 SourceCode

 

 


 

 

 

註1

nodejs

讓前端語言 javascript, 也可以在 後端 提供服務.
目前也被大量運用在開發時的小工具.

安裝 nodejs 與 npm 過程大概為

nvm -> nodejs -> npm

nvm (node version manager) 為 nodejs 的版本管理工具, 可以透過 nvm, 快速安裝各個版本的 nodejs.
npm (node package manager) 為 nodejs 套件管理工具, 可以透過 npm, 快速安裝各種工具, 早期 npm 需要另外安裝, 現在已經被包含在 nodejs 裡
官方教學 : https://github.com/creationix/nvm

發表迴響