网站首页

js websocket

中文Lee 2023/05/11 1986人围观
前端   SOCKET  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://www.lizhongwen.com/static/web/js/jquery-2.1.1.min.js"></script>
</head>
<body>
<input type="hidden" id="wsUrl" value="ws://192.168.1.124:10129/ws">
<input type="text" id="text">
<br>
<input type="button" value="发送" onclick="mysend()">
<hr>
<span id="span"></span>
</body>
<script>
//避免重复链接
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);
}
</script>
</html>

相关推荐

  • [LuPHP] PHPMVC精简框架第一讲(基本MVC框架配置)

    LuPHP是一个精简版的PHPMVC框架,该框架经历了N个高可用系统的测验(数据存储量千万级别,并发1000),该框架结合了市面上流行的PHP框架,去除了臃肿的代码;本框架遵循即用即写的原则,做到项目中绝不存在多余(实际根本用不上)代码!该框架作者历经10年以上项目研发经验,总结并写出一套适合自己的...

  • php7下安装event扩展

    一·、安装支持库libevent,需要编译高版本(这里以最新版本release-2.1.8-stable为例)1. wget -c https://github.com/libevent/libevent/releases/download/release-2.1.8-stable/libevent...

  • Scheduled 定时任务

    Scheduled 定时任务1 cron表达式指定定时器执行时间// 固定每天1点执行,无论上一次执行完没有,到时间会再执行。@Scheduled(cron = "0 0 1/1 * ?")//每一个小时执行一次@Scheduled(cron = "0 0 * * * ?") //每天上午...

  • centos7通过yum安装JDK1.8

    安装之前先检查一下系统有没有自带open-jdk命令:rpm -qa |grep javarpm -qa |grep jdkrpm -qa |grep gcj如果没有输入信息表示没有安装。如果安装可以使用rpm -qa | grep java |&n...

  • centos7/linux 服务器 添加新硬盘并挂载

    一、查看现有磁盘设备  fdisk -l  发现/dev/sdb 为新加的硬盘;二、开始分区  fdisk /dev/sdb  fdisk -l    #再次查看分区情况,已经有了/dev/sdb1三、创建文件系统,并格式化  mkfs.ext4 /dev/sdb1四、将新分区挂在到文件系统  mk...

  • mysqlbinlog 保存为sql文件。

    执行如下命令:mysqlbinlog -vv --base64-output=decode-rows binlog路径 --result-file=要保存的sql路径例如:/www/server/mysql/bin/mysqlbinlog -vv --base64-output=decode-row...

  • 如何安装php7的event扩展

    最近api系统遇到了高并发的瓶颈,想通过workerman重构。在看workerman文档时发现这么一句话:Event扩展不是必须的,当业务需要支撑上万并发连接时,推荐安装Event,能够支持巨大的并发连接。如果业务并发连接比较低,例如1000并发连接,则可以不用安装。如果无法安装Event扩展,可...

  • 编程语言排行榜2019年12月 TIOBE编程语言排行榜2019年最新版

     TIOBE已经公布了编程语言排行榜2019年12月的数据,编程语言12月的排名有了新的变化,Java比C的指数高了2%,与上个月的0.2%相比,前进很多,Python继续占领第三名,下面一起来看看2019年12月编程语言排行榜。  2019年12月编程语言排行榜看点:  首先,Java比上个月的指...