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>
标签：function,WebSocket,前端,ws,webSocket,data,连接 From： https://www.cnblogs.com/muxiyeyu/p/17828697.html