如何使用 React 响应 websocket 断开连接

Question

我正在尝试使用 React 创建一个 WebSocket 客户端。我已经修改了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>
      );
    };
}

这适用于创建连接和收听消息。但是，当服务器发送断开连接时重新连接的逻辑不起作用。在服务器上，我可以看到客户端已经重新连接并被服务器注册。但是断线重连后，客户端就不再检测或响应消息了。

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)})

}