-
前端Vue中WebSocket加入心跳包机制,避免自动断开连接!
2020-03-04 17:37:44工作当中所遇到的问题以及解决方式 起初本人的设计方式为: 前后端两端进行websocket通信 1:前端基础的连接以及...后端接收心跳包之后不进行任何消息的接收 直接附上代码: 注:此代码为提供思路代码 <scri...工作当中所遇到的问题以及解决方式
起初本人的设计方式为:
前后端两端进行websocket通信
1:前端基础的连接以及消息发送和接收
2:后端基础的消息接收和发送过程中问题暴露:
建立连接之后,10分钟内没有消息间的通信;websocket会自动断开连接
解决方式:
前端加入心跳包机制
后端接收心跳包之后不进行任何消息的接收
直接附上代码:
注:此代码为提供思路代码<script> export default { data() { return { websock: null,//建立的连接 lockReconnect: false,//是否真正建立连接 timeout: 28*1000,//30秒一次心跳 timeoutObj: null,//心跳心跳倒计时 serverTimeoutObj: null,//心跳倒计时 timeoutnum: null,//断开 重连倒计时 }; }, created() { //页面刚进入时开启长连接 this.initWebSocket(); }, destroyed: function() { //页面销毁时关闭长连接 this.websocketclose(); }, methods: { initWebSocket(){//建立连接 //初始化weosocket //const wsuri = "ws://sms.填写您的地址.com/websocket/" + this.charId; //ws地址 const wsuri = "" //建立连接 this.websock = new WebSocket(wsuri); //连接成功 this.websock.onopen = this.websocketonopen; //连接错误 this.websock.onerror = this.websocketonerror; //接收信息 this.websock.onmessage = this.websocketonmessage; //连接关闭 this.websock.onclose = this.websocketclose; }, reconnect() {//重新连接 var that = this; if(that.lockReconnect) { return; }; that.lockReconnect = true; //没连接上会一直重连,设置延迟避免请求过多 that.timeoutnum && clearTimeout(that.timeoutnum); that.timeoutnum = setTimeout(function () { //新连接 that.initWebSocket(); that.lockReconnect = false; },5000); }, reset(){//重置心跳 var that = this; //清除时间 clearTimeout(that.timeoutObj); clearTimeout(that.serverTimeoutObj); //重启心跳 that.start(); }, start(){//开启心跳 var self = this; self.timeoutObj && clearTimeout(self.timeoutObj); self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj); self.timeoutObj = setTimeout(function(){ //这里发送一个心跳,后端收到后,返回一个心跳消息, if (self.websock.readyState == 1) {//如果连接正常 self.websock.send("heartCheck"); }else{//否则重连 self.reconnect(); } self.serverTimeoutObj = setTimeout(function() { //超时关闭 self.websock.close(); }, self.timeout); }, self.timeout) }, websocketonopen() {//连接成功事件 //提示成功 s.success("连接成功",3) //开启心跳 this.start(); }, websocketonerror(e) {//连接失败事件 //错误 console.log("WebSocket连接发生错误"); //错误提示 s.error("Websocket error, Check you internet!") //重连 this.reconnect(); }, websocketclose(e) {//连接关闭事件 //关闭 console.log("connection closed (" + e.code + ")"); //提示关闭 s.error("连接已关闭",3); //重连 this.reconnect(); }, websocketonmessage(event) {//接收服务器推送的信息 //打印收到服务器的内容 console.log(event.data); //收到服务器信息,心跳重置 this.reset(); }, websocketsend(msg) {//向服务器发送信息 //数据发送 this.websock.send(msg); }, } }; </script>
-
websocket心跳包
2020-12-07 17:14:24HeartPongWebsocket.js ... * url websocket链接地址 * pingTimeout 未收到消息多少秒之后发送ping请求,默认15000毫秒 pongTimeout 发送ping之后,未收到消息超时时间,默认10000毫秒 reconnectTimeout onreconnHeartPongWebsocket.js
/** * `WebsocketHeartbeatJs` constructor. * * @param {Object} opts * { * url websocket链接地址 * pingTimeout 未收到消息多少秒之后发送ping请求,默认15000毫秒 pongTimeout 发送ping之后,未收到消息超时时间,默认10000毫秒 reconnectTimeout onreconnect之后2秒, 进行init pingMsg * } * @api public */ function WebsocketHeartbeatJs({ url, pingTimeout = 15000, pongTimeout = 20000, reconnectTimeout = 2000, pingMsg = 'ping', }){ this.opts = { url: url, pingTimeout: pingTimeout, pongTimeout: pongTimeout, reconnectTimeout: reconnectTimeout, pingMsg: pingMsg, }; this.ws = null; // websocket实例 // override hook function this.onclose = () => {}; this.onerror = () => {}; this.onopen = () => {}; this.onmessage = () => {}; this.onreconnect = () => {}; this.createWebSocket(); } WebsocketHeartbeatJs.prototype.createWebSocket = function(){ try { this.ws = new WebSocket(this.opts.url); this.initEventHandle(); } catch (e) { // this.reconnect(); // 暂时注释掉重连, 配合后端 throw e; } }; WebsocketHeartbeatJs.prototype.initEventHandle = function() { this.ws.onclose = () => { this.onclose(); // this.reconnect(); // 暂时注释掉重连, 配合后端 }; this.ws.onerror = () => { this.onerror(); // this.reconnect(); // 暂时注释掉重连, 配合后端 }; this.ws.onopen = () => { this.onopen(); //心跳检测重置 this.heartCheck(); }; this.ws.onmessage = (event) => { this.onmessage(event); //如果获取到消息,心跳检测重置 //拿到任何消息都说明当前连接是正常的 this.heartCheck(); }; }; WebsocketHeartbeatJs.prototype.reconnect = function(){ if(this.lockReconnect || this.forbidReconnect) return; this.lockReconnect = true; this.onreconnect(); //没连接上会一直重连,设置延迟避免请求过多 setTimeout(() => { this.createWebSocket(); this.lockReconnect = false; }, this.opts.reconnectTimeout); }; WebsocketHeartbeatJs.prototype.send = function(msg){ this.ws.send(msg); }; //心跳检测 WebsocketHeartbeatJs.prototype.heartCheck = function(){ this.heartReset(); this.heartStart(); }; WebsocketHeartbeatJs.prototype.heartStart = function(){ if(this.forbidReconnect) return;//不再重连就不再执行心跳 this.pingTimeoutId = setTimeout(() => { //这里发送一个心跳,后端收到后,返回一个心跳消息, //onmessage拿到返回的心跳就说明连接正常 this.ws.send(this.opts.pingMsg); // // 后端未加重连,因此注释掉该段。 /* start 如果超过一定时间还没重置,说明后端主动断开了 */ // this.pongTimeoutId = setTimeout(() => { // //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次 // this.ws.close(); // }, this.opts.pongTimeout); /* end 如果超过一定时间还没重置,说明后端主动断开了 */ }, this.opts.pingTimeout); }; WebsocketHeartbeatJs.prototype.heartReset = function(){ clearTimeout(this.pingTimeoutId); clearTimeout(this.pongTimeoutId); }; WebsocketHeartbeatJs.prototype.close = function(){ //如果手动关闭连接,不再重连 this.forbidReconnect = true; this.heartReset(); this.ws.close(); }; if(window) window.WebsocketHeartbeatJs = WebsocketHeartbeatJs; export default WebsocketHeartbeatJs;
使用的文件:
import HeartPongWebSocketF from './knowledgeDialog/HeartPongWebSocketF'; // websocket 心跳包 const WEB_URL = 'xxxxxx'; this.ws = new HeartPongWebSocketF({ url: WEB_URL });
-
java websocket心跳包_web socket 心跳包的实现方案
2021-02-13 01:29:17web socket 心跳包的实现方案05/30/2010现在网络环境错综复杂...我的心跳包方案很是简单,原理就是间隔发送心跳包数据给服务器,服务器在一定时间内发回心跳包响应,对比超时限定,如果超过设定的超时时间,则认为当...web socket 心跳包的实现方案05/30/2010
现在网络环境错综复杂,socket心跳包是获得健康强壮的连接的有效解决方案,今天,我们就在web socket中实现心跳包方案,是的,尽管我们只是做一个简单的聊天室,但我们让他稳定可靠一些一点也没有错。
我的心跳包方案很是简单,原理就是间隔发送心跳包数据给服务器,服务器在一定时间内发回心跳包响应,对比超时限定,如果超过设定的超时时间,则认为当前与服务器的websocket连接已经断开,关闭当前web socket连接,善后处理,例如重新连接,或者弹出提示……
比较有用的核心代码是这样子的:
function keepalive( ws ){
var time = new Date();
if( last_health != -1 && ( time.getTime() - last_health > health_timeout ) ){
//此时即可以认为连接断开,可设置重连或者关闭连接
$("#keeplive_box").html( "服务器没有响应." ).css({"color":"red"});
//ws.close();
}
else{
$("#keeplive_box").html( "连接正常" ).css({"color":"green"});
if( ws.bufferedAmount == 0 ){
ws.send( '~H#C~' );
}
}
}
这就是心跳函数,发送心跳包和检测心跳健康度。我们将其植入到websocket的onopen事件中,来开启心跳检测。像这样:
var ws = new WebSocket( to_url );
ws.onopen=function(){
$("#statustxt").html("connected.");
$("#send_btn").attr("disabled", false);
heartbeat_timer = setInterval( function(){keepalive(ws)}, 1000 );
}
是的,这样子就可以实现web socket的心跳包,这里有些类似于多线程的发送方式,在发送心跳包的同时,并不影响正常的数据通信,我们的例子还是以上次的websocket聊天室来改进,我们可以发现,心跳包运行过程中,并不会干扰到我们的正常聊天。服务端我也进行了一些修改,原理类似,在超过一定时间内都没有收到客户端发来的心跳包,则认为该客户端已经掉线,关闭连接,收回资源。
现在,有一个新的问题出现,如果我们要用php socket来模拟心跳包技术,该怎么实现?各位路过的朋友请多指教,感恩戴德。
-
WebSocket的心跳重连机制
2019-10-20 10:05:37WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的...1.为什么叫心跳包呢 它就像...WebSocket心跳及重连机制
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳,说明还活着,没有心跳说明已经挂掉了。
1.为什么叫心跳包呢
它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。
2.心跳机制
心跳机制是每隔一段时间会向服务器发送一个数据包,告诉服务器自己还活着,同时客户端会确认服务器端是否还活着,如果还活着的话,就会回传一个数据包给客户端来确定服务器端也还活着,否则的话,有可能是网络断开连接了。需要重连~
3.如何实现心跳机制
Websocket的前后端交互
首先实现并且理解这篇文章之后,那就很简单了,我们只需要将js部分稍微重写一下$(function () { createWebSocket(); }); //避免重复连接 var lockReconnect = false; var wsUrl = "ws://localhost:8888/websocket/name"; var websocket = null; var tt = null; function createWebSocket() { try { websocket = new WebSocket(wsUrl); init(); } catch(e) { console.log('catch'); reconnect(wsUrl); } } function init() { //连接发生错误的回调方法 websocket.onerror = function(){ console.log("socket连接失败"); //重连 reconnect(wsUrl); }; //连接成功建立的回调方法 websocket.onopen = function(event){ console.log("socket连接已打开"); //心跳检测重置 heartCheck.start(); }; //接收到消息的回调方法 websocket.onmessage = function(event){ console.log("后台接收到前台传送的值,还有心跳..."); //心跳检测重置 heartCheck.start(); setMessageInnerHTML(event.data); }; //连接关闭的回调方法 websocket.onclose = function(){ console.log("socket连接已关闭"); //重连 reconnect(wsUrl); }; //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function(){ websocket.close(); }; } //重连函数 function reconnect(url) { if(lockReconnect) { return; }; lockReconnect = true; //没连接上会一直重连,设置延迟避免请求过多 tt && clearTimeout(tt); tt = setTimeout(function () { createWebSocket(url); lockReconnect = false; }, 20000); } //心跳检测 var heartCheck = { //每隔几秒测试一下心跳是否在继续 timeout: 10000, timeoutObj: null, serverTimeoutObj: null, start: function(){ console.log('开始测试心跳'); var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //这里发送一个心跳,后端收到后,返回一个心跳消息, console.log('发送消息,测试后台是否运行中...'); //任意发一个消息过去,后台接收,在init()中的onmessage收到消息,说明后台没有挂掉,有心跳 websocket.send("666"); self.serverTimeoutObj = setTimeout(function() { console.log("后台挂掉,没有心跳了...."); console.log("打印websocket的地址:"+websocket); websocket.close(); // createWebSocket(); }, self.timeout); }, this.timeout) } }; //关闭连接 function closeWebSocket(){ websocket.close(); } //发送消息 function send(){ var message = document.getElementById('text').value; websocket.send(message); }
4.实现的效果
当我们实现心跳重连之后,不管是我们断网还是程序停止之后,前端都会每隔一段时间向后端发起请求,只要程序重新打开或者重新联网,项目都会重新开始运行!项目学习:理解WebSocket心跳及重连机制
-
websocket 心跳包_在Swoole源码中查询 Websocket 的连接问题
2020-12-04 16:00:21问题我们项目的 Websocket Server 使用的 Swoole,最近在搭建 beta 环境的时候发现 Websocket 协议虽然升级成功了,但是会出现定时重连,心跳、数据也一直没有发送。项目的生产环境和 beta 一致,但是生产环境确没有... -
uni-app使用websocket(心跳机制)
2021-01-06 12:57:32uni-app使用websocket(心跳机制) 在使用websocket的过程中,有时候会遇到网络断开的情况,...1. 为什么叫心跳包呢? 它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。 2. 什么是心跳机制? 心跳机制 -
websocket心跳链接代码_理解WebSocket心跳及重连机制
2020-12-22 01:33:19在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端...1. 为什么叫心跳包呢?它就像心跳一样每隔固定的时间发一次,来告... -
c# websocket 心跳重连_理解WebSocket心跳及重连机制(五)
2020-12-21 23:56:24理解WebSocket心跳及重连机制在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余...1. 为什么叫心跳包呢?它就... -
WebSocket心跳机制
2019-11-26 10:14:32理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接...1. 为什么叫心跳包呢... -
C++使用easywsclient发送websocket包
2020-07-08 17:28:53使用easywsclient发送websocket包easywsclient源码头文件 easywsclient.hpp源文件 easywsclient.cpp发送消息接收消息建立连接,持续发送心跳包 easywsclient源码 头文件 easywsclient.hpp #ifndef EASYWSCLIENT_HPP_... -
webSocket怎么在监听数据库更新的同时,监听客户端发送的心跳包(心跳重连机制)?
2019-02-28 16:43:54如题,我已经在@OnMessage onMessage监听数据库的变化然后发送数据给前端,现在如何监听客户端发送的心跳包?怎么配置,在哪配置?  -
JS WebSocket类 - 包含[ 断线重连, 心跳检测, 粘包抑制 ]
2019-08-25 10:12:27本方法是自己写的一个JS封装类,用于客户的机于服务器端的通讯,后端我用python完成的代码后期放出来,之前遇到过一个坑爹的问题就是客户端的粘包问题,... * WebSocket类 - 包含[ 断线重连, 心跳检测, 粘包抑制 ]... -
除websocket外前端还需要知道心跳包
2020-11-04 11:24:31心跳包就是在客户端和服务器间定时通知对方自己状态的一个自己定义的命令字,按照一定的时间间隔发送,类似于心跳,所以叫做心跳包。 用来判断对方(设备,进程或其它网元)是否正常运行,采用定时发送简单的通讯... -
java ftp 心跳_理解WebSocket心跳及重连机制
2021-02-27 20:18:12在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端...1. 为什么叫心跳包呢?它就像心跳一样每隔固定的时间发一次,来告... -
websocket心跳链接代码_WebSocket原理与实践(五)--心跳及重连机制
2020-12-22 01:32:35在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端...1. 为什么叫心跳包呢?它就像心跳一样每隔固定的时间发一次,来告... -
在微信小程序中全局使用websocket连接,同时自定义心跳包
2019-07-04 14:26:52同时发现如果不自定义心跳包,全局的调用生命周期只有onLanch和onShow ,由于onLanch只能在小程序注册时全局调用一次,而onShow只有在小程序进入后台再重新进入前台才能再次执行,故在websocket因网络或其它问题中断... -
理解WebSocket心跳及重连机制
2020-11-18 18:47:34在使用websocket的过程中,有时候会遇到...1. 为什么叫心跳包呢? 它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。 2. 心跳机制是? 心跳机制是每隔一段时间会向服务器发送一个数据包,告诉服务器自己 -
微信小程序向服务器发送心跳包
2020-02-20 20:40:22假设小程序和服务器端已经连接,监听代码也已经编写完毕 小程序端 在你的小程序一定有监听部分代码 我们在正常连接的情况下加入心跳,正常连接...加入心跳,每秒发送一次ping wx.onSocketOpen(() => { console... -
Netty下的WebSocket心跳检测
2019-08-14 09:46:50心跳机制是定时发送一个自定义的结构体(心跳包),让对方知道自己还活着,以确保连接的有效性的机制。 在WebSocket中即判断套接字是否已经与服务器断开,无法使用,此时要清理服务器的该套接字进程以免浪费资源。 ... -
WebSocket心跳检测与重连
2021-02-19 11:36:05无断开平滑重连,每次...根据心跳时间发送心跳包到server端,并成功返回,3.接收到server端心跳返回证明连接正常,如果指定时间内(文章中定义为2秒,可以自定义)没有收到心跳返回,则说明连接异常,这时就断开重连。 -
理解WebSocket心跳及中断重连机制
2018-12-07 10:06:20在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端...1. 为什么叫心跳包呢? 它就像心跳一样每隔固定的时间发一次,... -
理解WebSocket心跳及重连机制(五)
2018-11-02 15:46:24在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送...1. 为什么叫心跳包呢? 它就像心跳一样每隔固定的时间发一次... -
理解WebSocket心跳及重连机制以及加强版的reconnectingwebsocket.js实现
2020-05-24 14:31:07理解WebSocket心跳及重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,...1. 为什么叫心跳包呢? 它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。 2. 心跳机制是? 心跳机制是每隔.. -
websocket 如何知道对方断开_websocket断线重连实践解决方案_蓝戒的博客
2020-12-18 17:56:03最近做的在线竞答的项目需要使用websocket保持实时通讯,...网上资料提到解决方案两种,一种是修改nginx配置信息,第二种是websocket发送心跳包。下面就来总结一下本次项目中实践中解决的websocket的断线 和 重连 ... -
jmeter连接websocket最新版本依赖包2020.zip
2020-02-14 13:39:45资源本人已整合,只需要下载解压至jmeter安装目录lib/ext即可,包含功能 WebSocket Open Connection 建立连接 WebSocket Single Read Sampler 读取返回...WebSocket Ping/Pong 发送心跳包 WebSocket Close 关闭连接 -
webSocket心跳检测_cocoscreator篇
2018-08-02 10:40:00断线重连(我们测试的环境是断开网络连接),断开网络后,心跳包无法发送出去,所以如果当前时间距离上次成功心跳的时间超过20秒,说明连接已经出现问题了,此时需要关闭连接。 第一次关闭连接时web... -
理解WebSocket心跳重连机制以及移动端锁屏或退到后台运行时重连机制
2018-12-19 15:04:52一 WebSocket 心跳重连机制 在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接,...1. 为什么叫心跳包...