js 使用websocket建立连接(包括心跳检查+断线重连)

        本文是将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<any>) {
    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<any>) {
  // 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 };