Day06：Forward Message To Server(转发讯息到 Server 端)

全文同步於个人 Docusaurus Blog

前一章印出使用者名称和讯息内容後，接下来要尝试将其透过 socket.io 转发给 server。

修正使用体验

在动工前，先调整一下原先 client 端的写法，之前的作法，只监听点击按钮判断是否跳转到 chat。但在使用上，可能会有当输入名称後，直接按下键盘上的 Enter，所以为了改善使用体验，按下 Enter 这个动作也需要考量进去。

// client.js
nameInput.addEventListener('keydown', (e) => {
  const key = e.key;

  if (key === 'Enter') {
    validationInput(store.getUserName());
  }
});

chatBtn.addEventListener('click', () => {
  validationInput(store.getUserName());
});

const validationInput = (username) => {
  if (username) {
    ui.goToChat();
    socketHandler.connectSocketIoServer();
  }
};

修正 element.js 中的 function 名称，getChatMessage() -> getChatMessageContent()

Build Middleware

这边我将其理解为，利用 socket 建立一个中介层，将收到的 client 端讯息，转发给 server 端。

先将原本写在 client.js 的监听移除

// client.js remove
const socket = io('/');

socket.on('connect', () => {
  console.log(`Client：${socket.id}`);
});

重新拉出来在 js 资料夹底下建立一个 folder，命名为 socket，并在底下新增一个 handler.js。

cd js

mkdir socket

cd socket

touch handler.js

将刚刚在 client.js 移除的监听，重新改写在此处，保持监听连线状况，同时建立一个 sendGroupChatMessage() 用来接收 client 端的资讯，并透过 emit() 转发给 server 端。

// handler.js
let socket = null;

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

  socket.on('connect', () => {
    console.log(`Successfully Connect：${socket.id}`);
  });
};

const sendGroupChatMessage = (author, messageText) => {
  const messageData = {
    author,
    messageText,
  };

  socket.emit('group-chat-message', messageData);
};

export default {
  connectSocketIoServer,
  sendGroupChatMessage,
};

回到 ui.js，移除原本测试用的 console.log，导入刚刚写的 handler.js，将使用者名称和讯息内容发给 socket。

// ui.js
messageInput.addEventListener('keydown', (event) => {
  const key = event.key;

  if (key === 'Enter') {
    //...
    // send message to socket.io server
    socketHandler.sendGroupChatMessage(author, messageText);
  }
});

Server Receive Message

从 handler.js，可以看到 socket 将发出的讯息命名为 group-chat-message，所以同理 server.js 这一端监听的接收的方式也是相同命名。

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

现在回到页面测试，使用者名称我输入 Pitt，并在对话框中输入 Hello Websocket!。检查 terminal，能正常接收到讯息。