本文是将websocket部分的代码进行封装,可以在下次使用的时候直接进行复制即可
代码如下:
import { ElMessage } from "element-plus";
import store from "../store";
import bus from "@/utils/bus";
import { SocketTypeEnum, findEnumNameByValue } from "@/utils/socketTypeEnum";
let websocket: WebSocket | null = null; // 用于存储实例化后websocket
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let heartBeatInterval: any | null = null;
const heartBeatMessage = "heartbeat";
const heartBeatIntervalTime = 30000; // 30 秒发送一次心跳
const reConnectIntervalTime = 5000; // 5 秒发送一次重新连接
// 创建websocket
function creatWebSocket(wsUrl: string) {
console.log("websocket==================");
// 判断当前浏览器是否支持WebSocket
if ("WebSocket" in window) {
console.log("当前浏览器支持 WebSocket");
} else if ("MozWebSocket" in window) {
console.log("当前浏览器支持 MozWebSocket");
} else {
console.log("当前浏览器不支持 WebSocket");
}
try {
initWebSocket(wsUrl); // 初始化websocket连接
} catch (e) {
console.log("尝试创建连接失败");
reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
}
}
// 初始化websocket
function initWebSocket(wsUrl: string) {
websocket = new WebSocket(wsUrl);
console.log("websocket:", websocket);
websocket.onopen = function () {
websocketOpen();
};
// // 接收
websocket.onmessage = function (e: MessageEvent
websocketonmessage(e);
};
// 连接发生错误
websocket.onerror = function () {
console.log("WebSocket连接发生错误");
// isConnect = false; // 连接断开修改标识
reConnect(wsUrl); // 连接错误 需要重连
};
websocket.onclose = function (e) {
console.log("WebSocket连接断开");
websocketclose(e);
// 添加重新连接逻辑
reConnect((websocket as any).url || "");
};
}
// 定义重连函数
const reConnect = (wsUrl: string) => {
console.log("尝试重新连接");
if ((store.state as any).websocket.isConnected) return; // 如果已经连上就不在重连了
rec && clearTimeout(rec);
rec = setTimeout(function () {
clearHeartbeat();
// 延迟5秒重连 避免过多次过频繁请求重连
creatWebSocket(wsUrl);
}, reConnectIntervalTime);
};
function sendHeartbeat() {
if (websocket && (store.state as any).websocket.isConnected) {
// 链接建立成功...
}
}
// 创建连接
function websocketOpen() {
console.log("连接成功");
store.dispatch("websocket/connect"); // 修改连接状态
startHeartbeat();
}
function startHeartbeat() {
console.log("开启ws心跳");
heartBeatInterval = setInterval(sendHeartbeat, heartBeatIntervalTime);
}
function clearHeartbeat() {
if (heartBeatInterval) {
clearInterval(heartBeatInterval);
heartBeatInterval = null;
}
}
// 数据接收
function websocketonmessage(e: MessageEvent
// console.log("数据接收", e.data);
const data = JSON.parse(e.data); // 解析JSON格式的数据
console.log("data", data);
if (findEnumNameByValue(data.Type) === "HeartBeat") {
// 这是心跳响应，不做其他处理
return;
}
const dataInfo = JSON.parse(data.Data);
console.log("dataInfo", dataInfo);
// 下面的判断则是后台返回的接收到的数据 如何处理自己决定
if (dataInfo.code === 400) {
// console.log("数据接收", data.msg);
ElMessage({
showClose: true,
message: dataInfo.msg,
type: "warning",
});
} else if (dataInfo.code === 0) {
ElMessage({
showClose: true,
message: "连接成功",
type: "success",
});
} else if (dataInfo.code === 200) {
store.commit("websocket/SET_WS_MSG", dataInfo);
bus.emit("wsMessage", { ...dataInfo, Type: data.Type });
// 成功后的相应处理 此处成功后播放音乐
// const audio = new Audio("./tipMusic.mp3");
// audio.play();
} else {
ElMessage({
showClose: true,
message: dataInfo.msg,
type: "error",
});
}
// let data = JSON.parse(decodeUnicode(e.data))
}
// 关闭
function websocketclose(e: any) {
console.log(e);
store.dispatch("websocket/disconnect"); // 修改连接状态
console.log("connection closed (" + e.code + ")");
clearHeartbeat();
}
// 数据发送
function websocketsend(data: any) {
if (websocket && (store.state as any).websocket.isConnected) {
console.log("发送的数据", data);
// 检查连接状态
websocket.send(JSON.stringify(data));
} else {
ElMessage({
showClose: true,
message: "通信连接疑似断开",
type: "error",
});
}
}
// 实际调用的方法==============
// 发送
function sendWebSocket(data: any) {
// 如果未保持连接状态 不允许直接发送消息 提示请选择连接设备
if (!(store.state as any).websocket.isConnected) {
ElMessage({
showClose: true,
message: "通信连接疑似断开",
type: "error",
});
} else {
websocketsend(data);
console.log("------------------");
}
}
// 关闭
const closeWebSocket = () => {
if (websocket) {
websocket.close();
ElMessage({
showClose: true,
message: "设备已关闭",
type: "success",
});
}
};
export { initWebSocket, sendWebSocket, creatWebSocket, closeWebSocket };
使用就是引入这个文件 然后在项目加载完成的时候(onMounted生命周期)的时候进行初始化 initWebSocket(wsUrl)
SocketTypeEnum文件里面就是一些枚举 和 对于枚举需要处理的方法
class SocketTypeEnum {
static HeartBeat = 0; //心跳
...
}
function findEnumNameByValue(value: number) {
for (const key in SocketTypeEnum) {
if ((SocketTypeEnum as any)[key] === value) {
return key;
}
}
return null;
}
export { SocketTypeEnum, findEnumNameByValue };