教你如何快速解决后台服务重启后,前端webSocketz中断的问题
2020-08-10 19:31
861 查看
后端服务器宕机或重启时,前端Vue 不断重连webSocket的解决办法:
问题重现:后台服务重启时,前端连接的webScoket就断了,需要刷新页面才能重新建立连接,这样用户体验的效果不好,而且有些业务场景,比如硬件监控系统大屏这些是不允许刷新页面的,所以需要前端发现webSocket断了,然后自己不断去发起连接。
解决思路:在webSocket的生命周期onclose和onerror时调用重连函数,增加心跳检测。
解决方案:
1.创建变量
[code]data() { return { // webSocket对象 webSocket: null, // webSocketUrl地址 webSocketUrl: null, //连接标识 避免重复连接 isConnect: false, //断线重连后,延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码 rec: null, // 心跳发送/返回的信息 checkMsg: {hhh: 'heartbeat'}, //每段时间发送一次心跳包 这里设置为20s timeout: 20000, //延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象) timeoutObj: null, } }
2.创建webSocket连接
[code]//创建webSocket连接 createWebSocket() { let that = this; that.webSocket = new WebSocket(that.webSocketUrl); that.initWebsocket(); }
3.初始化webSocket连接
[code]initWebsocket() { let that = this; //WebSocket连接建立之后会调用onopen方法 that.webSocket.onopen = that.websocketonopen; //当websocket收到服务器发送的信息之后 会调用onmessage方法 that.webSocket.onmessage = that.websocketonmessage; //当websocket因为各种原因(正常或者异常)关闭之后,会调用onclose方法 that.webSocket.onclose = that.websocketclose; //当websocket因为异常原因(比如服务器部署、断网等)关闭之后,会调用onerror方法 //在onerror中需要调用reConnect方法重连服务器 that.webSocket.onerror = that.websocketonerror; }
4.websocketonopen函数
[code]websocketonopen() { let that = this; console.log('open'); //连接建立后修改标识 that.isConnect = true; // 建立连接后开始心跳 // 因为nginx一般会设置例如60s没有传输数据就断开连接 所以要定时发送数据 that.timeoutObj = setTimeout(function() { if (that.isConnect) that.webSocket.send(that.checkMsg); }, that.timeout); } 5.websocketonerror函数 websocketonerror() { let that = this; console.log('error'); //连接断开后修改标识 that.isConnect = false; //连接错误 需要重连 that.reConnect(); } 6.websocketonmessage函数 websocketonmessage(e) { // 拿到数据,处理自己的业务 let that = this; console.log(e.data); //获取消息后 重置心跳 clearTimeout(that.timeoutObj); that.timeoutObj = setTimeout(function() { if (that.isConnect) that.webSocket.send(that.checkMsg); }, that.timeout); } 7.websocketclose函数 websocketclose() { let that = this; console.log('close'); //连接断开后修改标识 that.isConnect = false; //连接错误 需要重连 that.reConnect(); } 8.定义重连函数 reConnect() { let that = this; console.log('尝试重新连接'); //如果已经连上就不在重连了 if (that.isConnect) { return; } clearTimeout(that.rec); // 延迟5秒重连 避免过多次过频繁请求重连 that.rec = setTimeout(function() { that.createWebSocket(); }, 5000); }
最后
如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,推荐你加入一个前端qq学习交流裙:1142648440里面也整理了一些前端学习手册,前端面试题,前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。
相关文章推荐
- [置顶] 如何解决eclipse中修改后台代码ctrl+s时总是自动重启服务的问题
- 如何解决ubuntu重启后dns服务消失问题
- 快速解决打印机后台程序服务没有运行的问题
- 后台如何获取前端select下拉框的值问题解决方案
- 解决Apache HTTP Server在windows 7下安装,后台没有httpd服务的问题
- (转)解决IE6底下,后台Response.Redirect被迫中断的问题
- 如何解决Windows Server 2008 服务启动不能调用Office Word的问题
- 如何解决由于服务过多或异常导致ArcGIS Server 无法正常运行的问题
- 如何用工程手段解决前端开发和部署优化的综合问题
- web -- 前端访问后台跨区问题解决
- Java 后台解决与前端的跨域问题
- 如何快速解决欧拉计划第三题:素数问题
- 前端笔试题阿里篇之二--如何避免闭包,以及解决闭包问题
- 如何快速解决IT系统中的疑难故障问题
- ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方式
- 详解如何解决SSM框架前台传参数到后台乱码的问题
- Nginx服务器上软中断过高问题如何解决?
- 如何快速解决本地开发时 ajax 跨域拒绝问题
- 如何能快速找到你要解决问题的相关信息
- win7耳机和音箱没声音怎么解决如何快速找出问题所在