Web Sockets是H5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动转为了主动。
ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。if(window.WebSocket){ //进行检测，确保浏览器支持WebSocket var webSocket=new WebSocket("ws://localhost:8005/socket"); }
WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。
webSocket.onopen=function(event) { //开始通信时的处理 webSocket.send("Hello WebSocket!"); } webSocket.onmessage=function(event) { var data=event.data; } webSocket.onclose=function(event) { //结束通信时的处理 }
webSocket.close();
另外，还可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值：
- CONNECTING（数字值为0），表示正在连接。
- OPEN（数字值为1），表示已建立连接。
- CLOSING（数字值为2），表示正在关闭连接。
- CLOSED（数字值为2），表示已关闭连接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket</title>
</head>
<body>
<h1>DFC WS</h1>
<script>
let ws = null;
let timerId = null;
const heartbeatInterval = 30 * 60 * 1000; // 心跳检测时间间隔，单位为毫秒
let heartbeatTimer = null;
let status = false
function connect() {
ws = new WebSocket("ws://localhost:8005/socket");
ws.onopen = function (e) {
status = true
sketchup.onopen(e.data);
startHeartbeat();
};
ws.onmessage = function (e) {
const data = JSON.parse(e.data);
let type = data.type || '';
console.log(data);
switch (type) {
case 'init':
break;
case 'say':
break;
case 'ping':
console.log('ping');
ws.send('ping')
break;
default:
console.log(data);
}
};
ws.onclose = function (e) {
status = false
stopHeartbeat();
timerId = setTimeout(connect, 10 * 1000);
}
ws.onerror = function (e) {
}
}
// 发送心跳消息
function sendHeartbeat() {
console.log('send ping');
ws.send('ping');
}
// 开始心跳检测
function startHeartbeat() {
heartbeatTimer = setInterval(() => {
sendHeartbeat();
}, heartbeatInterval);
}
// 停止心跳检测
function stopHeartbeat() {
clearInterval(heartbeatTimer);
}
connect();
</script>
</body>
</html>
断开重连写法
/** * 初始化websocket连接 */ function initWebSocket() { let uId = 1; var websocket = null; if('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8009/webSocket"+uId ); } else { alert("该浏览器不支持websocket！"); } websocket.onopen = function(event) { console.log("建立连接"); websocket.send('Hello WebSockets!'); } websocket.onclose = function(event) { console.log('连接关闭') reconnect(); //尝试重连websocket } //建立通信后，监听到后端的数据传递 websocket.onmessage = function(event) { let data = JSON.parse(event.data); //业务处理.... if(data.step == 1){ alert(data.msg); } } websocket.onerror = function() { // notify.warn("websocket通信发生错误！"); // initWebSocket() } window.onbeforeunload = function() { websocket.close(); } // 重连 function reconnect() { console.log("正在重连"); // 进行重连 setTimeout(function () { initWebSocket(); }, 1000); }
