Pixi.js 聊天室製作流程分享（2）

Chingya

Published in

✨ 黑洞創造 BlackHole Creative ✨

8 min readJun 6, 2022

🚀 用 Pixi.js 製作 2D 角色聊天室 — Firebase 聊天室製作篇

上一篇知道了如何建立角色，這篇來介紹如何將輸入的訊息發送到聊天室當中，這部分我們使用 Firebase 取代撰寫複雜的後端程式，快速製作出可以讀取的後台資料庫，並且結合 Vue.js 製作聊天室架構。

Firebase 介紹

Firebase 是一套雲端後端服務平台，提供多種開發情境（行動端、網頁端）所需要的功能，具備即時資料與低維護成本的特色。它提供許多後端功能，包含：身分驗證（Authentication）、即時資料庫（Realtime Database）、儲存（Storage）、主機（Hosting）、函數編寫代碼（Function）及機器學習功能（ML Kit）等。

常使用的 Firebase 服務

Authentication：帳號註冊與權限控管，可以使用 Email、Google、FB、Github…等等登入。
Realtime Database：即時更新的線上 NoSQL 資料庫，資料存取透過 JSON 的形式，提供完整的 SDK 以供開發。
Storage：能夠儲存檔案，像是照片、影音…等等。
Hosting：靜態網站服務（類似 GitHub Pages，但同時能整合上述服務）。

而我們這次將使用的功能是 Realtime Database，透過 JSON 的格式建立資料庫，來達到聊天室中的寫入與讀取訊息功能。

Firebase 起手式

建立 Firebase 專案

首先，我們需要先建立一個 Firebase 專案，到官網登入 Google 帳號，點選「控制台（Go to Console）」，再來點選「建立專案 / 新增專案」，輸入專案名稱，按照步驟繼續之後，就可以看到被建立好的新專案了！

點選進入專案，接著我們要選擇開發的應用程式，分別為 iOS、Andorid、Web、Unity、Flutter，由於這次使用是網頁開發所以要點選 Web，接著會出現註冊的畫面，它提供了兩種新增 SDK 的方式，npm 或是 <script>，可自由依照習慣使用。

串接 Firebase

將程式碼直接複製貼並引入網頁檔中，需要注意的是 Firebase 的 V8 和 V9 之間使用的一些函式有所不同，所以若是使用的版本上有差異，可參考官方文件進行修正，此外，加入 console.log 可以檢查是否引入成功。

建立 Realtime Database

進入專案，點選 Realtime Database，建立資料庫，選擇測試模式，啟用後就會看到資料庫已建立完成。

鎖定模式需要使用者驗證才可進行資料庫操作，測試模式為預設30天內不需驗證即可使用資料庫的功能，因此這邊我們先暫選測試模式，若需要調整可以到規則處進行修改。

建好資料庫後，可以進行資料庫內容的新增或修改，資料的內容以 JSON 的格式建立，基本的使用方法會在下方說明。

基礎用法

建立路徑：ref()

使用指令可尋找資料庫的路徑位置，預設為根目錄。

var db = firebase.database(); 
db.ref(); //對應根目錄 
db.ref("/chatroom"); //對應chatroom資料

新增資料：set()

set() 為寫入資料，須注意 set() 會將指定的節點下的內容覆蓋，因此若是僅要修改其中一項時，需指定到相對應的路徑 key。

db.ref("/chatroom").set({ msg: "hi" });

讀取資料：once(), on()

使用 once() 時，資料僅會讀取一次；而使用 on() 則為即時讀取，用來監聽資料庫狀態，若是有更動，則會將變化的值重新傳到裝置之上。

db.ref("/chatroom").on('value',(snapshot) => 
       console.log(snapshot.val()); 
});

使用 Firebase 製作聊天室

前情的建置已經設定好之後，接下來進入正題，我們結合 Vue.js 和 Firebase 來製作聊天室，主要的架構分為：設定名稱（namebox）、輸入訊息（inputMsg）、顯示訊息內容（chatbox）。

設定名稱

在 namebox 的部分加入 input 並且設定 v-model，輸入的名稱會先存到暫存的 tempUsername，當按下 Enter 鍵之後，執行enterName() 將輸入完整的名稱存到使用者名稱，避免輸入過程中不完整的名稱被存入。

//輸入名稱
enterName() {
      this.username = this.tempUsername;
}//刪除名稱
clearName() {
      this.username = "";
}

輸入訊息

在 inputMsg 的部分加入 textarea 並且設定 v-model，如同前面輸入名稱一樣，先將輸入訊息設為暫存，當按下 Enter 鍵之後，執行addMsg() 將輸入內容存到 Msg 中，並且用 firebase 的 push() 設定隨機 key 值，再使用 set() 將訊息內容用物件的方式存入 firebase 的資料庫裡，最後，將暫存的訊息清空，才不會殘留原本的訊息。

addMsg() {
      this.Msg = this.tempMsg;
      const key = chatroomRef.push().key;
      chatroomRef.child(key).set({
        content: this.Msg, // 這是使用者輸入的訊息內容
        username: this.username, // 這是使用者名稱
        time: Date.now(), // 這是獲取現在的時間
        key, // 這個等同於 key: key
      });
      this.tempMsg = "";
}

顯示訊息內容

接著製作顯示訊息的對話紀錄，先讀取 firebase 資料庫中的資料，將資料存到我們定義的 chatroom 陣列中，使用 v-for 將陣列內容顯示出來。init() 需要放在 mounted() 裡面去執行。

init() {
      chatroomRef.on("value", (snapshot) => {
        let data = snapshot.val();
        this.chatroom = data;
      });
}

這樣簡單的聊天室就製作完成了，下一篇會來說明如何讓 firebase 和 pixi 進行結合，讓角色能夠跑出對話訊息。

參考：

https://guahsu.io/2017/09/vue-firebase-realtime-line-chat/
https://ithelp.ithome.com.tw/articles/10205404
https://medium.com/anna-hsaio-前端開發記/firebase小學堂-基礎介紹與設定-5265deb20dca
https://hackmd.io/@WangShuan/SJisPrblt
https://www.letswrite.tw/firebase-realtime/
https://www.oxxostudio.tw/articles/201904/firebase-realtime-database-start.html