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

import React, { Component } from 'react';
import websocket from 'websocket'; // 或者使用socket.io-client

class WebSocketComponent extends Component {
  constructor(props) {
    super(props);

    this.websocket = null;
  }

  componentDidMount() {
    this.websocket = new websocket('ws://example.com'); // 替换为实际的WebSocket服务器地址

    this.websocket.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    this.websocket.onmessage = (event) => {
      console.log('收到消息:', event.data);
    };

    this.websocket.onclose = () => {
      console.log('WebSocket连接已断开');
      // 在此处处理断开连接的逻辑，例如重新连接
    };
  }

  componentWillUnmount() {
    if (this.websocket) {
      this.websocket.close();
    }
  }

  render() {
    return <div>WebSocket示例</div>;
  }
}

export default WebSocketComponent;