You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.7 KiB
HTML
129 lines
3.7 KiB
HTML
5 months ago
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>WebSocket连通测试</title>
|
||
|
|
<link rel="icon" href="/static/favicon.ico" type="image/x-icon" />
|
||
|
|
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<input id="message" type="text">
|
||
|
|
<button id="btn">发送消息</button>
|
||
|
|
<div id="show">
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
// var ws = new WebSocket("ws://localhost:9998/ldapi/v1/websocket/ccuwebsocket");
|
||
|
|
/*
|
||
|
|
ws.onerror = function(e) {
|
||
|
|
console.log('已关闭');
|
||
|
|
};
|
||
|
|
ws.onopen = function(e) {
|
||
|
|
console.log('握手成功');
|
||
|
|
ws.send('123456789');
|
||
|
|
}
|
||
|
|
ws.onclose = function() {
|
||
|
|
console.log('已关闭');
|
||
|
|
}
|
||
|
|
ws.onmessage = function(e) {
|
||
|
|
console.log('收到消息');
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
var lockReconnect = false;//避免重复连接
|
||
|
|
var wsUrl = "ws://localhost:9998/vhwcapi/v1/websocket/ccuwebsocket";
|
||
|
|
var ws;
|
||
|
|
var tt;
|
||
|
|
function createWebSocket() {
|
||
|
|
try {
|
||
|
|
ws = new WebSocket(wsUrl);
|
||
|
|
init();
|
||
|
|
} catch(e) {
|
||
|
|
console.log('catch');
|
||
|
|
reconnect(wsUrl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function init() {
|
||
|
|
ws.onclose = function () {
|
||
|
|
console.log('链接关闭');
|
||
|
|
reconnect(wsUrl);
|
||
|
|
};
|
||
|
|
ws.onerror = function() {
|
||
|
|
console.log('发生异常了');
|
||
|
|
reconnect(wsUrl);
|
||
|
|
};
|
||
|
|
ws.onopen = function () {
|
||
|
|
//心跳检测重置
|
||
|
|
console.log('onopen 心跳检测重置');
|
||
|
|
heartCheck.start();
|
||
|
|
};
|
||
|
|
ws.onmessage = function (event) {
|
||
|
|
//拿到任何消息都说明当前连接是正常的
|
||
|
|
let node = document.createElement("div");
|
||
|
|
node.innerHTML = "<h5>" + event.data + "</h5>";
|
||
|
|
show.appendChild(node);
|
||
|
|
console.log('onmessage 接收到消息');
|
||
|
|
heartCheck.start();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function reconnect(url) {
|
||
|
|
if(lockReconnect) {
|
||
|
|
return;
|
||
|
|
};
|
||
|
|
lockReconnect = true;
|
||
|
|
//没连接上会一直重连，设置延迟避免请求过多
|
||
|
|
tt && clearTimeout(tt);
|
||
|
|
tt = setTimeout(function () {
|
||
|
|
createWebSocket(url);
|
||
|
|
lockReconnect = false;
|
||
|
|
}, 4000);
|
||
|
|
}
|
||
|
|
//心跳检测
|
||
|
|
var heartCheck = {
|
||
|
|
timeout: 180000,
|
||
|
|
timeoutObj: null,
|
||
|
|
serverTimeoutObj: null,
|
||
|
|
start: function(){
|
||
|
|
console.log('start');
|
||
|
|
var self = this;
|
||
|
|
this.timeoutObj && clearTimeout(this.timeoutObj);
|
||
|
|
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
||
|
|
this.timeoutObj = setTimeout(function(){
|
||
|
|
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||
|
|
console.log('55555');
|
||
|
|
ws.send("123456789");
|
||
|
|
self.serverTimeoutObj = setTimeout(function() {
|
||
|
|
console.log(111);
|
||
|
|
console.log(ws);
|
||
|
|
ws.close();
|
||
|
|
// createWebSocket();
|
||
|
|
}, self.timeout);
|
||
|
|
|
||
|
|
}, this.timeout)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
createWebSocket(wsUrl);
|
||
|
|
|
||
|
|
|
||
|
|
let btn = document.getElementById("btn");
|
||
|
|
let message = document.getElementById("message");
|
||
|
|
let show = document.getElementById("show");
|
||
|
|
btn.addEventListener("click", function () {
|
||
|
|
let data = message.value;
|
||
|
|
console.log(data);
|
||
|
|
if (data) {
|
||
|
|
ws.send(data);
|
||
|
|
} else {
|
||
|
|
alert("请输入消息后发送");
|
||
|
|
}
|
||
|
|
message.value = "";
|
||
|
|
});
|
||
|
|
// 关闭页面时候关闭ws
|
||
|
|
window.addEventListener("beforeunload", function(event) {
|
||
|
|
ws.close();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|