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