Day07：Boardcast Event(推播事件)

全文同步於个人 Docusaurus Blog

当某个使用者输入讯息发送到 server 後，若当前环境为留言板或公共频道，server 端则必须推播讯息给该名使用者以外的所有人。虽然听起来好像不好处理，但其实只要利用 socket 建立连线後永久传输的特性，server 端透过 emit() 向 client 推播转发，client 则保持用 on() 监听变化。

// server.js
io.on('connection', (socket) => {
  console.log(`Server：${socket.id}`);

  socket.on('group-chat-message', (data) => {
    console.log(data);
    io.emit('group-chat-message', data);
  });
});

// handler.js
const connectSocketIoServer = () => {
  socket = io('/');

  // ...

  socket.on('group-chat-message', (data) => {
    console.log(data)
  })
};

由於此前使用 group-chat-message 这一组 socket 传送讯息给 server，所以自然就是监听这组。

Render Message

无论是送出讯息的一方，或是接收讯息者，这些讯息都应该被呈现在页面上，让目前处於这个频道的人可以看见。

需要渲染即时的讯息内容，同样透过操作 DOM 来塞入 HTML，这边补上一个之前漏掉的 function。

// element.js
const getChatMessageContent = (data) => {
  const { author, messageText } = data;
  const messageContent = document.createElement('div');
  messageContent.classList.add('message-content');
  messageContent.innerHTML = `
    <p class="message-paragraph">
      <span class="message-author">${author}：</span>${messageText}
    </p>
  `;

  return messageContent;
};

export default {
  getChatList,
  getChatMessageContent,
};

上面这组 function 用来生成，输入讯息者以及他所输入的内容。

接着，需要将这段 HTML 同样透过 append 的方式塞到对话框的讯息列表中。

// ui.js
const appendChatMessage = (data) => {
  const groupChatMessage = document.getElementById(messageContainerID);
  const chatMessageContent = element.getChatMessageContent(data);
  groupChatMessage.appendChild(chatMessageContent);
};

export default {
  goToChat,
  appendChatMessage,
};

导出的 appendChatMessage() 只是生成静态的 HTML，仍需要传入资料来显示动态内容，所以将其拉到 handler.js 导入：

// handler.js
import ui from '../ui.js';

const connectSocketIoServer = () => {
  socket = io('/');

  // ...

  socket.on('group-chat-message', (data) => {
    console.log(data);
    ui.appendChatMessage(data);
  });
};

现在可以打开数个 browser 来测试，当不同使用者分别输入讯息时，是否能达到多人对话的效果。