Socket.IO聊天室问题：发送者无法看到自身发送的消息

你的后端代码处理send_message事件时，使用了socket.to('123').emit()方法——这个方法仅向指定房间内除当前发送者之外的所有用户推送消息，因此发送消息的客户端自身接收不到receive_message事件，也就看不到自己发送的内容。

两种常用方案任选其一即可：

方案一：后端同时通知发送者 #

修改后端send_message的处理逻辑，要么单独给发送者发一次消息，要么直接给房间内所有用户（含发送者）推送消息：

方式1：单独推送发送者 #

socket.on("send_message", (data) => {
  // 给房间内其他用户发消息
  socket.to('123').emit("receive_message", `${socket.id}: ${data}`);
  // 给发送者自己发消息
  socket.emit("receive_message", `${socket.id}: ${data}`);
});

方式2：统一推送所有房间用户 #

用io.to('123').emit()替代原方法，该方法会覆盖房间内包括发送者在内的所有用户：

socket.on("send_message", (data) => {
  io.to('123').emit("receive_message", `${socket.id}: ${data}`);
});

方案二：前端本地直接添加消息 #

在提交消息的MyForm组件中，用户发送消息时直接将内容添加到本地消息列表，无需等待后端返回：

// MyForm组件内的提交逻辑示例
const handleSubmit = (message) => {
  // 先将消息加入本地列表
  setFooEvents(prev => [...prev, `${socket.id}: ${message}`]);
  // 再发送给后端同步给其他用户
  socket.emit('send_message', message);
};

这种方式能让消息立即显示，用户体验更流畅。

若使用方案一，需确保用户发送消息前已点击Join Room按钮加入123房间，否则发送者不在房间内，io.to('123').emit()也无法推送给自己。

内容的提问来源于stack exchange，提问作者Arthur