使用 Socket.Io 聊天应用程序 - 发送和接收消息之间的区别答案

【问题标题】：Chat App with Socket.Io - Difference between sending and receiving a message使用 Socket.Io 聊天应用程序 - 发送和接收消息之间的区别
【发布时间】：2022-01-18 21:42:11
【问题描述】：

我正在尝试为一个学校项目创建一个小聊天应用程序，但我遇到了一个小问题，因为我真的是 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 = "";
    }
})

【问题讨论】：

标签： javascript node.js sockets websocket socket.io

【解决方案1】：

为什么有两个类用于发送和接收消息？ 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。也许这可以帮助你？我有点不确定你在问什么。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：