webSocket 前端 js 加入 心跳机制 的基本写法
1前言
websocket 一般 每隔 90 秒无操作则会自动断开 ,需要加入一个心跳机制 来防止 自断
2. 实验过程
(1)设定一个jsp 或html 文件都行 ,加入元素
(2)js 源码 ,点击查看
1 //避免重复链接
2 var lockReconnect = false;
3 //路径
4 var wsUrl = $("#wsUrl").val();
5 console.log("路径" + wsUrl);
6 //webSocket对象
7 var ws;
8 //时间间隔
9 var tt;
10
11 if ("WebSocket" in window) {
12 console.log("支持WebSocket")
13 } else {
14 alert("该浏览器不支持WebSocket")
15 }
16
17 //创建ws连接
18 var createWebSocket = function (wsUrl) {
19 try {
20 //成功
21 ws = new WebSocket(wsUrl);
22 webSocketInit();//初始化webSocket连接函数
23 } catch (e) {
24 //失败
25 console.log('catch');
26 //重连
27 //重连函数
28 webSocketReconnect(wsUrl);
29 }
30 };
31 //初始化方法,成功后执行
32 var webSocketInit = function () {
33 //连接关闭函数
34 ws.onclose = function () {
35 console.log("连接已关闭...");
36 webSocketReconnect(wsUrl)//如果连接关闭则重连
37 };
38 //连接错误函数
39 ws.onerror = function () {
40 console.log("连接错误...");
41 webSocketReconnect(wsUrl)//如果连接错误则重连
42 };
43 //连接建立,发送信息
44 ws.onopen = function () {
45 var message1 = {
46 "type": "SUB",
47 "service": "业务1-确认第一次发送信息"
48 };
49 ws.send(JSON.stringify(message1));//webSocket业务订阅——可以有多个业务
50 // var message2 = {
51 // "type": "SUB",
52 // "service": "业务2"
53 // };
54 // ws.send(JSON.stringify(message2));
55 //心跳检测启动
56 heartCheck.start();//订阅业务发送之后启动心跳检测机制
57 };
58 //业务订阅成功后接受服务端推送消息 ,其实是个字符串
59 ws.onmessage = function (evt) {
60 console.log('接收到消息' + evt.data);
61 $("#span").html(evt.data);
62 // var DATA=JSON.parse(evt.data);
63 // if (DATA.service=="业务1") {
64 // console.log("接收业务1的数据");
65 // //接收业务1的数据,并进行相关逻辑处理
66 // }
67 // if (DATA.service=="业务2"){
68 // console.log("接收业务1的数据");
69 // //接收业务2的数据,并进行相关逻辑处理
70 // }
71 //接收一次后台推送的消息,即进行一次心跳检测重置
72
73 heartCheck.reset();
74 };
75
76 };
77
78
79 var webSocketReconnect = function (url) {
80 console.log("socket 连接断开,正在尝试重新建立连接");
81 if (lockReconnect) {
82 return;
83 }
84 lockReconnect = true;
85 //没连接上会一直重连,设置延迟,避免请求过多
86
87 //
88 //s中清楚setTimeout的定时触发设置,之所以加个timer,是为了方便第二次赋值给timer。
89 // 也就是说直接clearTImeout(timer)则timer就不存在了 再次访问就是error了。
90 // 而timer&&clearTimeout(timer)则将timer 变成undefined
91 tt && clearTimeout(tt);
92 tt = setTimeout(function () {
93 createWebSocket(url);
94 }, 4000)
95 };
96
97
98 //心跳检测 .所谓的心跳检测,就是隔一段时间向服务器仅限一次数据访问,因为长时间不使用会导致ws自动断开,
99 // 一般是间隔90秒内无操作会自动断开,因此,在间隔时间内进行一次数据访问,以防止ws断开即可,
100 //这里选择30秒,倒计时30秒内无操作则进行一次访问,有操作则重置计时器
101 //
102 //封装为键值对的形式,成为js对象,与json很相似
103 var heartCheck={
104 timeout: 30000,//30秒
105 timeoutObj: null,
106 reset: function(){//接收成功一次推送,就将心跳检测的倒计时重置为30秒
107 clearTimeout(this.timeoutObj);//重置倒计时
108 this.start();
109 },
110 start: function(){//启动心跳检测机制,设置倒计时30秒一次
111 this.timeoutObj = setTimeout(function(){
112 var message = {
113 "type": "t10010",
114 "service":"运行心跳业务一次 =="+ new Date()
115 };
116 // JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
117 //而JSON.parse()可以将JSON字符串转为一个对象。
118 console.log("心跳一次");
119 ws.send(JSON.stringify(message));//启动心跳
120 },this.timeout)
121 }
122 //onopen连接上,就开始start及时,如果在定时时间范围内,onmessage获取到了服务端消息,
123 // 就重置reset倒计时,距离上次从后端获取消息30秒后,执行心跳检测,看是不是断了。
124 };
125
126 //开始创建webSocket连接
127 createWebSocket(wsUrl);
128 ///
129 function mysend() {
130 var text = $("#text").val();
131 console.log("text:" + text);
132 //向ws发送信息
133 ws.send(text);
134
135 }
(3)测试截图
3.心得
所谓的心跳检测,就是隔一段时间向服务器进行一次数据访问,因为长时间不使用会导致ws自动断开,
一般是间隔90秒内无操作会自动断开,因此,在间隔时间内进行一次数据访问,以防止ws断开即可,
这里选择30秒,倒计时30秒内无操作则进行一次访问,有操作则重置计时器
webSocket 前端 js 加入 心跳机制 的基本写法的更多相关文章
- Spring boot集成Websocket,前端监听心跳实现
第一:引入jar 由于项目是springboot的项目所以我这边简单的应用了springboot自带的socket jar <dependency> <groupId>org. ...
- WebSocket断开原因、心跳机制防止自动断开连接
1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...
- Socket心跳机制-JS+PHP实现
本文是我在实际工作中用到的Socket通信,关于心跳机制的维护方式,特意总结了一下,希望对朋友们有所帮助. Socket应用:首先Socket 封装了tcp协议的,通过长连接的方式来与服务器通信,是由 ...
- uni-app中websocket的使用 断开重连、心跳机制
前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...
- 前端面试:谈谈 JS 垃圾回收机制
摘要: 不是每个人都回答的出来... 最近看到一些面试的回顾,不少有被面试官问到谈谈JS 垃圾回收机制,说实话,面试官会问这个问题,说明他最近看到一些关于 JS 垃圾回收机制的相关的文章,为了 B 格 ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- Netty学习(八)-Netty的心跳机制
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a953713428/article/details/69378412我们知道在TCP长连接或者Web ...
- ajax下载,前端js下载(转)
前面一直做过下载的功能.就是后台将文件流写入response里面,然后就好了.前台会自动弹出下载提示等. 今天打算做一个ajax下载.想当然的结果死活浏览器没反应.我擦. 然后浏览器调试,发现resp ...
随机推荐
- 【力扣】649. Dota2 参议院
Dota2 的世界里有两个阵营:Radiant(天辉)和 Dire(夜魇) Dota2 参议院由来自两派的参议员组成.现在参议院希望对一个 Dota2 游戏里的改变作出决定.他们以一个基于轮为过程的投 ...
- Log4j 被曝核弹级漏洞,开发者炸锅了!
大家好,我是鱼皮,开门见山,知名的开源项目 Apache Log4j 出事了! 2021 年 12 月 9 日,该项目被曝存在 严重安全漏洞 ,攻击者只需要向目标机传入一段特殊代码,就能触发漏洞,自由 ...
- C#和.NET 框架
C#和.NET框架 在.NET之前 20世纪90年代,微软平台多数程序员使用VB.C或C++.他们使用的技术都有问题. 技术 问题 纯Win32 API 不是面向对象,工作量比MFC大 MFC(Mic ...
- rpm-build方式制作rpm包
目录 一.简介 二.具体操作 一.简介 可以将编译完成的服务打成rpm包放到私有仓库了,用于自定义的各种软件进行安装部署配置. 二.具体操作 1.安装软件,这个命令将构建rpm包 yum -y ins ...
- C# 扫描识别图片中的文字(.NET Framework)
环境配置 本文以C#及VB.NET代码为例,介绍如何扫描并读取图片中的文字. 本次程序环境如下: Visual Studio版本要求不低于2017 图片扫描工具:Spire.OCR for .NET ...
- IDEA快速创建一个简单的SpringBoot项目(需要联网)
一.点击File-New-Project,选择Spring initializr ,选择jdk1.8及以上 二.填写相关信息,点击Next 3.选择Web -Spring Web,点击Next 4.输 ...
- 网络编程之UDP(3)丢包总结
读书笔记 from here UDP socket缓冲区满造成的UDP丢包 如果socket缓冲区满了,应用程序没来得及处理在缓冲区中的UDP包,那么后续来的UDP包会被内核丢弃,造成丢包.在sock ...
- 【LeetCode】5. Longest Palindromic Substring 最长回文子串
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:最长回文子串,题解,leetcode, 力扣,python ...
- 【LeetCode】700. Search in a Binary Search Tree 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcod ...
- 【剑指Offer】二叉树的深度 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 解题方法 日期 题目地址:https://www.nowcoder.co ...