使用js封装
const WebSocketService = (() => { // 使用立即执行函数包裹模块,确保变量不污染全局作用域
let socket = null; // 定义 WebSocket 实例变量
let reconnectAttempts = 3; // 重连尝试次数
let currentAttempt = 0; // 当前重连尝试次数
let heartbeatInterval = 30000; // 心跳检测间隔时间,单位:毫秒
let heartbeatTimer = null; // 心跳定时器
/**
* 建立 WebSocket 连接
* @param {string} url - WebSocket 服务的 URL 地址
* @returns {WebSocket} 返回 WebSocket 实例
*/
const connect = (url) => {
socket = new WebSocket(url); // 创建 WebSocket 实例
// WebSocket 连接成功时的事件处理函数
socket.addEventListener('open', handleOpen);
// WebSocket 收到消息时的事件处理函数
socket.addEventListener('message', handleMessage);
// WebSocket 连接发生错误时的事件处理函数
socket.addEventListener('error', handleError);
// WebSocket 连接关闭时的事件处理函数
socket.addEventListener('close', handleClose);
return socket; // 返回 WebSocket 实例
};
/**
* 关闭 WebSocket 连接
*/
const disconnect = () => {
if (socket && socket.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
socket.close(); // 关闭 WebSocket 连接
stopHeartbeat(); // 停止心跳检测
}
};
/**
* WebSocket 连接成功时的处理函数
*/
const handleOpen = () => {
console.log('WebSocket连接已建立'); // 输出连接建立信息
startHeartbeat(); // 启动心跳检测
currentAttempt = 0; // 重置重连尝试次数
};
/**
* 处理 WebSocket 收到的消息
* @param {Event} event - WebSocket 消息事件
*/
const handleMessage = (event) => {
console.log('收到服务器消息:', event.data); // 输出收到的消息内容
// 在这里添加消息处理逻辑,例如更新 UI 界面等操作
};
/**
* WebSocket 连接发生错误时的处理函数
* @param {Event} error - WebSocket 错误事件
*/
const handleError = (error) => {
console.error('WebSocket连接发生错误:', error); // 输出连接错误信息
reconnect(socket.url); // 进行重连
};
/**
* WebSocket 连接关闭时的处理函数
*/
const handleClose = () => {
console.log('WebSocket连接已关闭'); // 输出连接关闭信息
stopHeartbeat(); // 停止心跳检测
reconnect(socket.url); // 进行重连
};
/**
* 启动心跳检测
*/
const startHeartbeat = () => {
heartbeatTimer = setInterval(() => { // 启动定时器
if (socket.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
socket.send('ping'); // 发送心跳消息
} else {
reconnect(socket.url); // 进行重连
}
}, heartbeatInterval); // 设置心跳检测间隔
};
/**
* 停止心跳检测
*/
const stopHeartbeat = () => {
clearInterval(heartbeatTimer); // 清除定时器
};
/**
* 断线重连机制
* @param {string} url - WebSocket 服务的 URL 地址
*/
const reconnect = (url) => {
if (currentAttempt < reconnectAttempts) { // 检查重连尝试次数
setTimeout(() => { // 设置定时器
currentAttempt++; // 增加重连尝试次数
connect(url); // 重新连接
}, Math.pow(2, currentAttempt) * 1000); // 指数退避算法,增加重连间隔
} else {
console.error('WebSocket连接尝试达到上限,无法重新连接'); // 输出重连尝试达到上限信息
}
};
return {
connect,
disconnect
};
})();
使用ts封装
interface WebSocketService {
connect(url: string): WebSocket;
disconnect(): void;
}
const WebSocketService: WebSocketService = (() => {
let socket: WebSocket | null = null; // 定义 WebSocket 实例变量
let reconnectAttempts = 3; // 重连尝试次数
let currentAttempt = 0; // 当前重连尝试次数
let heartbeatInterval = 30000; // 心跳检测间隔时间,单位:毫秒
let heartbeatTimer: NodeJS.Timeout | null = null; // 心跳定时器
/**
* 建立 WebSocket 连接
* @param {string} url - WebSocket 服务的 URL 地址
* @returns {WebSocket} 返回 WebSocket 实例
*/
const connect = (url: string): WebSocket => {
socket = new WebSocket(url); // 创建 WebSocket 实例
// WebSocket 连接成功时的事件处理函数
socket.addEventListener('open', handleOpen);
// WebSocket 收到消息时的事件处理函数
socket.addEventListener('message', handleMessage);
// WebSocket 连接发生错误时的事件处理函数
socket.addEventListener('error', handleError);
// WebSocket 连接关闭时的事件处理函数
socket.addEventListener('close', handleClose);
return socket; // 返回 WebSocket 实例
};
/**
* 关闭 WebSocket 连接
*/
const disconnect = (): void => {
if (socket && socket.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
socket.close(); // 关闭 WebSocket 连接
stopHeartbeat(); // 停止心跳检测
}
};
/**
* WebSocket 连接成功时的处理函数
*/
const handleOpen = (): void => {
console.log('WebSocket连接已建立'); // 输出连接建立信息
startHeartbeat(); // 启动心跳检测
currentAttempt = 0; // 重置重连尝试次数
};
/**
* 处理 WebSocket 收到的消息
* @param {MessageEvent} event - WebSocket 消息事件
*/
const handleMessage = (event: MessageEvent): void => {
console.log('收到服务器消息:', event.data); // 输出收到的消息内容
// 在这里添加消息处理逻辑,例如更新 UI 界面等操作
};
/**
* WebSocket 连接发生错误时的处理函数
* @param {Event} error - WebSocket 错误事件
*/
const handleError = (error: Event): void => {
console.error('WebSocket连接发生错误:', error); // 输出连接错误信息
reconnect(socket!.url); // 进行重连
};
/**
* WebSocket 连接关闭时的处理函数
*/
const handleClose = (): void => {
console.log('WebSocket连接已关闭'); // 输出连接关闭信息
stopHeartbeat(); // 停止心跳检测
reconnect(socket!.url); // 进行重连
};
/**
* 启动心跳检测
*/
const startHeartbeat = (): void => {
heartbeatTimer = setInterval(() => { // 启动定时器
if (socket!.readyState === WebSocket.OPEN) { // 检查 WebSocket 实例状态
socket!.send('ping'); // 发送心跳消息
} else {
reconnect(socket!.url); // 进行重连
}
}, heartbeatInterval); // 设置心跳检测间隔
};
/**
* 停止心跳检测
*/
const stopHeartbeat = (): void => {
if (heartbeatTimer) {
clearInterval(heartbeatTimer); // 清除定时器
heartbeatTimer = null;
}
};
/**
* 断线重连机制
* @param {string} url - WebSocket 服务的 URL 地址
*/
const reconnect = (url: string): void => {
if (currentAttempt < reconnectAttempts) { // 检查重连尝试次数
setTimeout(() => { // 设置定时器
currentAttempt++; // 增加重连尝试次数
connect(url); // 重新连接
}, Math.pow(2, currentAttempt) * 1000); // 指数退避算法,增加重连间隔
} else {
console.error('WebSocket连接尝试达到上限,无法重新连接'); // 输出重连尝试达到上限信息
}
};
return {
connect,
disconnect
};
})();
export default WebSocketService;
使用
import WebSocketService from './WebSocketService.js';
// 建立 WebSocket 连接
const url = 'ws://localhost:1332';
const socket = WebSocketService.connect(url);
// 当需要断开连接时
WebSocketService.disconnect();
注意:使用ts和js封装的功能没有差异,仅仅只是在ts上加了类型声明
给个关注呗!