ops-fronted-java/socket/index.js

import { Notification } from "element-ui";

let hasShownNotification = false;
// WebSocket连接实例
let socket = null;

// 是否正在尝试重连
let lockReconnect = false;

// 心跳间隔，20秒
const timeout = 20 * 1000;

// 心跳定时器
let timeoutObj = null;

// 服务器无响应超时定时器
let serverTimeoutObj = null;

// 重连定时器
let reconnectTimeout = null;

// 初始化WebSocket连接
const initWebSocket = () => {
  if ("WebSocket" in window) {
    const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
    const wsPath = "/api/xymanager/websocket";
    const wshost =
      window.location.hostname === "localhost"
        ? "61.169.135.146:40085"
        : window.location.host;
    const wsUrl = protocol + wshost + wsPath;

    socket = new WebSocket(wsUrl);

    socket.onerror = webSocketOnError;
    socket.onmessage = webSocketOnMessage;
    socket.onclose = closeWebsocket;
    socket.onopen = openWebsocket;
  } else {
    // 浏览器不支持WebSocket
    console.error("您的浏览器不支持WebSocket");
    // 这里可以添加更友好的提示方式，如使用Element UI的Notification
  }
};

// 打开WebSocket连接时执行
const openWebsocket = () => {
  console.log("WebSocket链接成功");
  startHeartbeat();
};

// 启动心跳
const startHeartbeat = () => {
  timeoutObj = setTimeout(() => {
    if (socket.readyState === WebSocket.OPEN) {
      socket.send("1"); // 发送心跳消息
      console.log("发送心跳消息以保持WebSocket连接活跃");

      // 如果需要，可以在这里添加检测服务器响应的逻辑
      // 例如，设置一个服务器响应超时检测

      // 递归调用以继续发送心跳
      startHeartbeat();
    } else {
      // 如果WebSocket已经关闭，则不再发送心跳
      console.log("WebSocket连接已关闭，停止发送心跳");
      clearTimeout(timeoutObj); // 清除定时器
    }
  }, timeout);
};

// WebSocket错误处理
const webSocketOnError = (e) => {
  console.error("WebSocket发生错误:", e);
  // 这里通常不需要立即重连，因为onclose会处理重连逻辑
};

// 处理接收到的消息
const webSocketOnMessage = (e) => {
  // 自定义事件，将接收到的数据派发给其他监听器
  window.dispatchEvent(
    new CustomEvent("onmessageWS", { detail: { data: e.data } })
  );
  // 收到消息后重置心跳定时器
  resetHeartbeat();
};

// WebSocket关闭处理
const closeWebsocket = (e) => {
  console.log("WebSocket连接已关闭:", e);
  // if (!hasShownNotification) {
  //   Notification({
  //     title: "告警",
  //     message: "WebSocket连接已关闭",
  //     position: "bottom-right",
  //     type: "warning",
  //     duration: 2000,
  //   });
  //   hasShownNotification = true; // 更新状态，防止再次显示
  // }

  // 清除所有定时器
  clearTimeout(timeoutObj);
  clearTimeout(serverTimeoutObj);
  // 设置重连定时器
  reconnectTimeout = setTimeout(() => {
    initWebSocket();
  }, 60 * 1000); // 60秒后重连
};

// 重置心跳定时器
const resetHeartbeat = () => {
  clearTimeout(timeoutObj);
  clearTimeout(serverTimeoutObj);
  startHeartbeat();
};

// 发送消息到WebSocket服务器
const sendWebsocket = (data) => {
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.send(data);
  } else {
    console.error("WebSocket未连接，无法发送消息");
  }
};

// 关闭WebSocket连接（通常不需要在前端主动调用，除非有特定需求）
const close = () => {
  if (socket) {
    socket.close();
  }
};

// 导出相关函数，以便在其他地方使用
export default { initWebSocket, sendWebsocket, close };

// 注意：关于离开页面不断开WebSocket连接的需求，这通常取决于浏览器的行为。
// 在一些情况下，浏览器会在页面卸载时自动关闭WebSocket连接。