• 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);
      }
  • 相关阅读:
    PHP curl_share_init函数
    使用脚本管理mongodb服务
    多项式全家桶
    Resharper 如何把类里的类移动到其他文件
    Resharper 如何把类里的类移动到其他文件
    win10 17025 触摸bug
    win10 17025 触摸bug
    VisualStudio 自定义外部命令
    VisualStudio 自定义外部命令
    C# Find vs FirstOrDefault
  • 原文地址:https://www.cnblogs.com/Super-scarlett/p/13535175.html
Copyright © 2020-2023  润新知