因新部门需求有一个后台管理需要一个右上角的实时的消息提醒功能，第一时间想到的就是使用WebSocket建立实时通信了，之前没整过，于是只能学习了。和原部门相比现在太忙了，快乐的日子一去不复返了。经典的加量不加薪啊！！！
WebSocket 是基于 TCP 的一种新的应用层网络协议。它提供了一个全双工的通道，允许服务器和客户端之间实时双向通信。因此，在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。
与 HTTP 协议相比，WebSocket 具有以下优点：
当然肯定有缺点的：
WebSocket在建立连接时需要进行握手阶段。握手阶段包括以下几个步骤：
建立连接后，客户端和服务端就可以通过WebSocket进行实时双向通信。数据传输阶段包括以下几个步骤：
双方如何进行相互传输数据的 具体的数据格式是怎么样的呢？WebSocket 的每条消息可能会被切分成多个数据帧（最小单位）。发送端会将消息切割成多个帧发送给接收端，接收端接收消息帧，并将关联的帧重新组装成完整的消息。
发送方 -> 接收方：ping。
接收方 -> 发送方：pong。
ping 、pong 的操作，对应的是 WebSocket 的两个控制帧
当不再需要WebSocket连接时，需要进行关闭阶段。关闭阶段包括以下几个步骤：
总的来说，WebSocket通过握手阶段、数据传输阶段和关闭阶段实现了服务器和客户端之间的实时双向通信。
WebSocket 数据帧主要包括两个部分：帧头和有效载荷。以下是 WebSocket 数据帧结构的简要介绍：
除了数据帧之外，WebSocket 协议还包括一些控制帧，主要包括 Ping、Pong 和 Close 帧。以下是 WebSocket 控制帧结构的简要介绍：
WebSocket 对象：WebSocket 对象表示一个新的 WebSocket 连接。WebSocket.onopen 事件处理程序：当 WebSocket 连接打开时触发。WebSocket.onmessage 事件处理程序：当接收到来自 WebSocket 的消息时触发。WebSocket.onerror 事件处理程序：当 WebSocket 发生错误时触发。WebSocket.onclose 事件处理程序：当 WebSocket 连接关闭时触发。WebSocket.send 方法：向 WebSocket 发送数据。WebSocket.close 方法：关闭 WebSocket 连接。var socket = new WebSocket('ws://example.com');其中，ws://example.com 是 WebSocket 的 URL，表示要连接的服务器。
使用 WebSocket.onopen 事件处理程序检查 WebSocket 是否成功连接。
socket.onopen = function() {
console.log('WebSocket connected');
};使用 WebSocket.onmessage 事件处理程序接收来自 WebSocket 的消息。
socket.onmessage = function(event) {
console.log('WebSocket message:', event.data);
};使用 WebSocket.send 方法向 WebSocket 发送消息。
socket.send('Hello, WebSocket!');当需要关闭 WebSocket 时，使用 WebSocket.close 方法。
socket.close();注意：在 WebSocket 连接成功打开和关闭时，会分别触发 WebSocket.onopen 和 WebSocket.onclose 事件。在接收到来自 WebSocket 的消息时，会触发 WebSocket.onmessage 事件。当 WebSocket 发生错误时，会触发 WebSocket.onerror 事件。
以下是一个简单的 WebSocket 编程示例，通过 WebSocket 向服务器发送数据，并接收服务器返回的数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket 示例</title>
</head>
<body>
<button id="sendBtn">发送消息</button>
<textarea id="messageBox" readonly></textarea>
<script src="main.js"></script>
</body>
</html>main.js），并在其中编写以下代码：// 获取按钮和文本框元素
const sendBtn = document.getElementById('sendBtn');
const messageBox = document.getElementById('messageBox');
// 创建 WebSocket 对象
const socket = new WebSocket('ws://echo.websocket.org'); // 使用一个 WebSocket 服务器进行测试
// 设置 WebSocket 连接打开时的回调函数
socket.onopen = function() {
console.log('WebSocket 连接已打开');
};
// 设置 WebSocket 接收到消息时的回调函数
socket.onmessage = function(event) {
console.log('WebSocket 接收到消息:', event.data);
messageBox.value += event.data + '\n';
};
// 设置 WebSocket 发生错误时的回调函数
socket.onerror = function() {
console.log('WebSocket 发生错误');
};
// 设置 WebSocket 连接关闭时的回调函数
socket.onclose = function() {
console.log('WebSocket 连接已关闭');
};
// 点击按钮时发送消息
sendBtn.onclick = function() {
const message = 'Hello, WebSocket!';
socket.send(message);
messageBox.value += '发送消息: ' + message + '\n';
};WebSocket 的错误处理
WebSocket is not supported：当浏览器不支持 WebSocket 时，会出现此错误。解决方法是在浏览器兼容性列表中检查是否支持 WebSocket。WebSocket connection closed：当 WebSocket 连接被关闭时，会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。WebSocket error：当 WebSocket 发生错误时，会出现此错误。解决方法是在 WebSocket.onerror 事件处理程序中进行错误处理。WebSocket timeout：当 WebSocket 连接超时时，会出现此错误。解决方法是在 WebSocket.ontimeout 事件处理程序中进行错误处理。WebSocket handshake error：当 WebSocket 握手失败时，会出现此错误。解决方法是在 WebSocket.onerror 事件处理程序中进行错误处理。WebSocket closed by server：当 WebSocket 连接被服务器关闭时，会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。WebSocket closed by protocol：当 WebSocket 连接被协议错误关闭时，会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。WebSocket closed by network：当 WebSocket 连接被网络错误关闭时，会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。WebSocket closed by server：当 WebSocket 连接被服务器错误关闭时，会出现此错误。解决方法是在 WebSocket.onclose 事件处理程序中进行错误处理。通过为 WebSocket 对象的 onclose、onerror 和 ontimeout 事件添加处理程序，可以及时捕获和处理 WebSocket 错误，从而确保程序的稳定性和可靠性。
class webSocketClass {
constructor(thatVue) {
this.lockReconnect = false;
this.localUrl = process.env.NODE_ENV === 'production' ? 你的websocket生产地址' : '测试地址';
this.globalCallback = null;
this.userClose = false;
this.createWebSocket();
this.webSocketState = false
this.thatVue = thatVue
}
createWebSocket() {
let that = this;
// console.log('开始创建websocket新的实例', new Date().toLocaleString())
if( typeof(WebSocket) != "function" ) {
alert("您的浏览器不支持Websocket通信协议，请更换浏览器为Chrome或者Firefox再次使用！")
}
try {
that.ws = new WebSocket(that.localUrl);
that.initEventHandle();
that.startHeartBeat()
} catch (e) {
that.reconnect();
}
}
//初始化
initEventHandle() {
let that = this;
// //连接成功建立后响应
that.ws.onopen = function() {
console.log("连接成功");
};
//连接关闭后响应
that.ws.onclose = function() {
// console.log('websocket连接断开', new Date().toLocaleString())
if (!that.userClose) {
that.reconnect(); //重连
}
};
that.ws.onerror = function() {
// console.log('websocket连接发生错误', new Date().toLocaleString())
if (!that.userClose) {
that.reconnect(); //重连
}
};
that.ws.onmessage = function(event) {
that.getWebSocketMsg(that.globalCallback);
// console.log('socket server return '+ event.data);
};
}
startHeartBeat () {
// console.log('心跳开始建立', new Date().toLocaleString())
setTimeout(() => {
let params = {
request: 'ping',
}
this.webSocketSendMsg(JSON.stringify(params))
this.webSocketState = true; // 在连接成功后设置为true
this.waitingServer()
}, 30000)
}
//延时等待服务端响应，通过webSocketState判断是否连线成功
waitingServer () {
this.webSocketState = false//在线状态
setTimeout(() => {
if(this.webSocketState) {
this.startHeartBeat()
return
}
// console.log('心跳无响应，已断线', new Date().toLocaleString())
try {
this.closeSocket()
} catch(e) {
console.log('连接已关闭，无需关闭', new Date().toLocaleString())
}
this.reconnect()
//重连操作
}, 5000)
}
reconnect() {
let that = this;
if (that.lockReconnect) return;
that.lockReconnect = true; //没连接上会一直重连，设置延迟避免请求过多
setTimeout(function() {
that.createWebSocket();
that.thatVue.openSuccess(that) //重连之后做一些事情
that.thatVue.getSocketMsg(that)
that.lockReconnect = false;
}, 15000);
}
webSocketSendMsg(msg) {
this.ws.send(msg);
}
getWebSocketMsg(callback) {
this.ws.onmessage = ev => {
callback && callback(ev);
};
}
onopenSuccess(callback) {
this.ws.onopen = () => {
// console.log("连接成功", new Date().toLocaleString())
callback && callback()
}
}
closeSocket() {
let that = this;
if (that.ws) {
that.userClose = true;
that.ws.close();
}
}
}
export default webSocketClass;Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8