//避免重复链接
var lockReconnect = false;
//路径
var wsUrl = $("#wsUrl").val();
console.log("路径" + wsUrl);
//webSocket对象
var ws;
//时间间隔
var tt;if ("WebSocket" in window) {
console.log("支持WebSocket")
} else {
alert("该浏览器不支持WebSocket")
}//创建ws连接
var createWebSocket = function (wsUrl) {
try {
//成功
ws = new WebSocket(wsUrl);
webSocketInit();//初始化webSocket连接函数
} catch (e) {
//失败
console.log('catch');
//重连
//重连函数
webSocketReconnect(wsUrl);
}
};
//初始化方法,成功后执行
var webSocketInit = function () {
//连接关闭函数
ws.onclose = function () {
console.log("连接已关闭...");
webSocketReconnect(wsUrl)//如果连接关闭则重连
};
//连接错误函数
ws.onerror = function () {
console.log("连接错误...");
webSocketReconnect(wsUrl)//如果连接错误则重连
};
//连接建立,发送信息
ws.onopen = function () {
var message1 = {
"type": "SUB",
"service": "业务1-确认第一次发送信息"
};
ws.send(JSON.stringify(message1));//webSocket业务订阅——可以有多个业务 //发送给后端的标志,对应可以接受什么的数据
// var message2 = {
// "type": "SUB",
// "service": "业务2"
// };
// ws.send(JSON.stringify(message2));
//心跳检测启动
heartCheck.start();//订阅业务发送之后启动心跳检测机制
};
//业务订阅成功后接受服务端推送消息 ,其实是个字符串
ws.onmessage = function (evt) {
console.log('接收到消息' + evt.data);
$("#span").html(evt.data); //一般这儿就可以写自己的业务逻辑
// var DATA=JSON.parse(evt.data);
// if (DATA.service=="业务1") {
// console.log("接收业务1的数据");
// //接收业务1的数据,并进行相关逻辑处理
// }
// if (DATA.service=="业务2"){
// console.log("接收业务1的数据");
// //接收业务2的数据,并进行相关逻辑处理
// }
//接收一次后台推送的消息,即进行一次心跳检测重置 heartCheck.reset();
};};
var webSocketReconnect = function (url) {
console.log("socket 连接断开,正在尝试重新建立连接");
if (lockReconnect) {
return;
}
lockReconnect = true;
//没连接上会一直重连,设置延迟,避免请求过多 //
//s中清楚setTimeout的定时触发设置,之所以加个timer,是为了方便第二次赋值给timer。
// 也就是说直接clearTImeout(timer)则timer就不存在了 再次访问就是error了。
// 而timer&&clearTimeout(timer)则将timer 变成undefined
tt && clearTimeout(tt);
tt = setTimeout(function () {
createWebSocket(url);
}, 4000)
}; //心跳检测 .所谓的心跳检测,就是隔一段时间向服务器仅限一次数据访问,因为长时间不使用会导致ws自动断开,
// 一般是间隔90秒内无操作会自动断开,因此,在间隔时间内进行一次数据访问,以防止ws断开即可,
//这里选择30秒,倒计时30秒内无操作则进行一次访问,有操作则重置计时器
//
//封装为键值对的形式,成为js对象,与json很相似
var heartCheck={
timeout: 30000,//30秒
timeoutObj: null,
reset: function(){//接收成功一次推送,就将心跳检测的倒计时重置为30秒
clearTimeout(this.timeoutObj);//重置倒计时
this.start();
},
start: function(){//启动心跳检测机制,设置倒计时30秒一次
this.timeoutObj = setTimeout(function(){
var message = {
"type": "t10010",
"service":"运行心跳业务一次 =="+ new Date()
};
// JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
//而JSON.parse()可以将JSON字符串转为一个对象。
console.log("心跳一次");
ws.send(JSON.stringify(message));//启动心跳
},this.timeout)
}
//onopen连接上,就开始start及时,如果在定时时间范围内,onmessage获取到了服务端消息,
// 就重置reset倒计时,距离上次从后端获取消息30秒后,执行心跳检测,看是不是断了。
};//开始创建webSocket连接
createWebSocket(wsUrl);
///
function mysend() {
var text = $("#text").val();
console.log("text:" + text);
//向ws发送信息
ws.send(text);}
javascript怎么用socket
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:基于网络的聚类算法 STING
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
spark 如何消除笛卡尔积
大家都知道求任意两个集合的笛卡尔积一般是如下这种方式#include <stdio.h> #define m 3 #define n 2 int main() { int i,j; char a[m],b[n]; for (i=0;i<m;i++) scanf("%c",&a[i]); getchar();//吃掉\n
spark 如何消除笛卡尔积 c/c++ python #include #define -
postgresql 模糊匹配两列
1 查询语句查看账户下的所有表select * from tab; 查看账户下的所有表的详细信息select * from user_tables; 1.1 selectselect 用于从数据看查询数据。语法: select field1,filed2,.. . from tablename [where condition]; 利用 Oracle 数据库 Scott 账户
postgresql 模糊匹配两列 oracle 模糊查询 oracle去重 oracle无效的关系运算符 字段