聊天应用 - Socket.io - 我如何向其他用户显示消息？

Posted 2023-02-23

【中文标题】聊天应用 - Socket.io - 我如何向其他用户显示消息？

【英文标题】：Chat App - Socket.io - How do I display the message to other users?

【发布时间】：2022-01-20 07:11:25

【问题描述】：

我正在为一个学校项目构建这个聊天应用程序，我同时学习了多个教程，这就是导致我遇到这个混乱代码的原因，我一直被困在其中。 此时，当我的用户写入一条消息并发送它时，它会显示给他自己，但不会显示给其他人。 那么如何让消息显示给所有人呢？ （注意：我想为收到的消息使用不同的 css 类）。

客户端代码：

const socket = io('ws://localhost:8080');
const sendBtn = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const messagesContainer = document.getElementById('messagesContainer');
const chatBigContainer = document.getElementById('chatBigContainer');

sendBtn.addEventListener('click', () =>
    if(messageInput.value === "")
        return;
     else 
        const text = messageInput.value;
        socket.emit('message', text);
    const divEl = document.createElement('div');
    divEl.className = "your-message";
    messagesContainer.appendChild(divEl);
    const labelEl = document.createElement('label');
    labelEl.innerhtml = "You";
    divEl.appendChild(labelEl);
    let messageSent = document.createElement('p');
    messageSent.innerHTML = text;
    divEl.appendChild(messageSent);

    messageInput.value = "";
    
)

服务器端代码：

const http = require('http').createServer();

const io = require('socket.io')(http, 
    cors:origin: "*" 
);

io.on('connection', (socket) => 
    console.log('a user connected');

    socket.on('message', (message) => 
        console.log(message);
        socket.broadcast.emit('message', `$message`);
    );
);

http.listen(8080, () => console.log('listening on http://localhost:8080'));

【参考方案1】：

你需要像这样在client side code中写socket.on

socket.on("message", function (messageFromOtherUser) 
  const divEl = document.createElement("div");
  divEl.className = "otherUser-message";
  messagesContainer.appendChild(divEl);
  const labelEl = document.createElement("label");
  labelEl.innerHTML = "otherUser";
  divEl.appendChild(labelEl);
  let messageSent = document.createElement("p");
  messageSent.innerHTML = messageFromOtherUser;
  divEl.appendChild(messageSent);
);