前言
Websocket
是一种用于在服务器和客户端之间实现高效的双向通信的机制,通过WebSocket
,其目的是在应用
和服务器
进行频繁双向通信时,可以使服务器避免打开多个HTTP连接进行工作来节约资源,提高了工作效率和资源利用率。
WebSocket相关
1. 构造函数
WebSocket(url,protocols)
构造函器会返回一个 WebSocket 对象。
url
指WebSocket服务器将响应的URL。
protocols
可选字段,代表选择的子协议。
2. 常用属性
WebSocket.url
是一个只读属性,对应构造函数创建WebSocket
实例对象时的URL
。WebSocket.readyState
返回当前WebSocket
的链接状态,只读。对应值为整型,如下:0
(WebSocket.CONNECTING)正在链接中
1
(WebSocket.OPEN)已经链接并且可以通讯
2
(WebSocket.CLOSING)连接正在关闭
3
(WebSocket.CLOSED)连接已关闭或者没有链接成功
WebSocket.onopen
属性定义建立连接并可以通讯时触发的回调函数,也就是readyState
变为1
时调用;WebSocket.onmessage
该属性定义一个当收到来自服务器的消息时触发的回调函数。WebSocket.onerror
定义一个发生错误时执行的回调函数,此事件的事件名为"error"。WebSocket.onclose
属性返回一个事件监听器,这个事件监听器将在 WebSocket 连接的readyState 变为3
时被调用。
websocket封装
websocket.js
代码如下:
class Socket {
/**
* 构造函数
* @param {object} params 构造函数参数
*/
constructor(params) {
window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket) { // 检测浏览器支持
console.error('错误: 浏览器不支持websocket');
return;
}
this.websocket = null;
this.params = params;
this.socketInit(params);
}
/**
* 初始化socket
* @param {string} url WebSocket服务器将响应的URL
* @param {function} onopen open事件的回调函数
* @param {function} onclose close事件的回调函数
* @param {function} onerror error事件的回调函数
* @param {function} onclose close事件的回调函数
* @param {boolean} reconnect 是否启用断线重连 默认为false
* @param {number} timer 心跳周期 若为空或0则不启用
*/
socketInit({
url, onopen, onmessage, onerror, onclose, reconnect = false, timer,
}) {
if (url !== undefined) {
// 若不以wss?开头
if (!/^wss?:\/\//.test(url)) {
const { protocol } = window.location;
// 则自动补上协议头
url = protocol === 'http:' ? 'ws://' + url : 'wss://' + url;
}
try {
this.websocket = new WebSocket(url);
// 用于指定连接成功后的回调函数。
this.websocket.onopen = (e) => {
console.log('连接成功', e);
if (timer > 0) {
this.heartCheck(timer);
}
if (typeof onopen === 'function') {
onopen(e);
}
};
// 用于指定当从服务器接受到信息时的回调函数。
this.websocket.onmessage = (e) => {
console.log('接收数据', e);
onmessage(e.data);
};
// 用于指定连接关闭后的回调函数。
this.websocket.onclose = (e) => {
console.log('连接关闭', e);
reconnect && this.reconnect();
if (typeof onclose === 'function') {
onclose(e);
}
};
// 用于指定连接失败后的回调函数。
this.websocket.onerror = (e) => {
console.log('连接异常', e);
reconnect && this.reconnect();
if (typeof onerror === 'function') {
onerror(e);
}
};
} catch (e) {
reconnect && this.reconnect();
}
}
}
// 发送消息
send(message) {
// readyState 1 表示已经链接并且可以通讯
if (!this.websocket || this.websocket.readyState !== 1) {
console.log('请确认websocket是否已经链接并且可以通讯');
return;
}
this.websocket.send(JSON.stringify(message));
}
// 手动关闭socket
close() {
this.heartInterval && clearInterval(this.heartInterval);
this.reconnectTimeout && clearTimeout(this.reconnectTimeout);
if (!this.websocket) {
console.log('websocket 不可用');
return;
}
this.websocket.close();
}
// 周期性发送ping 保活
heartCheck(timer) {
this.heartInterval = window.setInterval(() => {
this.send({ type: 'ping' });
}, timer);
}
// 断线重连
reconnect() {
if (this.lockReconnect) return;
this.lockReconnect = true;
this.reconnectTimeout && clearTimeout(this.reconnectTimeout);
this.reconnectTimeout = window.setTimeout(() => {
this.socketInit(this.params);
this.lockReconnect = false;
}, 5000);
}
}
export default Socket;
使用方式
代码如下(示例):
import WebSocket from '@/utils/websocket';
const options = {
url: 'ws://127.0.0.1:8080',
onmessage: (res) => {
// 接收数据后回调
},
// 保活周期 10s
timer: 10000,
// 断线重连
reconnect: true,
};
const socket = new WebSocket(options);
业务处理完可以手动关闭连接
socket.close();
补充
可先用websocket在线测试工具测试服务器是否联通。封装代码易扩展,后续还可添加保活、重连功能。
2022.1.15号 更新
新增断线重连以及保活功能。