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