前言

最近又在忙着开发别的模块,其中包含了即时通讯这一块,上一次做即时通讯时还是去年年底,一时间代码都在自己的笔记本里,还没带……这里就记录一下前端对接WebSocket的实现,包含心跳重连,简记之。

实现

在确定前端使用的环境是支持H5的情况下,可以直接使用WebSocket,如果不确定,前端Html需引入sockjs,<script src="//cdn.jsdelivr.net/sockjs/1.0.0/sockjs.min.js"></script>,注意要在后端开放Sockjs的url的支持

$(function() {
var lockReconnect = false;//避免重复连接
var ws = null; //WebSocket的引用
var wsUrl = "xxxxxx"; //这个要与后端提供的相同
//创建WebSocket连接,如果不确定浏览器是否支持,可以使用socket.js做连接
function createWebSocket(url){
try {
if ('WebSocket' in window) {
ws = new WebSocket("ws://" + url + "/socketServer");
} else {
ws = new SockJS("http://" + url + "/sockjs/socketServer");
}
initEventHandle();
} catch (e) {
reconnect(wsUrl);
}
} function reconnect(url) {
if(lockReconnect) return;
lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
createWebSocket(wsUrl);
console.log("正在重连,当前时间"+new Date())
lockReconnect = false;
}, 5000); //这里设置重连间隔(ms)
} /*********************初始化开始**********************/
function initEventHandle() {
// 连接成功建立后响应
ws.onopen = function() {
console.log("成功连接到" + wsUrl);
//心跳检测重置
heartCheck.reset().start();
}
// 收到服务器消息后响应
ws.onmessage = function(e) {
//如果获取到消息,心跳检测重置
//拿到任何消息都说明当前连接是正常的
heartCheck.reset().start();
//Json转换成Object
var msg = eval('(' + e.data + ')'); if(msg.message == "heartBeat"){
//忽略心跳的信息,因为只要有消息进来,断线重连就会重置不会触发
}else{
//处理消息的业务逻辑
}
} // 连接关闭后响应
ws.onclose = function() {
console.log("关闭连接");
reconnect(wsUrl);//重连
}
ws.onerror = function () {
reconnect(wsUrl);//重连
};
}
/***************初始化结束***********************/
//心跳检测
var heartCheck = {
timeout: 15000,//毫秒
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");
console.log("HeartBeat");
self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
ws.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
}, self.timeout)
}, this.timeout)
}
} // 发送字符串消息 $("#sendBtn").click(function() {
if (ws.readyState ==1) {
//自定义消息串,让后端接收
ws.send("xxxxxx");
}else{
alert("当前连接超时,请刷新重试!");
}
return false;
}); // 强制退出
window.onunload = function() {
ws.close();
}
createWebSocket(wsUrl);/**启动连接**/
});

结束

这些代码是我半年前写的做的整理,断线重连记得是@子慕大诗人博客中学到的

这里仅做记录,如有雷同不胜荣幸

【简记】前端对接WebSocket与心跳重连的更多相关文章

  1. 161114、websocket实现心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  2. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  3. 初探和实现websocket心跳重连(npm: websocket-heartbeat-js)

    提示:文章最下方有仓库地址 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒.因此为了保证连接的可持续性和稳定性,websocket ...

  4. websocket心跳重连 websocket-heartbeat-js

    初探和实现websocket心跳重连(npm: websocket-heartbeat-js) 心跳重连缘由 websocket是前后端交互的长连接,前后端也都可能因为一些情况导致连接失效并且相互之间 ...

  5. websocket 心跳重连

    websocket 的基本使用: var ws = new WebSocket(url); ws.onclose = function () { //something reconnect(); // ...

  6. webSocket使用心跳包实现断线重连

    首先new一个webscoket的连接 let noticeSocketLink = new WebSocket(‘webSocket的地址’) 这里是连接成功之后的操作 linkNoticeWebs ...

  7. websocket实现心跳连接

    在使用websocket的时候,遇到了一个websocket在连接一段时间就异常断开连接了.第一想法就是重新去连接websocket(websock.onopen),后来发现这种方式是错误的,查阅文档 ...

  8. 给websocket加入心跳包防止自动断开连接

    var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当 ...

  9. 前端解析websocket数据问题

    buf []byte //err = websocket.Message.Send(ws, buf) err = websocket.Message.Send(ws, string(buf[:])) ...

随机推荐

  1. PTA计算平均值(一波三折)

    PTA计算平均值( 一波三折) 现在为若干组整数分别计算平均值. 已知这些整数的绝对值都小于100,每组整数的数量不少于1个,不大于20个. 输入格式:首先输入K(不小于2,不大于20).接下来每一行 ...

  2. 在win7 64位操作系统下 arduino驱动安装问题的解决

    主要参考以下两个博客: 操作教程:http://blog.csdn.net/u013926582/article/details/24442583 文件下载:http://www.arduino.cn ...

  3. vue 如何使用scss (转载)

    创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init w ...

  4. 预则立&&他山之石--团队计划、访谈优秀前辈

    团队计划&访谈内容 一.团队计划 序号 任务内容 计划完成时间 主要负责人 备注 1 对接教师报课系统 决定是否重构代码 2016.10.16 陈少铭.黄家俊 阅读CourseManageme ...

  5. Beta阶段——第四篇 Scrum 冲刺博客

    i. 提供当天站立式会议照片一张: ii. 每个人的工作 (有work item 的ID) (1) 昨天已完成的工作: 充值与账单的数据库操作结合,实现余额功能 (2) 今天计划完成的工作: 用户权限 ...

  6. [转帖]剖析淘宝TDDL(TAOBAO DISTRIBUTE DATA LAYER)

    剖析淘宝TDDL(TAOBAO DISTRIBUTE DATA LAYER) 博客分类: 原博客地址: http://qq85609655.iteye.com/blog/2035176 distrib ...

  7. 2013成都网赛1010 hdu 4737 A Bit Fun

    题意:定义f(i, j) = ai|ai+1|ai+2| ... | aj (| 指或运算),求有多少对f(i,j)<m.1 <= n <= 100000, 1 <= m &l ...

  8. Spring Boot 推荐的 Java 配置

    在学 Spring 的过程中 , 配置文件慢慢的被注解所替代 , 现在 Spring Boot 更是推荐使用 Java 配置完全来代替配置文件 . 需要使用到的注解有 : Bean 相关 : @Con ...

  9. contextmap相当于session之类的 用于设置属性 投放到页面上 contextmap的数据存储在map中

    contextmap相当于session之类的 用于设置属性 投放到页面上

  10. BZOJ3173 TJOI2013最长上升子序列(splay)

    容易发现如果求出最后的序列,只要算一下LIS就好了.序列用平衡树随便搞一下,这里种一棵splay. #include<iostream> #include<cstdio> #i ...