要讓遊戲達成連線當然要先搞定即時資料庫的設定，至於如何建立專案蠻容易可以GOOGLE到的

我就不打算另外紀錄了。接下來程式方面參考了其他人的做法後，

我先建立了一隻 firabase.js 的檔案，並將資料庫的資訊帶入。

// ../firabase.js
import firebase from "firebase/app";
import "firebase/database";

let config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
  databaseURL: "<https://tictactoxxxxxxxxxxxxxxxsia-southeast1.firebasedatabase.app>",
  projectId: "txxxxxxxxxxxxx77ca",
  storageBucket: "tixxxxxxxxxxxxxxxpot.com",
  messagingSenderId: "xxxx94xxxxxxxxx",
  appId: "1:1xxxxxxxxxxxxxxxxxxxxxxx880f5",
  measurementId: "xxx-ZxxxQx3"
};

firebase.initializeApp(config);
export default firebase.database();

這時候就可以在你的元件中引入這支檔案呼叫 database 的函式試著修改或新增資料。

我是有另外建立一支 servie檔案，方便引入跟操作方法。

// ../service/dataService.js
import firebase from "../firebase";

const db = firebase.ref("/playerList");
const gameDB = firebase.ref("/gameSet");
class dataService {
  getAll() {
    return db;
  }

  getAllGame() {
    return gameDB;
  }

  create(data) {
    return gameDB.push(data);
  }

  updateList(key, value) {
    return db.child(key).update(value);
  }

  updateGame(key, value) {
    return gameDB.child(key).update(value);
  }

  delete(key) {
    return db.child(key).remove();
  }

  deleteAllList() {
    return db.remove();
  }
}

export default new dataService();

再來遊戲的邏輯與單人的方式一樣我就幾乎沒修改了，主要是要怎麼建立連線。

我的想法是在資料庫建立遊戲列表以及玩家列表，

玩家列表用來給予進入的玩家ID，並記錄 ID 是否被使用了，

遊戲列表則讓玩家進行配對( ID : 0 與 ID : 1 以此類推會配對在同一場遊戲)，

進入遊戲後在 onMounted 建立與資料庫的連線，並在資料庫改變時執行對應的函式。

// ../views/Double.vue

// 建立與資料庫的連線以及監聽網頁即將關閉的事件，隨時取得最新資料。
// 如果將 on 改成 once 則只會取得一次資料 
onMounted(() => {
  DataService.getAll().on("value", confirmPlayer);
  DataService.getAllGame().on("value", runGame);
  window.addEventListener("beforeunload", (e) => beforeunloadHandler(e));
});

到這邊差不多就剩將原本的遊戲邏輯與資料庫結合了。

透過資料庫同步遊戲雙方的資料後再渲染畫面，這樣就已經能夠看出大概的樣子了。

最後再來第三篇再來講講我當時卡關的部分。