所有套接字都接收消息，除了第一个答案

【问题标题】：All sockets receive messages except the first one所有套接字都接收消息，除了第一个
【发布时间】：2021-08-22 13:07:57
【问题描述】：

我有一个 react-native 项目，它使用 socket.io 与 express 服务器进行通信。

在服务器端，我有一个处理程序，当一个新的套接字加入房间时，它会发送某个房间中的玩家总数：

io.on('connection', socket => {
  ...
  socket.on('initialConnectionResponse', (data) => {
      socket.join(data.roomCode);
      roomHandler.addPlayer(socket.id, data.name, data.roomCode);
      let playerCounter = roomHandler.getRoomCounter(data.roomCode);
      io.to(data.roomCode).emit('playerCounter', playerCounter);
  });
  ...
});

现在在客户端，我有一个状态，每次收到playerCounter 事件时都会更新：

const [playerCount, setPlayerCount] = useState(0);
...
useEffect(() => {
  ...
  // Listen to PlayerCount event
  socket.on("playerCounter", data => {
      setPlayerCount(data);
  });
  ...
});

return (
  ...
  <Text>{`Current Players: ${playerCount}`}</Text>
  ...
)

到目前为止这么好？现在问题来了，我面临的非常奇怪的行为是第一个客户端没有收到其他玩家的计数更新（除了它自己），所以它的计数器被冻结在值 1，无论有多少其他玩家加入房间，总是显示Current Players: 1。但是，在它之后加入的所有其他客户端都很好地收到了这些更新，并且每当有新玩家加入时都会更新他们的计数器。

为了便于说明，以下是典型场景下客户端的计数器值：

Client 1 joins:
  Client 1 counter: 1

Client 2 joins:
  Client 1 counter: 1
  Client 2 counter: 2

Client 3 joins:
  Client 1 counter: 1
  Client 2 counter: 3
  Client 3 counter: 3

什么会导致这种行为？

【问题讨论】：

标签： reactjs sockets socket.io

【解决方案1】：

经过几个小时的调查，结果发现总是来自createRoom 组件的第一个套接字加入了一个带有 5 位数字代码（例如 13586）的房间，而后面的每个套接字总是来自一个joinRoom 组件加入了此代码的字符串等效空间（例如“13586”）。

如果我使用的是 TypeScript，或者我自己做了一个简单的类型检查，问题就不会存在。

【讨论】：