什么是WebSocket?
WebSocket 是一种在单个TCP连接上进行全双工通信的协议（计算机网络应用层的协议）
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。（维基百科）
特点：
- 与HTTP协议有良好的兼容性，默认端口也是80和443，握手阶段采用HTTP协议
- 建立在TCP协议之上，服务端的实现比较容易
WebSocket连接过程
-
建立握手 客户端发起HTTP请求，请求头中含有
Connection: Upgrade Upgrade: Websocket Sec-WebSocket-Key: xxx // 提供给服务器来验证是否收到一个有效的WebSockets请求 Sec-WebSocket-Version: xxx // 版本服务器收到之后，明白要升级websocket连接。向客户端发送101状态码的响应
101 Switching Protocols Connection: Upgrade Upgrade: Websocket Sec-WebSocket-Accept: xxx之后就可以进行双端通信
WebSocket与Http的区别
- 二者都是基于TCP，都是应用层协议。但是websocket只是在建立握手时，数据是通过HTTP传输的。
重连机制
目的是防止WebSocket，断开连接时，能主动重连(区分主动断开，不进行重连)
完整代码
// 订阅发布--EventDispatcher
class EventDispatcher {
listeners= {};
addEventListener(type, listener) { // 收集依赖
if (!this.listeners[type]) {
this.listeners[type] = [];
}
if (this.listeners[type].indexOf(listener) === -1) {
this.listeners[type].push(listener);
}
}
removeEventListener(type) { // 清空依赖
this.listeners[type] = [];
}
dispatchEvent(type, data) { // 循环执行callback
const listenerArray = this.listeners[type] || [];
if (listenerArray.length === 0) return;
listenerArray.forEach(listener => {
listener.call(this, data);
});
}
}
export class WebSocetClient extends EventDispatcher {
url = ''; // #socket链接
socket = null; // #socket实例
reconnectAttempts = 0; // #重连次数
maxReconnectAttempts = 5; // #最大重连数
reconnectInterval = 10000; // #重连间隔
stopWs = false; // #彻底终止ws
// *构造函数
constructor(url) {
super();
this.url = url;
console.log('[WebSocket] 构造函数');
}
// >生命周期钩子
onopen(callBack) {
this.addEventListener('open', callBack);
}
onmessage(callBack) {
this.addEventListener('message', callBack);
}
onclose(callBack) {
this.addEventListener('close', callBack);
}
onerror(callBack) {
this.addEventListener('error', callBack);
}
// >消息发送
send(message) {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.socket.send(message);
} else {
console.error('[WebSocket] 未连接');
}
}
// 初始化连接
connect() {
if (this.reconnectAttempts === 0) {
console.log('WebSocket', `初始化连接中... `);
}
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
return;
}
this.socket = new WebSocket(this.url);
// websocket连接成功
this.socket.onopen = event => {
this.stopWs = false;
// 重置重连尝试成功连接
this.reconnectAttempts = 0;
console.log('WebSocket', `连接成功,等待服务端数据推送[onopen]...`);
this.dispatchEvent('open', event);
};
this.socket.onmessage = event => {
console.log("message");
this.dispatchEvent('message', event);
};
this.socket.onclose = event => {
if (this.reconnectAttempts === 0) {
console.log('WebSocket', `连接断开[onclose]...`);
}
if (!this.stopWs) {
this.handleReconnect();
}
this.dispatchEvent('close', event);
};
this.socket.onerror = event => {
if (this.reconnectAttempts === 0) {
console.log('WebSocket', `连接异常[onerror]...`);
}
this.dispatchEvent('error', event);
};
}
// 断网重连逻辑
handleReconnect() {
if (this.reconnectAttempts < this.maxReconnectAttempts) {
this.reconnectAttempts++;
console.log('WebSocket', `尝试重连... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
setTimeout(() => {
this.connect();
}, this.reconnectInterval);
} else {
console.log('WebSocket', `最大重连失败，终止重连:`);
}
}
// 关闭连接
close() {
if (this.socket) {
this.stopWs = true;
this.socket.close();
this.socket = null;
this.removeEventListener('open');
this.removeEventListener('message');
this.removeEventListener('close');
this.removeEventListener('error');
}
}
}
使用方法
与官方有一点点不同，多加注意
// 创建实例
const ws = new WebSocketClient('ws://xxx');
ws.connect()
ws.onclose(()=>{})
ws.onerror(()=>{})
ws.onmessage(()=>{
ws.send("xxx")
})
ws.onopen(()=>{})
ws.close()
心跳机制
参考--># 赶快收藏！全网最佳websocket封装：完美支持断网重连、自动心跳！
