Chat App with Socket.Io - 发送和接收消息的区别

Question

我正在尝试为一个学校项目创建一个小聊天应用程序，但我遇到了一个小问题，因为我是 socket.io // node.js（一般编码）的新手.英语不是我的第一语言，所以我发现很难从教程中真正理解它是如何工作的。现在我有 2 css 类，一个用于发送的消息，一个用于接收的消息。我该怎么做才能让类对每条消息应用正确的方式？如何检查哪些消息是我发送的，哪些是其他用户收到的？我真的不清楚。

服务器端代码：

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);
        io.emit('message', `${message}`);
    });
});


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

客户端代码：

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

socket.on('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);
})

sendBtn.addEventListener('click', () =>{
    if(messageInput.value === ""){
        return;
    } else {
        const text = messageInput.value;
        socket.emit('message', text);
        messageInput.value = "";
    }
})

Answer 1

据我了解，您在发送任何文本时并未创建任何元素。相反，您向所有人发出了相同的信息：

io.emit('message', `${message}`);

这样您就认为您实际上是在为发送和接收创建 HTML div。首先你的服务器代码应该是：

socket.broadcast.emit('message', `${message}`);

（这会发送给除发件人以外的所有人，并且应该适用于您有 2 个用户的简单案例。稍后您将需要房间）

这将表明您在发送消息时实际上并未创建任何元素。

socket.on('message', text => {
})

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 = "";
    }
})

用你的类名和标签替换上面的内容

Answer 2

为什么你有两个类用于发送和接收消息？ socket.emit 将向所有客户端发送消息，然后您可以附加消息。

如 socket.io 聊天教程 (https://socket.io/get-started/chat) 所示：

其次，如果你想查看哪些用户是哪些用户，你可以给用户分配一个socket.id，就像这样。

io.on('connection', function(socket) {
  console.log(`A user connected. ID: ${socket.id}`)
  socket.on('disconnect', function() {
    console.log(`A user disconnected. ID: ${socket.id}`);
  });
});

这样，每个用户都有一个唯一的套接字ID。也许这可以帮助你？我有点不确定你在问什么。

Chat App with Socket.Io - 发送和接收消息的区别

Chat App with Socket.Io - Difference between sending and receiving a message

javascript

sockets

websocket

node.js

socket.io