102 lines
3.0 KiB
JavaScript
102 lines
3.0 KiB
JavaScript
var ws;
|
|
var websocketUrl = getWsUrl();
|
|
const HEART_BEAT_INTERVAL = 1000;
|
|
const reconnectTime = 5000;
|
|
var lockReconnect = false;
|
|
var heartBeatInterval;
|
|
|
|
function createWs() {
|
|
ws = new WebSocket(websocketUrl);
|
|
ws.addEventListener('open', (event) => {
|
|
console.log('WebSocket is open now.');
|
|
startHeartBeat();
|
|
addMsg("websocket连接成功，当前时间" + new Date().Format("yyyy-MM-dd hh:mm:ss"));
|
|
});
|
|
|
|
ws.addEventListener('message', (event) => {
|
|
console.log('Message from server: ', event.data);
|
|
if (event.data != 'HEARTBEAT') addMsg(event.data);
|
|
});
|
|
|
|
ws.addEventListener('error', (error) => {
|
|
console.error('WebSocket encountered error: ', error);
|
|
let msg = "websocket发生错误,连接状态码:" + ws.readyState;
|
|
addMsg(msg);
|
|
reconnect();
|
|
});
|
|
|
|
ws.addEventListener('close', (event) => {
|
|
console.log('WebSocket is closed now.');
|
|
addMsg('websocket连接关闭');
|
|
if (heartBeatInterval) clearInterval(heartBeatInterval);
|
|
reconnect();
|
|
});
|
|
}
|
|
|
|
function getWsUrl() {
|
|
let host = location.host;
|
|
let protocol = 'ws';
|
|
let port = location.port;
|
|
return protocol + '://' + host;
|
|
}
|
|
|
|
function reconnect() {
|
|
if (!lockReconnect) {
|
|
lockReconnect = true;
|
|
setTimeout(function () {
|
|
addMsg("正在重连，当前时间" + new Date().Format("yyyy-MM-dd hh:mm:ss"));
|
|
createWs();
|
|
lockReconnect = false;
|
|
}, reconnectTime);
|
|
}
|
|
}
|
|
|
|
function addMsg(msg){
|
|
let f = $('#filter').val();
|
|
if (f.length > 0 && msg.indexOf(f) <= 0) {
|
|
return;
|
|
}
|
|
if(msg && !msg.endsWith('<br>')) {
|
|
msg += '<br>';
|
|
}
|
|
$("#msg").append(msg);
|
|
$("#log").scrollTop($("#log").prop("scrollHeight"));
|
|
}
|
|
|
|
function startHeartBeat() {
|
|
if (ws.readyState === 1) {
|
|
ws.send('HEARTBEAT');
|
|
// console.log('send HEARTBEAT');
|
|
}
|
|
heartBeatInterval = setInterval(() => {
|
|
if (ws.readyState === 1) {
|
|
ws.send('HEARTBEAT');
|
|
// console.log('send HEARTBEAT');
|
|
}
|
|
}, HEART_BEAT_INTERVAL);
|
|
}
|
|
|
|
Date.prototype.Format = function (fmt) {
|
|
var o = {
|
|
"M+": this.getMonth() + 1, // 月份
|
|
"d+": this.getDate(), // 日
|
|
"h+": this.getHours(), // 小时
|
|
"m+": this.getMinutes(), // 分
|
|
"s+": this.getSeconds(), // 秒
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
|
|
"S": this.getMilliseconds() // 毫秒
|
|
};
|
|
if (/(y+)/.test(fmt))
|
|
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
for (var k in o)
|
|
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
return fmt;
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$('#clearLog').click(function () {
|
|
$("#msg").html('');
|
|
});
|
|
addMsg('websocket初始化中,当前ws服务地址=> ' + websocketUrl);
|
|
createWs();
|
|
}); |