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

 

 

 

 

 

ReactJS

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

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

 

 

 

FireBase

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

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

 

 

 

Github

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

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

 

 

 

簡易即時聊天室

 

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

(整個專案很小、很單純)

 

ReactJS 的部份

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

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

官網內的example code

(react 的格式, js 碼)

(轉換為 jsx 後)

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

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

 

如何把 JS 轉 JSX

兩種方式 : 線上與線下

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

 

 

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

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

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

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

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

 

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

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

當有錯誤時, 也會出現提示

 

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

 

 

FireBase

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

 

在 html 頁面中戴入, firebase client lib

 

在 cli 下執行 npm install

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

 

 

記得到 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

 

把 automatic page generator 的內容蓋掉.
依需求把 branch 上的內容改掉

在 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