iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 25

Day24:檢查登入人數

國慶連假中,假日只想耍廢玩 game,不想進修QQ,但為了避免斷賽,還是加減推一些東西,等明後天再來調整吧?不過也許會懶癌發作。

HTML

訊息列表頁面,新增一個欄位用來顯示目前線上人數。

<h2>Hello : {{ username }}</h2>

Server.js

server-side 這邊可以利用 ws 提供的 size(即 wss.clients.siz) 來撈出目前的登入人數。

將人數的數字,塞入物件中,再回傳給 client-side。

  ws.on('message', function (message) {
    const bufferMessageObj = Buffer.from(message).toString();
    let formData = JSON.parse(bufferMessageObj);
    formData.num = wss.clients.size;

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

Client.js

client-side 此處的寫法實在不好,過於巢狀,但就先求功能出來,之後再來想怎麼改了。

data: {
    // ...
    onlineNum: '',
},
onMessage(event) {
  let obj = JSON.parse(event.data);
  this.onlineNum = obj.num;
  if (obj.event === 'login') {
    this.list.push(`Welcome : ${obj.message} enter chat!`);
  } else {
    if (obj.name !== this.name) {
      this.list.push(obj.message);
    }
  }
},

上一篇
Day23:進入聊天室狀態判斷
下一篇
Day25:複數聊天室
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言