当前位置：首页 > news >正文

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

news 来源：原创 2025/6/25 15:52:17

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

具体实现方案如下所示：

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

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

可参考实现方式点击进入查看具体实现方案如下所示： import { useWebsocketMsessageStore } from /stores/websocketMsessageStore.js import {ElMessage} from "element-plus"; import {useUserStore} from "/stores/userStore.js"; // impo…...

编程日记 2025/6/25 15:52:17

广州 3D 展厅开启企业展示新时代

为了突破传统展厅的局限，满足企业日益增长的展示需求，3D 展厅应运而生。3D 展厅是利用虚拟现实（VR）、增强现实（AR）和三维建模等先进技术，构建出的一个高度逼真的数字化展示空间。它打破了传统展…...

编程日记 2025/6/26 9:25:20

【Django】新增字段后兼容旧接口 This field is required

背景我在Django模型里新增了两个字段后，旧的接口由于没有同时新增这两个字段的处理，因此旧的接口就报： This field is required 解决把序列化时的 required 的字段设置为False即可 class ServiceSerializer(DynamicFieldsModelSerializ…...

编程日记 2025/6/26 9:36:43

基于AIGC的3D场景生成实战：从文本描述到虚拟世界构建

一、3D AIGC技术解析 1.1 技术挑战与突破挑战维度传统方案局限 AIGC创新方案建模效率人工建模耗时数天文本到3D秒级生成细节丰富度重复使用素材库无限风格化生成物理合理性手动调整物理参数自动符合物理规律多平台适配需手动优化模型自适应LOD生成 1.2 主流技术路…...

编程日记 2025/6/26 1:24:45

手写Java线程池与定时器：彻底掌握多线程任务调度

目录一、线程池 1.1、什么是线程池 1.2、Java标准库中的线程池 1.3、ThreadPoolExecutor的七大参数 1.4、模拟实现线程池 1.4.1、submit () 1.4.2、构造方法 1.4.3、运行结果二、定时器 2.1、标准库中的定时器 2.2、模拟实现定时器 2.2.1、MyTimerTask类 2…...

编程日记 2025/6/25 9:31:14

【科研绘图系列】R语言绘制区间点图（dot plot）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据数据预处理画图1画图2输出图片系统信息介绍【科研绘图系列】R语言绘制区间点图（dot plot）加载R包 library(tidyverse) library(ggtext) library(r…...

编程日记 2025/6/25 18:54:46

【Agent实战】从0到1开发一个Python 解释器 MCP SSE Server

写在前面想象一个场景：LLM Agent（如 AutoGPT、MetaGPT 或我们自己构建的 Agent）在规划任务后，决定需要运行一段 Python 代码来处理数据或调用某个 API。它不能直接在自己的环境中执行（通常不具备这个能力，也不安全），而是需要将这段代码发送给一个专门的外部服务来执行…...

编程日记 2025/6/26 1:12:53

C语言大写转小写2.0

一、阐述关系上一次的题目是大写转小写,这一次代码不一样,运行的结果也不一样,这次的代码在此基础之上改动了一下,虽然看起来相似,但实际上运行结果不一样二、题目展示下面代码中,运行的结果是多少? 三、分析过程首先,进入main函数,先声明了一个字符型数组是"012…...

编程日记 2025/5/27 6:18:54

pnpm常见报错解决办法

PS D:\code\gitlab\manus-web> pnpm add -D types/framer-motion --save-exact --config.strict-peer-depsfalse Debugger attached. WARN deprecated eslint8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other op…...

编程日记 2025/6/23 22:13:56

【Linux网络】：套接字之UDP

一、UDP和TCP协议 TCP （Transmission Control Protocol 传输控制协议）的特点： 传输层协议有连接（在正式通信前要先建立连接）可靠传输（在内部帮我们做可靠传输工作）面向字节流 UDP （U…...

编程日记 2025/6/24 1:34:34

量子威胁下的安全革命：后量子密码学技术路线与迁移挑战全解析

引言量子计算技术的快速发展正在重塑现代密码学的安全版图。随着Shor算法对传统公钥密码体系的根本性威胁[1]，全球范围内后量子密码学（Post-Quantum Cryptography, PQC）的研究与标准化进程已进入关键阶段。本文基于权威文献分析&#xff0c…...

编程日记 2025/6/24 10:24:02

多模态大语言模型（MLLM）- kimi-vl technical report论文阅读

前言 kimi-vl是月之暗面团队于2025年4月10日发布的多模态大模型。代码链接：https://github.com/MoonshotAI/Kimi-VL 背景随着人工智能技术的快速发展，人们对AI助手的需求已从单一文本交互转向多模态理解。新一代多模态模型如GPT-4o和Gemini虽展现…...

编程日记 2025/6/22 7:01:12

ai聊天流式响应，阻塞式和流式响应 nginx遇到的坑

问题现在做ai的流式请求，在开发环境使用代理访问接口，显示是正常的。上到正式环境，代理通过nginx配置可以访问到流式接口。在本地测试postman请求流式接口，返回的东西是流式返回， 在正式环境里面使用postman请求流式…...

编程日记 2025/6/23 17:46:21

Linux安全模块：SELinux与AppArmor深度解析

引言在Linux安全领域，SELinux和AppArmor就像两位忠诚的"系统保镖"💂，为你的服务器提供强制访问控制(MAC)保护！本文将深入解析这两大安全模块的工作原理、配置方法和实战技巧。无论你是要加固Web服务器，还是…...

编程日记 2025/5/4 19:55:19

FlinkJobmanager深度解析

1. JobManager 概述 Flink 是一个分布式流处理框架，其核心组件包括 JobManager、TaskManager 和客户端（如 CLI 或 Web UI）。JobManager 是 Flink 集群的“大脑”，负责协调作业的整个生命周期，包括作业调度、资源管理、…...

编程日记 2025/6/23 22:11:16

FlinkSql入门与实践

一、为什么需要 Flink SQL？ 传统 SQL 是面向静态数据的查询语言，而现代实时业务要求对动态数据流进行即时分析。Flink SQL 应运而生，它让开发者无需编写复杂的状态管理代码，就能实现实时ETL、复杂事件处理（CEP&#x…...

编程日记 2025/6/25 11:20:25

【物联网】基于LORA组网的远程环境监测系统设计（ThingsCloud云平台版）

演示视频：基于LORA组网的远程环境监测系统设计（ThingsCloud云平台版）前言：本设计是基于ThingsCloud云平台版，还有另外一个版本是基于机智云平台版本，两个设计只是云平台和手机APP的区别，其他功能都一样。如下链接：【物联网】基于LORA组网的远程环境监测系统设计（机…...

编程日记 2025/6/26 7:04:49

C++中指针Ptr（一级指针、二级指针）的基本使用详解（1）

C 中的指针是非常强大的工具，理解一级指针、二级指针以及它们与数组的关系，对于写出高效且安全的程序非常重要。下面我将从基础讲起，详细解释一级指针、二级指针的使用，注意事项，以及它们和数组之间的联系与区别&…...

编程日记 2025/6/25 20:56:05

科技赋能建筑新未来：中建海龙模块化建筑产品入选中国建筑首批产业化推广产品

在建筑工业化浪潮中，中国建筑国际集团旗下中建海龙科技有限公司（以下简称“中建海龙”）致力以科技创新赋能传统建造转型升级，大力发展新质生产力，促进科技成果在建筑产业体系化、规模化应用，面向“产品化、…...

编程日记 2025/6/25 21:39:32

示例：Spring JDBC 声明式事务（xml配置形式）

声明式事务是指在不修改源代码的情况下通过配置applicationContext.xml自动实现事务控制，其本质是AOP环绕通知。它的触发时机为：1、当目标方法执行成功时自动提交事务，2、当目标方法抛出运行时异常时，自动事务回滚核心步骤示例&a…...

编程日记 2025/6/25 18:51:04

java多线程（7.0）

目录编辑定时器定时器的使用三.定时器的实现 MyTimer 3.1 分析思路 1. 创建执行任务的类。 2. 管理任务 3. 执行任务 3.2 线程安全问题定时器定时器是软件开发中的一个重要组件. 类似于一个 "闹钟". 达到一个设定的时间之后, 就执行某个指定好的…...

编程日记 2025/6/26 4:15:28

sgpt在kali应用

Kali Linux 下 sgpt 渗透测试相关案例 1. 扫描目标主机存活 sgpt -s "使用 nmap 扫描 192.168.1.100 是否存活"示例命令： nmap -sn 192.168.1.1002. 扫描目标主机开放端口和服务 sgpt -s "使用 nmap 扫描 192.168.1.100 常见端口和服务"示例…...

编程日记 2025/6/24 1:31:38

小白电路设计-设计11-恒功率充电电路设计

介绍作为电子信息工程的我，电路学习是一定要学习的，可惜目前作为EMC测试工程师，无法兼顾太多，索性不如直接将所学的知识进行运用，并且也可以作为契机，进行我本人的个人提升。祝大家与我一起进行提升。1.本…...

编程日记 2025/6/25 18:04:30

express的模板handlebars用app.engine()创建配置和用exphbs.create()的区别

在使用 express-handlebars 时，app.engine 和 exphbs.create 都可以用来配置 Handlebars 模板引擎，但它们的使用方式和功能有一些区别。以下是详细的对比和说明 app.engine 方法 app.engine 是 Express 提供的方法，用于注册一个新的模板引擎…...

编程日记 2025/6/23 9:55:54

【Python数据库与后端开发】从ORM到RESTful API

目录前言技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块说明技术选型对比二、实战演示环境配置要求核心代码实现案例1：SQLAlchemy模型定义案例2：FastAPI异步接口案例3：连接池配…...

编程日记 2025/6/20 4:59:40

数据结构（java）二叉树的基本操作

1.二叉树的性质： 1.若规定根结点的层数为1，则一棵非空二叉树的第i层上最多有2*-1(i>0)个结点 2.若规定只有根节点的二叉树的深度为1，则深度为K的二叉树的最大结点数是2都k次方-1 3.对于任何一个二叉树，如果其叶结点个数为 n…...

编程日记 2025/6/23 8:22:19

windows编程字符串处理

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、windows常用字符出处理函数？二、测试代码总结前言提示：这里可以添加本文要记录的大概内容： Windows编程中主要使用两…...

编程日记 2025/6/24 6:33:24

CentOS系统防火墙服务介绍

CentOS 系统使用的是 firewalld 防火墙服务（从 CentOS 7 开始），它基于 zone（区域） 和 service（服务） 的机制来配置网络访问控制，替代了传统的 iptables。 iptables 是 Linux 系统中…...

编程日记 2025/6/22 19:24:26

59、微服务保姆教程（二）Nacos--- 微服务注册中心 + 配置中心

Nacos— 微服务注册中心 + 配置中心一.什么是Nacos？ Nacos是阿里的一个开源产品，是针对微服务架构中的服务发现、配置管理、服务治理的综合型解决方案。 Nacos核心定位是“一个更易于帮助构建云原生应用的动态服务发现、配置和服务管理平台”，也就是我们的注册中心和配…...

编程日记 2025/6/25 20:37:29

Git命令行中vim的操作

Git命令行用vim打开文件，或者用其他git命令打开了文件，需要编辑和保存文件等，有些命令表情奇怪，往往容易忘记这些命令。记录下。下面这篇比较实用和简练： gitvim编辑文件命令 • Worktile社区https://worktile.com/…...

编程日记 2025/5/26 6:10:28

【分布式系统中的“瑞士军刀”_ Zookeeper】一、Zookeeper 快速入门和核心概念

在分布式系统的复杂世界里，协调与同步是确保系统稳定运行的关键所在。Zookeeper 作为分布式协调服务的 “瑞士军刀”，为众多分布式项目提供了高效、可靠的协调解决方案。无论是在分布式锁的实现、配置管理，还是在服务注册与发现等场景中&…...

编程日记 2025/6/24 14:48:39

【昇腾】【训练】800TA2-910B使用LLaMA-Factory训练Qwen

文章目录 1. 使用docker安装1.1 配置docker1. 2 拉取 LLaMA-Factory1.3 修改配置 2. 下载模型3. 准备训练数据3.1 下载数据集3.2 自定义数据集配置 4. 训练4.1 训练配置4.2 启动训练4.3 训练效果测试 5. 合并权重更好的阅读体验：传送门服务器：800TA2 芯…...

编程日记 2025/6/25 5:49:40

Python自动化解决滑块验证码的最佳实践

1. 引言：滑块验证码的挑战与自动化需求滑块验证码（Slider CAPTCHA）是当前互联网广泛使用的反爬机制之一，它要求用户手动拖动滑块到指定位置以完成验证。这种验证方式可以有效阻止简单的自动化脚本，但对爬虫开发者来说…...

编程日记 2025/6/20 4:12:54

知识蒸馏和迁移学习的区别

知识蒸馏和迁移学习虽然都涉及知识的传递，但并不是同一个概念，它们在目的、方法和应用场景上有显著区别： 1. 定义与核心思想迁移学习（Transfer Learning） 是一种广义的机器学习范式，核心是将从一个任务或领…...

编程日记 2025/6/25 21:05:58

二项分布详解：从基础到应用

二项分布详解：从基础到应用目录引言二项分布的定义概率质量函数及其证明期望与方差推导二项分布的重要性质常见应用场景与其他分布的关系知识梳理练习与思考引言概率论中，二项分布是最基础也是最常用的离散概率分布之一。它描述了在固定次数的独…...

编程日记 2025/6/23 1:46:16

迁移学习(基础)

迁移学习理论目标迁移学习中的有关概念掌握迁移学习的两种方式概念预训练模型微调微调脚本预训练模型(Pretrained model) 一般情况下预训练模型都是大型模型, 具备复杂的网络结构, 众多的参数量, 以及足够大的数据集进行训练而产生的模型, 在NLP领域, 预训练模型往往…...

编程日记 2025/6/24 8:07:28

云服务器和独立服务器的区别在哪

在当今数字化的时代，服务器成为了支撑各种业务和应用的重要基石。而在服务器的领域中，云服务器和独立服务器是两个备受关注的选项。那么，它们到底有何区别呢？ 首先，让我们来聊聊成本。云服务器通常采用按需付费的模式…...

编程日记 2025/6/22 15:44:02

大模型时代的深度学习框架

作者：算力魔方创始人/英特尔创新大使刘力在CNN时代，AI模型的参数规模都在百万级别，仅需在单张消费类显卡上即可完成训练。例如，以业界知名的CNN模型：ResNet50为例，模型参数量是约为 25.63M，在…...

编程日记 2025/6/22 5:23:01

BIOS主板(非UEFI)安装fedora42的方法

BIOS主板(非UEFI)安装fedora42的方法现实困难：将Fedora-Workstation-Live-42-1.1.x86_64.iso写入U盘制作成可启动U盘启动fedora42，按照向导将fedora42安装到真机的sda7分区中得到报错如下内容： /boot/efi 必需的 /boot/efi必须位于格式化为e…...

编程日记 2025/6/26 7:02:03

C# 综合示例库存管理系统7 主界面（FormMain）

编程日记 2025/6/23 8:21:03

1、RabbitMQ的概述笔记

一、什么是RabbitMQ Rabbit是一个公司名.MQ(nessage queue) 消息队列的意思，RabbitMQ 是 Rabbit企业下的一个消息队列产品。 RabbitMQ 是⼀个实现了 AMQP 的消息队列服务,是当前主流的消息中间件之⼀. AMQP：即Advanced MessageQueuingProtocol(高级…...

编程日记 2025/6/25 20:38:14

使用spring boot vue 上传mp4转码为dash并播放

1.前端实现 <template><div class"video-upload"><el-uploadclass"upload-demo"action"/api/upload":before-upload"beforeUpload":on-success"handleSuccess":on-error"handleError":show-file-…...

编程日记 2025/5/16 9:07:03

C++智能指针概念理解的面试题

C智能指针概念理解的面试题第一部分：基础概念解释std::unique_ptr和std::shared_ptr在以下方面的区别： 所有权语义性能开销自定义删除器的存储方式是否支持数组类型答案： 所有权语义： unique_ptr：独占所有权&#…...

编程日记 2025/6/24 6:48:46

52.[前端开发-JS实战框架应用]Day03-AJAX-插件开发-备课项目实战-Lodash

常用JavaScript库 1 认识前端工具库前端工具类库 2 Lodash vs underscore underscore库 VS Lodash库 Lodash库的安装 Lodash库字符串、数组 Lodash库对象、集合、函数 3 Day.js vs Mement Moment.js库 VS Day.js库 Day.js库安装 Day.js获取、设置、操作时间 Day.js解析、…...

编程日记 2025/5/23 1:43:52

【论文阅读】平滑量化：对大型语言模型进行准确高效的训练后量化

论文题目：SmoothQuant: Accurate and Efficient Post-Training Quantization for Large Language Models 论文地址：[2211.10438] SmoothQuant: Accurate and Efficient Post-Training Quantization for Large Language Models 代码地址：http…...

编程日记 2025/6/22 7:02:46

mysql游标分页详解：让分页又快又稳的终极方案

一、什么是游标分页？ 游标分页是一种更高效的分页方式，它通过"记住当前位置"而不是"数页码"来实现分页。就像看书时夹书签一样，游标分页会记住你看到哪里了，下次直接从那里继续。传统分页 vs 游标分页传…...

编程日记 2025/6/22 14:27:20

图论---染色法（判断是否为二分图）

O(nm) 二分图：可以把所有的点划分到两边，使得边只在集合之间，集合内部没有边。二分图当且仅当图中不含奇数环（边数为奇数条） #include <iostream> #include <vector> #include <cstring> using …...

编程日记 2025/6/23 17:14:02

算法｜基于SSA-CNN-LSTM（麻雀算法优化卷积长短期记忆神经网络）的股票价格预测（附完整matlab代码，公式，原理，可用于毕业论文设计）

以下是一个基于SSA-CNN-LSTM（麻雀算法优化卷积长短期记忆神经网络）的股票价格预测MATLAB项目实例，包含完整代码和详细注释。代码分为数据预处理、模型构建、优化算法、训练预测四个部分。 🚜🚜🚜🚜🚜🚜🚜🚜🚜🚜🚜🚜🚜 1. 数据预处理 %% 数据加…...

编程日记 2025/5/10 8:58:13

在html中如何创建vue自定义组件（以自定义文件上传组件为例，vue2+elementUI）

1、先上代码：vueUpload.js var dom <div class"upload-file"><el-upload :action"uploadFileUrl" :before-upload"handleBeforeUpload" :file-list"fileList" :limit"limit":on-error"handleUpl…...

编程日记 2025/6/22 16:45:56

Asp.Net Core 基于(asp.net core 2.2) 创建asp .net core空项目

文章目录 ASP.NET Core 应用程序的标准入口点，用于配置和启动一个 Web 主机（WebHost）。`InProcess` 代码分析解决 HTTP Error 500.31 - Failed to load ASP.NET Core runtime 的完整方案**`launchSettings.json` 配置文件分析**ASP.NET Core 中的配置源详解ASP.NET Core 应用…...

编程日记 2025/6/21 7:31:49

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

具体实现方案如下所示：

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

相关文章：