Как реагировать на отключение websocket с помощью React

Question

Я пытаюсь создать клиент WebSocket, используя React. Я адаптировал код из https://github.com/bitlabstudio/blogpost-react-websocket-chat/blob/master/frontend/src/Chat.js для создания компонента слушателя WebSocket следующим образом:

class WsListen extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
        lastMessage: '',
        ws: null
      }
    }

  componentDidMount() {

    let ws = new WebSocket(URL)
    this.setState({ws: ws})

    ws.onopen = () => {
      console.log('connected')
    }

    ws.onmessage = evt => {
      console.log(evt.data)
      this.setState({lastMessage: evt.data})
    }

    ws.onclose = () => {
      console.log('disconnected')
      // automatically try to reconnect on connection loss
      this.setState({ws: new WebSocket(URL)})
    }
  }

  render() {
    return (
      <div>
        <p>Last message: {this.state.lastMessage}</p>
      </div>
      );
    };
}

Это прекрасно работает для создания соединения и прослушивания сообщений. Однако логика c для повторного подключения, когда сервер отправляет разъединение, не работает. На сервере я вижу, что клиент переподключен и зарегистрирован на сервере. Но после отключения и повторного подключения клиент больше не обнаруживает и не отвечает на него.

Answer 1

Ваш ws больше не имеет функции onmessage. Вы можете создать фабричный метод WebSocket и вызывать его, когда требуется новый ws.

createWebSocket = URL => {

    let ws = new WebSocket(URL);
    ws.onopen = () => {
      console.log('connected')
    }

    ws.onmessage = evt => {
      console.log(evt.data)
      this.setState({lastMessage: evt.data})
    }

    ws.onclose = () => {
      console.log('disconnected')
      // automatically try to reconnect on connection loss
      this.setState({ws: this.createWebSocket(URL)})
    }

return ws;
}

componentDidMount() {

    this.setState({ws: this.createWebSocket(URL)})

}