首先new一个webscoket的连接

let noticeSocketLink = new WebSocket(‘webSocket的地址’)

这里是连接成功之后的操作

linkNoticeWebsocket(){

        noticeSocketLink.onopen = ()=>{

    //在连接成功打开的时候调用断线重连的函数,传入websocket对象 

          webCloseLink(noticeSocketLink)

        }

        this.noticeSocketLink.onmessage = res => {
console.log("res")
} noticeSocketLink.onclose = res => { console.log("websocket is closed") } },

//断开连接,断线重连的函数

webCloseLink(WebSocketId){
  WebSocketId.send("心跳包内容")
  // 每个15秒发送一次心跳包
  let hb = setInterval(()=>{
    WebSocketId.send("心跳包内容")
    // 检测到websocket连接断开
    if(WebSocketId.readyState == 2 || WebSocketId.readyState == 3){
      clearInterval(this.hb)
      let i = 1
      let myVar = setInterval(()=>{
        if(WebSocketId.readyState == 2 || WebSocketId.readyState == 3){
          // 重新new一个websocket的连接
          this.noticeSocketLink = new WebSocket(WebSocketId.url);
          WebSocketId = this.noticeSocketLink;
          if(i == 5){
            clearInterval(myVar);
            // location.reload();
            return
          }
          i++
        }else if(WebSocketId.readyState == 0){         }else if(WebSocketId.readyState == 1){ // websocket重连成功
          this.linkNoticeWebsocket();
          clearInterval(hb)
          clearInterval(myVar)
        }
      },4*1000)
    }
  }, 15000)
},

webSocket使用心跳包实现断线重连的更多相关文章

  1. Netty — 心跳检测和断线重连

    一.前言 由于在通信层的网络连接的不可靠性,比如:网络闪断,网络抖动等,经常会出现连接断开.这样对于使用长连接的应用而言,当突然高流量冲击势必会造成进行网络连接,从而产生网络堵塞,应用响应速度下降,延 ...

  2. Netty学习篇④-心跳机制及断线重连

    心跳检测 前言 客户端和服务端的连接属于socket连接,也属于长连接,往往会存在客户端在连接了服务端之后就没有任何操作了,但还是占用了一个连接:当越来越多类似的客户端出现就会浪费很多连接,netty ...

  3. Netty 如何实现心跳机制与断线重连?

    作者:sprinkle_liz www.jianshu.com/p/1a28e48edd92 心跳机制 何为心跳 所谓心跳, 即在 TCP 长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, ...

  4. netty心跳机制和断线重连(四)

    心跳是为了保证客户端和服务端的通信可用.因为各种原因客户端和服务端不能及时响应和接收信息.比如网络断开,停电 或者是客户端/服务端 高负载. 所以每隔一段时间 客户端发送心跳包到客户端  服务端做出心 ...

  5. 给websocket加入心跳包防止自动断开连接

    var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当 ...

  6. 浅谈IM软件client的断线重连、心跳和长在线

    版权声明:原创文章,未经博主同意禁止转载.欢迎点击头像上方"郭晓东的专栏"查看专栏 https://blog.csdn.net/hherima/article/details/27 ...

  7. 【简记】前端对接WebSocket与心跳重连

    前言 最近又在忙着开发别的模块,其中包含了即时通讯这一块,上一次做即时通讯时还是去年年底,一时间代码都在自己的笔记本里,还没带--这里就记录一下前端对接WebSocket的实现,包含心跳重连,简记之. ...

  8. Netty(六):Netty中的连接管理(心跳机制和定时断线重连)

    何为心跳 顾名思义, 所谓心跳, 即在TCP长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, 通知对方自己还在线, 以确保 TCP 连接的有效性. 为什么需要心跳 因为网络的不可靠性, 有可 ...

  9. js websocket断线重连

    js websocket断开重连实例代码,请根据自己需求做出相应改动Vue中使用websocket $(function() { var lockReconnect = false;//避免重复连接 ...

随机推荐

  1. std::ref() 与 &

    引言 之前因为调整样式把博客园的样式毁了,所以一直在自己的另一个博客上更新,有兴趣的可以去观望一下:http://blog.yunlambert.top/最近还是把博客园拾起来吧..... 最近看到一 ...

  2. (转)diff 命令

    每天一个linux命令(36):diff 命令  原文:http://www.cnblogs.com/peida/archive/2012/12/12/2814048.html diff 命令是 li ...

  3. 查看Memcache运行状况

    Memcache Memcache是danga.com的一个开源项目,它是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的Hash表,能够用来存储各种格式的数据. 查看当前的me ...

  4. cocos

    cocos compile -p android --android-studio --app-abi=armeabi-v7a ./adb kill-server&& ./adb se ...

  5. Python3.5 调用Ansible 执行命令

    ansible.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- import os import tempfile from collections ...

  6. [PHP]使用日志进行调试

    两种方法: 1.利用自定义函数: //写日志,打印字符串function writelog($str){ $open=fopen("log.txt","a+") ...

  7. 汇编语言版本的HelloWorld

    平台 macOS 工具 nasm clang 文件 main.asm extern _printf ; 这里调用系统的一个系统调用函数, _printf, 使用extern告诉链接器该label在其他 ...

  8. java - Socket简单编程实践

    1.简介: 1)SOCKET是应用程序和网络之间的一个接口.SOCKET创建设置好以后,应用程序可以: 通过网络把数据发送到socket . 通过网络从socket接收数据.(通信的前提是应用程序知道 ...

  9. ABAP ICON

    1.输出图标的3种方法 WRITE: / '@09@'. "id WRITE: / icon_yellow_light. "name WRITE: / '@S_TL_Y@'. &q ...

  10. WPF中的StackPanel、WrapPanel、DockPanel(转)

    一.StackPanel StackPanel是以堆叠的方式显示其中的控件 1.可以使用Orientation属性更改堆叠的顺序 Orientation="Vertical" 默认 ...