React+Socket.io聊天室：自身加入房间提示不显示的问题排查

你的问题出在服务器端的事件发送逻辑上：socket.to(data.room).emit("joined-room", data.name) 这个方法的作用是向目标房间内除了当前发起请求的socket（也就是你自己）之外的所有客户端发送事件。所以你自己的客户端永远收不到这个joined-room事件，自然无法触发「You joined the room」的提示。

下面是两种可行的解决方案：

方案一：修改服务器端，让自己也能收到加入事件 #

写法1：分开发送给他人和自己 #

服务器端新增针对当前socket的事件发送：

socket.on("join-room", (data) => {
  socket.join(data.room);
  // 给房间内其他人发送“XX加入房间”的提示
  socket.to(data.room).emit("joined-room", data.name);
  // 单独给当前socket发送自己加入的事件
  socket.emit("self-joined", data.name);
});

客户端componentDidMount新增监听self-joined事件：

componentDidMount() {
  const { room, name } = this.props;
  this.props.socket.emit("join-room", { room, name });

  // 监听自己加入的事件
  this.props.socket.on("self-joined", (receivedName) => {
    this.setState({
      joinedName: receivedName,
      joinedRoom: "me"
    });
  });

  this.props.socket.on("joined-room", (receivedName) => {
    this.setState({
      joinedName: receivedName,
      joinedRoom: "other"
    });
  });

  // ... 原有receive-message逻辑
}

写法2：统一发送给房间所有人 #

直接用io.to(data.room)给房间内所有客户端（包括自己）发送事件，客户端通过name判断是否是自己：

// 服务器端代码
socket.on("join-room", (data) => {
  socket.join(data.room);
  // 给房间内所有客户端（包括自己）发送事件
  io.to(data.room).emit("joined-room", data.name);
});

客户端原有逻辑无需修改，当receivedName === name时会自动设置joinedRoom: "me"，就能显示「You joined the room」的提示。

方案二：客户端本地直接处理自己的加入提示 #

既然你已经知道自己的name和room，完全可以在发送join-room请求后，直接在本地添加自己的加入提示，不需要依赖服务器的事件：

componentDidMount() {
  const { room, name } = this.props;
  this.props.socket.emit("join-room", { room, name });

  // 直接本地设置自己加入的状态
  this.setState({
    joinedName: name,
    joinedRoom: "me"
  });

  this.props.socket.on("joined-room", (receivedName) => {
    this.setState({
      joinedName: receivedName,
      joinedRoom: "other"
    });
  });

  // ... 原有receive-message逻辑
}

这种方式更简单，不需要修改服务器代码，因为自己的加入状态是确定的，无需服务器通知。

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