使用 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將向所有客戶端發出消息，然后您可以 append 消息。

從 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。 也許這可以幫助你？ 我有點不確定你在問什么。