成熟的前端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)// 推送到piniaconst 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_portsconsole.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 = msgbase_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