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

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 获得。

希望这有帮助。

有一个伟大的