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