Javascript 通过Socketio传递新的DOM元素

如何通过socketio在服务器端传递DOM元素以显示新的消息内容。

//客户端
//将DOM元素作为字符串传递
函数元素缩放（elem）{
返回元素outerHTML
}
window.addEventListener（“keyup”，sendMessage，false）；
函数sendMessage（键）{
如果（key.keyCode===13）{
如果（chatbox.value！==“”）{
const child=document.createElement（“div”）；
child.textContent=`${chatbox.value}`
child.className=“消息”
chat.appendChild（child）；
socket.emit（'chatMsg'，elemToString（子））
chatbox.value=“”；
chatbox.style.display=“无”；
设置超时（（）=>{
child.remove（）
},4000)
} 
else chatbox.style.display=“无”；
}
}
//用户类
类用户{
构造函数（名称，x，y）{
this.alive=false
this.name=name
this.cells=[]
this.room='none'
this.message=[]
}
更新（单元格）{
this.cells=单元格
}
}
module.exports=用户
//服务器
socket.on（'chatMsg'，elem=>{
user.message.push（elem）
})

我想问的第一个问题是，您是否真的需要传递HTML或DOM对象？根据上面的代码片段，对于服务器和聊天客户端来说，以字符串形式发送消息（没有任何HTML标记，只有消息正文）似乎是迄今为止最简单的方法。至于向聊天室中的所有用户发送消息，该功能已经内置在socket.io（请参阅）中，除非您需要实现自定义日志记录或过滤，否则您可以直接使用它

构建此聊天服务器有几种方法：

简单/POC方法 如果您只想拥有一个快速原型，看看它是否达到了您想要的效果，并且您不太关心审计、日志记录、筛选等，那么：

• 当客户端连接时，它会“连接”socket.io“文件室”（文件室的名称可以与客户端上的文件室匹配，或者您可以选择格式化/散列文件室等）

• 所有聊天室客户端都将事件发送到同一个聊天室，并侦听该聊天室发出的事件。io后端负责重新广播事件，因此您无需执行任何操作

• 要向会议室发送消息，“发送者”客户端将广播一个众所周知的事件，类似于

  {message:'}

  。所有的客户端都会监听聊天室中的事件，一旦一个新事件到来，他们就会创建一个新的HTML元素（比如，
  ），并将该消息作为内容附加到聊天窗口中

这应该包括基本的聊天室场景

更复杂一点的聊天服务器 在现实世界中的实现中，我们通常希望对哪些事件可以和不可以广播有更多的控制（例如，我们希望能够使聊天保持沉默或过滤亵渎/辱骂性语言等）。在这种情况下，我们不能简单地使用盲广播，因此通常客户端将使用两个socket.io通道-一个接收信息的“房间”和发送信息的直接通道

在这种情况下，服务器充当桥梁-它侦听传入的消息，执行所有必要的过滤、预处理、清理消息以防止注入等，然后在房间中广播生成的消息。在这种情况下：

• 所有聊天客户端都订阅相同的“传入消息”聊天室，就像前面的场景一样

• 当聊天者需要发送消息时（比如，他们按Enter键），客户端套接字会向服务器发出一个事件，并告诉服务器该消息要发送到哪个房间（例如，

  {incoming_message:'xyz'，user:'username'，room:'room_21'}

• 服务器接收消息并对其进行处理（例如，根据禁止用户列表检查用户名），然后在原始消息中指定的聊天室中广播处理后的消息。其他聊天参与者接收消息并呈现消息

在这种情况下，您可以保留特定用户发送的每条消息的历史记录（与您在代码段中所做的非常相似）

这个link（）有几个关于发送和广播任意JSON消息的示例，还展示了如何使用频道等

希望这对你的聊天服务器有帮助，祝你好运