建立完成特定频道後,再来就是在指定频道中发出个人讯息,运作逻辑和公共频道类似,差别仅在於,只有进入该频道的人可以查看讯息。
同样先从 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);
});
渲染的部分就和公共频道类似,无论是抓取 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,
};
>>: Day14 用 100 寸超大萤幕写 Code 的感觉 - 用 metatable 改变预设行为
生成式(comprehension) 生成式可以依照规模产生资料,接着将资料储存在串列、字典与集合内...
今天介绍的内容为角色攻击,玩家透过滑鼠发动攻击。 ...
ASI(Automatic Semicolon Insertion) 当 JavaScript 语句...
过去在看各个前端大神直播或影片的时候,都会发现他们有许多神奇又迅速的操作,但是又不知道该如何做到,今...
前言 今日的程序码 => GITHUB google_sign_in plugin文件 sig...