iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 12

Day11:Disconnect Chat(關閉連線頻道)

全文同步於個人 Docusaurus Blog

當使用者離開當前頻道時,其他使用者的頁面需要監聽到離線的狀況,並同時關閉那位離開者的頻道。

在監聽連線的同時,若觸發斷線的 socket,則將離開的使用者 ID,做為資料傳給 handler.js。

// server.js
socket.on('disconnect', () => {
  // ...
  const data = {
    socketIdOfDisconnectPeer: socket.id,
  };
  io.emit('peer-disconnected', data);
});

中介層和 server-side,兩邊都透過 peer-disconnected 來溝通傳輸,另外,將離線的使用者 ID,傳給 client-side

// handler.js
socket.on('peer-disconnected', (data) => {
  ui.removeChatOfDisconnected(data);
});

client-side 依據傳過來的離線的使用者 ID,移除對應的 DOM,同時也針對 store 中保存的狀態進行更新,確保目前聊天頻道中的使用者是最新的狀態。

// ui.js
const removeChatOfDisconnected = (data) => {
  const { socketIdOfDisconnectPeer } = data;
  const activeChatGroup = store.getActiveChatGroup(socketIdOfDisconnectPeer);
  const newActiveChatGroup = activeChatGroup.filter(
    (node) => node.socketId !== socketIdOfDisconnectPeer
  );
  store.setActiveChatGroup(newActiveChatGroup);

  const chatBox = document.getElementById(socketIdOfDisconnectPeer);

  if (chatBox) {
    chatBox.parentElement.removeChild(chatBox);
  }
};

export default {
  // ...
  removeChatOfDisconnected,
};

disconnect


上一篇
Day10:Emit Direct Message II(Render 私人訊息到 HTML)
下一篇
Day12:Select Room(選擇特定房間頻道)
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言