Сокет генерирует несколько событий для каждой комнаты, к которой клиент подключается - PullRequest
Новая
       4

Сокет генерирует несколько событий для каждой комнаты, к которой клиент подключается

0 голосов
/ 07 апреля 2020

Мой реактивный компонент получает события сокета для каждой предыдущей комнаты, к которой он подключен.

У меня есть простой компонент, который при монтировании пытается присоединиться к комнате сокетов, а когда кто-то присоединяется к комнате, он пытается получить самые последние данные о комнате.

Когда я загружаю лобби в первый раз, я могу присоединиться к комнате в порядке, и сервер отправляет событие, чтобы сказать «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
    })

  })

})

1 Ответ

0 голосов
/ 08 апреля 2020

Вы можете использовать componentWillUnmount, чтобы отписаться от события сокета всякий раз, когда пользователь покидает представление. Это метод жизненного цикла реакции, который вызывается непосредственно перед удалением компонента.

В зависимости от структуры сокета будет существовать метод close, который можно вызвать для закрытия соединения, или в вашем случае вы можете вероятно, найдите метод, который отписывается от комнаты. 

componentWillUnmount() {
  socket.close()
}

Обзоры упрощены, но вы должны понять.

...