websocket断开重连解决方案，基于子慕大诗人博客修改健壮强化版

欢迎大家来到Altaba的博客 2017年11月27日

相信随着H5的演进，我们越来越多接触到websocket的使用，本身就使用此技术并不难，但是在开发中会遇到各种无法预测的原因，有浏览器兼容问题，有后台的意外断开，状态百出。

本人前端开发遇到这样的问题：websocket部分使用了nginx服务，默认配置是60s，就是60s，如果一直没有数据传输，连接会在过了这个时间之后自动关闭。

解决：nginx配置改为600s，前端在onclose 函数体加入判断然后重连

基于子慕大诗人博客阅读学习借鉴，不才在此做了一些优化，希望大家参阅

//2017年11月27日  修改websocket连接var ws;//websocket实例var lockReconnect = false;//避免重复连接var wsUrl = "ws://"+'xxxxxxx';function createWebSocket(url) {try { if ('WebSocket' in window) {ws = new WebSocket(url);} else if ('MozWebSocket' in window) {ws = new MozWebSocket(url);} else {url = "http://" + 'xxxxxxx';ws = new SockJS(url);}initEventHandle();} catch (e) {reconnect(url);}}function initEventHandle() {ws.onclose = function (evnt) {//console.log('websocket服务关闭了');reconnect(wsUrl);};ws.onerror = function (evnt) {//console.log('websocket服务出错了');reconnect(wsUrl);};ws.onopen = function (evnt) {//心跳检测重置heartCheck.reset().start();};ws.onmessage = function (evnt) {//如果获取到消息，心跳检测重置//拿到任何消息都说明当前连接是正常的//console.log('websocket服务获得数据了');//接受消息后的UI变化doWithMsg(evnt.data);heartCheck.reset().start();}//收到消息推送function doWithMsg(msg) {//......}}function reconnect(url) {if(lockReconnect) return;lockReconnect = true;//没连接上会一直重连，设置延迟避免请求过多setTimeout(function () {createWebSocket(url);lockReconnect = false;}, 2000);}//心跳检测var heartCheck = {timeout: 60000,//60秒timeoutObj: null,serverTimeoutObj: null,reset: function(){clearTimeout(this.timeoutObj);clearTimeout(this.serverTimeoutObj);return this;},start: function(){var self = this;this.timeoutObj = setTimeout(function(){//这里发送一个心跳，后端收到后，返回一个心跳消息，//onmessage拿到返回的心跳就说明连接正常ws.send("HeartBeat");self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了ws.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次}, self.timeout)}, this.timeout)}}//初始化websocketcreateWebSocket(wsUrl);

借鉴于子慕大诗人相关博客

https://www.cnblogs.com/1wen/p/5808276.html

websocket断开重连解决方案，基于子慕大诗人博客修改健壮强化版相关推荐

c# websocket 心跳重连_初探和实现websocket心跳重连(npm: websocket-heartbeat-js) - 子慕大诗人 - 博客园...
(event) { heartCheck.reset(); 如上代码,heartCheck 的 reset和start方法主要用来控制心跳的定时. 什么条件下执行心跳: 当onopen也就是连接成功后 ...
基于Spring Boot的个人博客系统的设计与实现毕业设计源码271611
目录摘要 1 绪论 1.1研究意义 1.2开发背景 1.3系统开发技术的特色 1.4论文结构与章节安排 2个人博客系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 ...
（Ⅰ）基于Hexo+GitHub Page搭建博客，绑定域名及备份
前言这里引用阮一峰老师网络日志里说的,对于喜欢写博客的人,会经历三个阶段: 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间, ...
基于Spring Boot技术栈博客系统企业级前后端实战之课程导论(零)
零.说明(必读) 一.课程概述 1.1 名称 1.2 功能 1.3 技术点 1.4 目标二.核心功能 2.1 用户管理 2.2 安全设置 2.3 博客管理 2.4 评论管理 2.5 点赞管理 2.6 ...
html5设计博客论文,基于HTML5的综合类博客设计与实现-计算机本科毕业论文
基于HTML5的综合类博客设计与实现-计算机本科毕业论文 (35页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 19.9 积分 HUNAN JtfSlVE ...
基于springboot + vue 的个人博客搭建过程（上线）
承接上文: 基于springboot + vue 的个人博客搭建过程(续) 目录 1. 搭建环境 1. 安装docker 2. 拉取并运行 2.1 拉取服务 2.2 部署运行mysql 2.3 部署运 ...
将socket设置为非阻塞(non-blocking) - 艾子的日志 - 网易博客
将socket设置为非阻塞(non-blocking) - 艾子的日志 - 网易博客将socket设置为非阻塞(non-blocking) 2011-02-17 22:36:51| 分类: 默认分 ...
基于hexo搭建个人免费博客——基本设置和了解
2017年最新基于hexo搭建个人免费博客--基本设置和了解前言前面的文章已经能让大家搭建起自己的博客,并通过网络访问了,通过基础的发布文章和编辑既可以实现博客的运作了,其他的一些包括分页和标签. ...
利用官方支持为基于GitHub Pages的Hexo博客启用HTTPS
HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.设计HTTP的初衷是为 ...
利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持
文章目录 ● 前言 ● 注册 Cloudflare ● 添加站点 ● 修改DNS ● 开启 HTTPS ● 重定向强制 HTTPS HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的 ...

websocket断开重连解决方案，基于子慕大诗人博客修改健壮强化版

websocket断开重连解决方案，基于子慕大诗人博客修改健壮强化版相关推荐

最新文章

热门文章

websocket断开重连解决方案，基于子慕大诗人博客修改 健壮强化版

websocket断开重连解决方案，基于子慕大诗人博客修改 健壮强化版相关推荐

最新文章

热门文章

websocket断开重连解决方案，基于子慕大诗人博客修改健壮强化版

websocket断开重连解决方案，基于子慕大诗人博客修改健壮强化版相关推荐