html:

<script
      type="text/javascript"
      src="https://cdn.bootcss.com/sockjs-client/1.0.0/sockjs.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"
    ></script>

js:

connectwebsocket() {
    const initialize = () => {
      this.setState({
        lastTime: new Date().getTime(),
      });
      let origin = window.origin;
      //连接服务端的端点,连接以后才可以订阅广播消息和个人消息
      let socket = new window.SockJS(`${origin}/xxxx`);
      let stompClient = window.Stomp.over(socket);
      stompClient.debug = null; //禁用调试功能
      stompClient.heartbeat.incoming = 10000;
      stompClient.heartbeat.outgoing = 20000;
      stompClient.connect(
        {},
        () => {
          this.setState({ connectStatus: true }); //设置连接状态
          stompClient.send('/app/xxx', { priority: 9 }, xx);
          //订阅广播消息
          stompClient.subscribe('/topic/xxx/' + xx, reception => {
            xxx
          });
          const checkHearBeat = () => {
            const nowTime = new Date().getTime();
            const Time = nowTime - this.state.lastTime;
            if (Time > 300000) {
              console.log('超时。。。');
              socket.close();
              this.setState({ connectStatus: false });
              clearInterval(reconnect);
            }
          };
          const reconnect = setInterval(checkHearBeat, 5 * 1000);
        },
        error => {
          console.log('error===:', error);
          setTimeout(initialize, 5000);
        }
      );
      socket.onclose = () => {
        console.log('close====');
      };
      socket.onheartbeat = () => {
        console.log('heartbeat');
        this.setState({
          lastTime: new Date().getTime(),
        });
      };
    };

    initialize();
    setInterval(() => {
      if (!this.state.connectStatus) {
        initialize();
      }
    }, 15 * 1000);
  }