Day13:Send Message To Room(发送讯息到特定房间)

全文同步於个人 Docusaurus Blog

建立完成特定频道後,再来就是在指定频道中发出个人讯息,运作逻辑和公共频道类似,差别仅在於,只有进入该频道的人可以查看讯息。

Client-side 输入讯息

同样先从 ui 出发,检查使用者是否在房间中输入讯息,监听键盘事件,当触发时则传递讯息资料给 handler.js。

// ui.js
const createRoomChat = () => {
  // ...
  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 authorSocketId = store.getSocketId();

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

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

handler 将取得的资料透过 emit 转发给 server-side,同时建立 socket 连线。

// handler.js
const sendRoomMessage = (data) => {
  socket.emit('room-message', data);
};

server-side 除了监听 connection(),将房间 ID 存入外,同时也得将它再转发回 handler.js,方便中介层重新递给 ui.js。

// server.js
socket.on('room-message', (data) => {
  const { roomId } = data;

  io.to(roomId).emit('room-message', data);
});
// handler.js
socket.on('room-message', (data) => {
  ui.appendRoomChatMessage(data);
});

Render

渲染的部分就和公共频道类似,无论是抓取 DOM 和动态塞入资料都是一样的逻辑。

// ui.js
const appendRoomChatMessage = (data) => {
  const { roomId, author, messageContent } = data;
  const roomChatMessageId = `${roomId}-message`;
  const roomMessageWrapper = document.getElementById(roomChatMessageId);

  const roomData = {
    author,
    messageText: messageContent,
  };

  const roomMessage = element.getChatMessageContent(roomData);
  roomMessageWrapper.appendChild(roomMessage);
};

export default {
  // ...
  appendRoomChatMessage,
};

send message to room


<<:  浅谈传输层协定(一):TCP 在做什麽?

>>:  Day14 用 100 寸超大萤幕写 Code 的感觉 - 用 metatable 改变预设行为

[Day_20]回圈与生成式 - (6)

生成式(comprehension) 生成式可以依照规模产生资料,接着将资料储存在串列、字典与集合内...

Unity与Photon的新手相遇旅途 | Day10-角色攻击

今天介绍的内容为角色攻击,玩家透过滑鼠发动攻击。 ...

【Day10】ASI 自动插入分号

ASI(Automatic Semicolon Insertion) 当 JavaScript 语句...

[Day23] 运用 VS Code 组合键加快编辑速度 - 操作介面篇

过去在看各个前端大神直播或影片的时候,都会发现他们有许多神奇又迅速的操作,但是又不知道该如何做到,今...

【第十六天 - Flutter Google、Apple、FB Sign in 流程讲解】

前言 今日的程序码 => GITHUB google_sign_in plugin文件 sig...