网站首页

js websocket

中文Lee 2023/05/11 共4772人围观

前端 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>

网站首页

js websocket

相关推荐