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

Question

我正在为一个学校项目构建这个聊天应用程序，并且我同时学习了多个教程，这就是导致我编写这段混乱代码的原因，我一直坚持使用它。在这一点上，当我的用户写了一条消息并发送了它时，它只为他自己而不是其他人显示。那么如何让消息显示给所有人呢？（注意：我想对收到的消息使用不同的 css class）。

客户端代码：

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

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

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

Chat App - Socket.io - How do I display the message to other users?

javascript

sockets

web-applications

node.js

socket.io