iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 8

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 來測試,當不同使用者分別輸入訊息時,是否能達到多人對話的效果。

group chat


上一篇
Day06:Forward Message To Server(轉發訊息到 Server 端)
下一篇
Day08:Build Private Chat(建立私人頻道)
系列文
摸索 WebSocket,遠望 WebRTC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言