iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 26

Day25:複數聊天室

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

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

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));
  }
});

上一篇
Day24:檢查登入人數
下一篇
Day26:優化修正
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言