Question

从发送侧发射侧，现在当我从发射侧发送我的文本时，它会在这一侧打印两次但在另一面只打印一次

send.addEventListener('click',(e) =>{
    e.preventDefault();
    if(nameUser.value){
        var msgDiv = document.createElement('div');
        var userName = document.createTextNode(nameUser.value+' :: ');
        msgDiv.appendChild(userName);
        var brk = document.createElement('div')
        brk.style.height = '10px';
        msgDiv.style.backgroundColor = '#f87901';
        msgDiv.style.padding = '8px';
        msgDiv.style.width = 'auto';
        msgDiv.style.height = 'auto';
        msgDiv.style.display = 'inline-block';
        msgDiv.style.borderRadius = '20px';
        var msg = document.createTextNode(textBox.value);
        msgDiv.appendChild(msg);
        msgDiv.style.color = 'white';
        boxBody.appendChild(msgDiv); 
        boxBody.appendChild(brk);  

        socket.emit('text',{
            value:textBox.value
        });
        textBox.value = '';
    }
})

在其他客户端接收，这里工作精细打印只有一次，但当它作为发件人工作，然后再次打印这一面，一次在其他客户端，我不知道是什么问题

socket.on('text',data =>{
    msgDiv = document.createElement('div');
    brk = document.createElement('div')
    brk.style.height = '10px';
    msgDiv.style.backgroundColor = 'orange';
    msgDiv.style.padding = '8px';
    msgDiv.style.width = 'auto';
    msgDiv.style.height = 'auto';
    msgDiv.style.display = 'inline-block';
    msgDiv.style.borderRadius = '20px';
    msg = document.createTextNode(data.value);
    msgDiv.appendChild(msg);
    boxBody.appendChild(msgDiv); 
    boxBody.appendChild(brk); 
});

Answer 1

我不是那个js。但如果我理解正确，你会在发送方创建一个div。这会附加到正文boxBody.appendChild(brk);。即使没有成功发送，也会显示该消息。

解决方案是只发出消息并让它通过套接字事件创建，确保消息正确发出。

（未经测试的种类 - 伪代码）

send.addEventListener('click',(e) =>{
    e.preventDefault();
    if(nameUser.value){    
        socket.emit('text',{
            value:textBox.value
        });
        textBox.value = '';
    }
})

您可能还应该发送某种用户名，以便显示。

请参阅示例应用https://socket.io/demos/chat/ 该来源也可在https://github.com/socketio/socket.io/tree/master/examples/chat获得。

希望这有帮助。

有一个伟大的

在socket.io聊天应用程序中，我的聊天打印在我打字的那一侧两次

1 个答案: