iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 10

Day09:Emit Direct Message I(發送個人訊息到 server 端)

全文同步於個人 Docusaurus Blog

當建立私人頻道後,下一步,便是將私人頻道的訊息發往 server-side,透過 server 轉給指定的使用者,所以同樣是三個基本步驟。

  1. A 使用者發出訊息
  2. handler.js 做為中介接收訊息,轉發給 server-side
  3. server-side 監聽並接受訊息資料,準備回傳

Emit Message

抓取輸入框的 DOM,監聽輸入訊息的動作,當送出時(即按下 Enter 事件),記錄訊息的作者名,作者ID,訊息內容,接收方的ID。並且同樣轉給中介層。

// ui.js
const newMessageInput = document.getElementById(messageInputID);
newMessageInput.addEventListener('keydown', (e) => {
  const key = e.key;

  if (key === 'Enter') {
    const author = store.getUserName();
    const messageContent = e.target.value;
    const receiverSocketId = peer.socketId;
    const authorSocketId = store.getSocketId();

    const data = {
      author,
      messageContent,
      receiverSocketId,
      authorSocketId,
    };

    socketHandler.sendDirectMessage(data);
    newMessageInput.value = '';
  }
});

Handler

中介層透過同一組 sendDirectMessage() 拿到資料後,一樣透過 emit 發給 server-side。並且建立一組 socket(direct-message)。

const sendDirectMessage = (data) => {
  socket.emit('direct-message', data);
};

Server

server-side 很單純地透過 on() 達到監聽的目的,並輸出在 terminal 上。

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

direct message to server


上一篇
Day08:Build Private Chat(建立私人頻道)
下一篇
Day10:Emit Direct Message II(Render 私人訊息到 HTML)
系列文
摸索 WebSocket,遠望 WebRTC30

尚未有邦友留言

立即登入留言