鐵人賽寫到後面，似乎有種越來越難施力的困窘，果然要完整寫完系列筆記，除了需要先列好大綱外，還需要提前準備筆記內容，如果當天再來處理，幾乎是各種卡殼，也算是一種教訓加經驗了。

這篇就簡單記錄一下，如何透過變數去產生複數聊天室。

HTML

在玩家輸入的頁面處，需要添加一個欄位，讓玩家能輸入頻道名稱，作為變數傳給 server。

<p>
  Username :
  <input v-model="username" type="text" />
</p>
<p>
  Channel :
  <input v-model="channelId" type="text" />
</p>

channelId 這個變數除了要透過 v-model 綁定外，同時也向後傳遞。

data: {
    // ...
    channelId: 'Public',
},

  this.ws.send(
    JSON.stringify({
      event: 'login',
      message: this.username,
      channelId: this.channelId,
    })
  );

Server

server 每一次監聽時，將 channelId 存到 ws。每當要送出訊息時，除了檢查是否維持連線外，也檢查頻道 ID 是否相符，都符合的前提下才做送出訊息。

wss.clients.forEach((client) => {
  if (
    client.readyState === WebSocket.OPEN &&
    client.channelId === ws.channelId
  ) {
    client.send(JSON.stringify(formData));
  }
});