webSocket前端js加⼊⼼跳机制的基本写法1前⾔
websocket ⼀般每隔 90 秒⽆操作则会⾃动断开，需要加⼊⼀个⼼跳机制来防⽌⾃断
2. 实验过程
（1）设定⼀个jsp 或html ⽂件都⾏，加⼊元素
（2）js 源码，点击查看
1//避免重复链接
2var lockReconnect = false;
3//路径
4var wsUrl = $("#wsUrl").val();
5 console.log("路径" + wsUrl);
6//webSocket对象
7var ws;
8//时间间隔
9var tt;
10
11if ("WebSocket" in window) {
12    console.log("⽀持WebSocket")
13 } else {前端websocket怎么用
14    alert("该浏览器不⽀持WebSocket")
15 }
16
17//创建ws连接
18var createWebSocket = function (wsUrl) {
19try {
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//初始化⽅法，成功后执⾏
32var 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 () {
45var 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        set();
74    };
75
76 };
77
78
79var webSocketReconnect = function (url) {
80    console.log("socket 连接断开，正在尝试重新建⽴连接");
81if (lockReconnect) {
82return;
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很相似
103var heartCheck={
104    timeout: 30000,//30秒
105    timeoutObj: null,
106    reset: function(){//接收成功⼀次推送，就将⼼跳检测的倒计时重置为30秒
107        clearTimeout(this.timeoutObj);//重置倒计时
108this.start();
109    },
110    start: function(){//启动⼼跳检测机制，设置倒计时30秒⼀次
111this.timeoutObj = setTimeout(function(){
112var 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///
129function mysend() {
130var text = $("#text").val();
131    console.log("text:" + text);
132//向ws发送信息
133    ws.send(text);
134
135 }
View Code
（3）测试截图
3.⼼得
所谓的⼼跳检测，就是隔⼀段时间向服务器进⾏⼀次数据访问，因为长时间不使⽤会导致ws⾃动断开，⼀般是间隔90秒内⽆操作会⾃动断开，因此，在间隔时间内进⾏⼀次数据访问，以防⽌ws断开即可，
这⾥选择30秒，倒计时30秒内⽆操作则进⾏⼀次访问，有操作则重置计时器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。