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

Posted 2023-03-07

【中文标题】使用 Socket.Io 聊天应用程序 - 发送和接收消息之间的区别

【英文标题】：Chat App with Socket.Io - Difference between sending and receiving a message

【发布时间】：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 = "";
    
)

【参考方案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 = "";
    
)

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