成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现

可参考实现方式点击进入查看

具体实现方案如下所示：

import { useWebsocketMsessageStore } from '@/stores/websocketMsessageStore.js'
import {ElMessage} from "element-plus";
import {useUserStore} from "@/stores/userStore.js";
// import pinia  from '@/stores/pinia.js'
// import { pinia_2 }  from '@/main.js'
let webSocket = null;
let isConnect = false; // 连接状态标志位
let rec = null; // 用于存储延迟重连的定时器
let base_ip_port = 'ws://ip:端口'
let msg_status = "error"
let my_msg = "WebSocket连接已关闭，正在尝试重新连接接"
// const userStore = useUserStore(pinia)
// const userStore = useUserStore()

function createWebSocket(ip_port) {
  try {
    const wsUri = '/ws/msg/chatroom1/'; // WebSocket服务器地址
    webSocket = new WebSocket(ip_port+wsUri);
    initWebSocket();
  } catch (e) {
    if(webSocket === null){
      console.log('尝试创建连接失败，正在尝试重新连接');
      reConnect(base_ip_port); // 创建连接失败时触发重连
    }
  }
}
function initWebSocket() {
  webSocket.onopen = function (e) {
    console.log('WebSocket连接已打开');
    ElMessage({
      type: "success",
      message: "WebSocket连接已打开",
      duration: 3000
    })
    isConnect = true; // 更新连接状态标志位
    // 可以在这里启动心跳检测等逻辑...
  };
  webSocket.onclose = function (e) {
    const userStore = useUserStore()
    console.log('WebSocket连接已关闭，正在尝试重新连接');
    ElMessage({
      type: msg_status,
      message: my_msg,
      duration: 3000
    })
    isConnect = false; // 更新连接状态标志位
    if (userStore.userInfo.token){
      console.log("websocket onclose")
      reConnect(base_ip_port); // 连接关闭时触发重连
    }
  };
  webSocket.onmessage = function (event) {
    // 处理接收到的消息...
    let response_data = JSON.parse(JSON.parse(event.data).message)
    // 推送到pinia
    const websocketMsessageStore = useWebsocketMsessageStore()
    if (response_data["each_groups_info"]){
      console.log('each_groups_info', response_data["each_groups_info"]);
      websocketMsessageStore.update_groups_info(response_data["each_groups_info"])
    }
    if (response_data["all_kill_chain"]){
      let result = JSON.parse(response_data['all_kill_chain'])
      console.log('all_kill_chain',result)
      websocketMsessageStore.update_kill_chains_data(result)
    }
    if (response_data["count_down_info"]){
      let count_down_info = JSON.parse(response_data['count_down_info'])
      console.log('count_down_info',count_down_info)
      websocketMsessageStore.update_count_down_info(count_down_info)
    }

    if (response_data["timestamp_zero"]){
      console.log('timestamp_zero',response_data['timestamp_zero'])
      websocketMsessageStore.update_timestamp_zero(response_data['timestamp_zero'])
    }

    if (response_data["persons_info"]){
      console.log('persons_info',response_data['persons_info'])
      websocketMsessageStore.update_person_info(response_data['persons_info'])
    }

    if (response_data["FindDataimage2zht"]){
      console.log('FindDataimage2zht',response_data["FindDataimage2zht"]);
      websocketMsessageStore.update_sarData(response_data['FindDataimage2zht']);
    };

  };
  webSocket.onerror = function (e) {
    console.log('WebSocket连接发生错误，正在尝试重新连接');
    ElMessage({
      type: "error",
      message: "WebSocket连接发生错误，正在尝试重新连接",
      duration: 3000
    })
    isConnect = false; // 更新连接状态标志位
    reConnect(base_ip_port); // 连接错误时触发重连
  };
}
// 外部直接调用这个进行websocket连接
export const reConnect = (ip_ports)=> {
  base_ip_port = ip_ports
  console.log("websocket链接")
  if (isConnect) return; // 如果已经连接上则不再重连
  if (rec) clearTimeout(rec); // 清除之前的重连定时器（如果存在）
  rec = setTimeout(function () {
    createWebSocket(base_ip_port); // 延迟一段时间后尝试重新建立连接
  }, 5000); // 设置延迟时间为10秒（可根据实际需求调整）
}

// 向服务器发送消息
const sendMsg = (msg)=> {
  webSocket.send(msg)
}
// 外部直接调用这个主动关闭websocket连接
export const closeConn = (args="wss://ip:端口", msg="已主动关闭WebSocket连接")=> {
  // 向服务端发送断开连接
  webSocket.close();
  msg_status = "success"
  my_msg = msg
  base_ip_port = args
  // ElMessage({
  //   type: "success",
  //   message: msg,
  //   duration: 3000
  // })
}
// 模拟当前任务数，随机生成的
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
export const sendSocketMsg = ()=>{
  sendMsg(JSON.stringify({
    text: "你好啊",
    counts: getRandomInt(0, 10)
  }))
}

连接webosocket的函数：reConnect 。断开连接websocket的函数：closeConn