zoukankan      html  css  js  c++  java
  • react --websocket 重连

    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);
      }
  • 相关阅读:
    wpf随笔
    XGrid绑定(转)
    SQL Server 批量插入数据的两种方法(转)
    UdpClient的Connect究竟做了什么(转)
    InvokeHelper,让跨线程访问/修改主界面控件不再麻烦(转)
    [C#] Control.Invoke方法和跨线程访问控件
    多线程访问winform控件出现异常的解决方法
    http://www.jdon.com/mda/oo_relation.html
    三范式浅析(转)
    SQL 表锁(转)
  • 原文地址:https://www.cnblogs.com/Super-scarlett/p/13535175.html
Copyright © 2011-2022 走看看