时间戳

首页 > 解决方案 > Socket 为每个连接到的房间客户端发出多个事件

javascript - Socket 为每个连接到的房间客户端发出多个事件

问题描述

我的 react-native 组件正在接收它连接到的每个先前房间的套接字事件。

我有一个简单的组件，当它安装时它会尝试加入一个套接字房间，而当其他人加入房间时它会尝试获取最新的房间数据。

当我第一次加载大厅时，我可以很好地加入房间，服务器会发出一个事件说“updateRoom”，每个连接的客户端都会收到该事件并调用更新方法。

如果我返回一个屏幕，然后返回大厅加入一个新房间，我会收到 2 个新成员已加入的事件。1 似乎用于旧房间，1 用于新房间。如果我一遍又一遍地重复这个步骤，我每次离开并开始一个新房间时都会收到额外的事件。

我的组件看起来像这样：

class LobbyScreen extends Component {

  componentDidMount() {
    const {
      route: {
        params: {
          roomId
        }
      },
      socket,
      user
    } = this.props

    socket.on('updateRoom', () => {
      getRoom({ roomId })
    })

    socket.emit('joinRoom', {
      roomId, 
      userId: user._id
    })
  }

  render() {

    return (
      <View style={styles.container}>
        ...
      </View>
    )
  }  
}

我有一个简单的套接字服务器来处理连接以及接收和发出加入房间的事件：

io.on("connection", socket => {

  socket.on("joinRoom", ({ roomId, userId }) => {

    socket.join(roomId, () => {
      io.to(roomId).emit("updateRoom", { userId }) // tells everyone in the room that user with userId joined
    })

  })

})

标签： javascriptnode.jsreactjsreact-nativesockets

解决方案

问题在于你的服务器代码没有反应！如果用户应该一次只出现在一个房间中，您应该将代码更改为：

socket.on("joinRoom", ({ roomId, userId }) => {
    socket.leave(PREVIOUS_ROOM); // leave previous room before joining a new one
    socket.join(roomId, () => {
    io.to(roomId).emit("updateRoom", { userId })
})

推荐阅读