SOCKET.ON в Reactjs

Question

Я создаю приложение чата, используя express socket-io и reactjs. У меня проблема с прослушиванием сокетов на стороне клиента с использованием 'socket.on' в reactjs коде. В принципе мне не ясно, где и как использовать этот код. Какую часть я должен написать 'socket.on'?

Я пытался использовать его в componentDidUpdate () и render (), но я не получил ожидаемых результатов. Файл console.log в socket.on регистрируется несколько раз.

Например, когда я помещаю в render (): кажется, что всякий раз, когда происходит повторное рендеринг, он запоминает и, как только происходит событие socket.on, он запускает (регистрирует) столько раз, сколько выводит вывод в консоли. .

Как правильно добавить socket.on в компонент реагирования?

Answer 1

Не помещайте его в componentDidUpdate или рендер, иначе он будет вызываться несколько раз. Вы можете вызвать его в componentDidMount, чтобы вы были готовы отображать входящие сообщения

Answer 2

Если вы можете использовать реакционные хуки, решение будет заключаться в реализации шаблона useEffect.

useEffect(() => {
  socket.on('message', fn)
  return () => {
  // do clean up here
   ...
  }
}, [])

, если вам нужно придерживаться компонентов класса, лучше всего выбрать componentDidMount ()

// first create a reference to socket so you can clean up later. Either this.socket or just socket, which ever you prefer.
const socket = socketClient(whatEverYourEndpointIs);

componentDidMount() {
    socket.on('message', fn)
}

Тогда вы выполните очистку в componentWillUnmount

componentWillUnmount() {
    // clean up socket here
}