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

Vue3 实战：基于 mxGraph 与 WebSocket 的动态流程图构建

news 来源：原创 2025/7/28 4:22:44

本文将详细介绍如何在 Vue3 项目中集成 mxGraph 可视化库，并通过 WebSocket 实现画布元素的实时更新。适合有 Vue 基础的前端开发者学习参考。

一、技术栈准备

Vue3：采用 Composition API 开发
mxGraph：JavaScript 流程图库（版本 2.1.0）
WebSocket：实现实时数据通信
TypeScript：可选（示例代码使用 TS）

二、项目初始化

1、创建 Vue3 项目：

npm create vue@latest mxgraph-websocket-demo
cd mxgraph-websocket-demo
npm install mxgraph

2、引入 mxGraph 样式：

// main.ts
import 'mxgraph/javascript/mxClient'
import 'mxgraph/styles/mxgraph.css'

三、核心组件开发

1. 画布组件设计

// components/GraphCanvas.vue
<template><div ref="graphContainer" class="mxgraph" style="height: 600px;"></div>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { mxGraph, mxCell, mxConstants } from 'mxgraph'const graphContainer = ref<HTMLDivElement | null>(null)
let graph: mxGraph | null = nullonMounted(() => {if (!graphContainer.value) return// 初始化画布graph = new mxGraph(graphContainer.value)const parent = graph.getDefaultParent()// 添加初始节点graph.getModel().beginUpdate()try {const cell1 = graph.insertVertex(parent, null, 'Node 1', 20, 20, 80, 30)const cell2 = graph.insertVertex(parent, null, 'Node 2', 200, 20, 80, 30)graph.insertEdge(parent, null, '', cell1, cell2)} finally {graph.getModel().endUpdate()}
})onUnmounted(() => {if (graph) {graph.dispose()}
})
</script><style scoped>
.mxgraph {border: 1px solid #ccc;margin: 20px;
}
</style>

四、WebSocket 集成

1. 通信模块封装

// services/ws.ts
import { reactive, onMounted, onUnmounted } from 'vue'interface WsState {socket: WebSocket | nullmessages: string[]connected: boolean
}export const useWebSocket = () => {const state = reactive<WsState>({socket: null,messages: [],connected: false})const connect = (url: string) => {if (state.socket) returnstate.socket = new WebSocket(url)state.socket.onopen = () => {state.connected = true}state.socket.onmessage = (event) => {state.messages.push(event.data)// 解析消息并更新画布handleMessage(event.data)}state.socket.onclose = () => {state.connected = falsesetTimeout(() => connect(url), 3000)}}const handleMessage = (message: string) => {const data = JSON.parse(message)// 调用画布更新方法updateGraph(data)}return {connect,state}
}

五、实时更新逻辑

1. 数据处理与视图更新

// components/GraphCanvas.vue
<script setup lang="ts">
// ... 省略之前的代码// 引入WebSocket服务
import { useWebSocket } from '@/services/ws'
const { connect } = useWebSocket()// 初始化WebSocket连接
onMounted(() => {connect('ws://localhost:8080/ws')
})// 新增节点方法
const addVertex = (x: number, y: number, label: string) => {if (!graph) returngraph.getModel().beginUpdate()try {graph.insertVertex(graph.getDefaultParent(),null,label,x,y,80,30,mxConstants.STYLE_SHAPE + '=ellipse;')} finally {graph.getModel().endUpdate()}
}// 接收WebSocket数据更新
const updateGraph = (data: any) => {if (data.type === 'add-node') {addVertex(data.x, data.y, data.label)}
}
</script>

六、注意事项

性能优化：
- 使用graph.getModel().beginUpdate()和endUpdate()包裹批量操作
- 对频繁更新的场景添加防抖处理
内存管理：
- 在组件卸载时调用graph.dispose()释放资源
- 正确关闭 WebSocket 连接
安全性：
- 对 WebSocket 消息进行格式校验
- 敏感操作添加身份验证

七、总结

本文通过完整的代码示例展示了 Vue3 + mxGraph + WebSocket 的组合应用，实现了动态流程图的实时更新功能。关键点包括：

mxGraph 的 Vue3 集成方法
WebSocket 的状态管理与重连机制
数据驱动的画布更新逻辑

通过这种技术组合，我们可以构建出具有实时交互能力的可视化应用，适用于流程监控、在线协作等场景。后续可以进一步扩展节点样式、布局算法和交互事件等功能。

Vue3 实战：基于 mxGraph 与 WebSocket 的动态流程图构建

本文将详细介绍如何在 Vue3 项目中集成 mxGraph 可视化库，并通过 WebSocket 实现画布元素的实时更新。适合有 Vue 基础的前端开发者学习参考。一、技术栈准备 Vue3：采用 Composition API 开发mxGraph：JavaScript 流程图库（版本 …...

编程日记 2025/7/28 4:22:44

Python-金融相关代码讲解

文章目录概要整体架构流程1.代码部分2.逐个讲解1）# -*- coding: utf-8 -*-2）基本库引入3）函数模块4）主程序小结1. 问题拆解思维2. 文件处理三件套3. 字典的妙用：4. 上下文管理器（with open...&#xff09…...

编程日记 2025/7/27 21:54:15

深度解读DeepSeek：开源周（Open Source Week）技术解读

深度解读DeepSeek：开源周（Open Source Week）技术解读深度解读DeepSeek：源码解读 DeepSeek-V3 深度解读DeepSeek：技术原理深度解读DeepSeek：发展历程文章目录一、开源内容概览Day1：FlashMLAD…...

编程日记 2025/7/28 4:15:47

【算法】十大排序算法(含时间复杂度、核心思想）

以下是 **十大经典排序算法** 的时间复杂度、空间复杂度及稳定性总结，适用于面试快速回顾：排序算法对比表排序算法最佳时间复杂度平均时间复杂度最差时间复杂度空间复杂度稳定性核心思想冒泡排序O(n)O(n)O(n)O(1)稳定相邻元素交换，大数沉底…...

编程日记 2025/7/24 10:45:27

TCP传输---计算机网络

TCP结构源端口和目标端口：标识通信的应用程序。序列号：标记发送的数据段的顺序序号。确认号 ( ACK)：确认接收到的数据序号。标志位：控制连接状态，包括 SYN（同步）、ACK（确认&#xf…...

编程日记 2025/7/28 4:21:57

创建vue2项目

1、前往 Node.js 官网下载并安装 Node.js，安装完成后，npm 会随之安装。确认 Node.js 和 npm 是否成功安装，可以在命令行中运行以下命令检查版本： node -v npm -v 运行结果：（如下，表示node和n…...

编程日记 2025/7/25 16:32:41

从投机到可持续发展：ETHDenver 2025 的关键启示！

ETHDenver 2025 重点讨论了 Web3 向可持续发展转型，特别强调了人才培养、去中心化治理和激励机制的紧密结合。Polkadot 一直以来的长期观点也进一步支持了行业从投机转向长期、社区驱动增长的趋势。随着 ETHDenver 2025 会议的的落幕，Polkadot 生态中的贡…...

编程日记 2025/7/28 4:16:25

WPS宏开发手册——使用、工程、模块介绍

目录系列文章前言1、开始1.1、宏编辑器使用步骤1.2、工程1.3、工程系列文章使用、工程、模块介绍 JSA语法第三篇练习练习题，持续更新中… 前言如果你是开发人员，那么wps宏开发对你来说手拿把切。反之还挺吃力，需要嘻嘻&#xf…...

编程日记 2025/7/27 11:47:53

操作系统为ubantu的服务器上部署nginx软件基础步骤总结

今天在这里，我们总结一下ubantu的服务器上部署nginx软件，请按照以下步骤进行安装： 1、更新包列表： 首先更新你系统中的可用软件包列表，以确保你可以安装最新版本。 sudo apt update2、 Ubuntu上更新已安装软件包&…...

编程日记 2025/7/27 10:48:42

批量给 PPT 文档添加或删除保护，批量设置打开密码和只读密码

为了保护保护档的安全，我们经常会给 PPT 文档添加打开密码或者只读密码保护。有些场景下，我们也可能会碰到需要删除 PPT 文档的打开密码或者只读密码的需求。今天就给大家介绍一种方法可以一次性批量给多个 PPT 文档添加打开密码或者只读密码保护&#x…...

编程日记 2025/7/17 1:19:56

Elasticsearch 中的数据分片问题

Elasticsearch 分片机制 Elasticsearch 在存储数据时采用分片（Shard）机制，以提高性能和可扩展性。它索引中的数据被划分成多个主分片（Primary Shard） 和副本分片（Replica Shard）&#xff0c…...

编程日记 2025/7/25 12:08:57

如何在IPhone 16Pro上运行python文件？

在 iPhone 16 Pro 上运行 Python 文件需要借助第三方工具或远程服务，以下是具体实现方法和步骤： 一、本地运行方案（无需越狱） 使用 Python 编程类 App 以下应用可在 App Store 下载，支持直接在 iPhone 上编写并运行 …...

编程日记 2025/7/24 19:04:27

Xinference安装、使用详细笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Xinference安装、使用详细笔记支持推理引擎安装Xinference启动Xinference关于模型的推理引擎运行 qwen2.5-instruct管理模型官方详细文档：具体使用：对…...

编程日记 2025/7/25 14:57:54

使用LVS的 NAT 模式实现 3 台RS的轮询访问。IP地址和主机自己规划。 1.节点规划主机角色系统网络IPclientclientredhat 9.5仅主机192.168.180.100/24lvslvsredhat 9.5仅主机 NAT192.168.180.200/24 VIP 192.168.72.8/24 DIPnginxrs1redhat 9.5NAT192.168.226.7/24nginxrs2r…...

编程日记 2025/7/26 11:29:31

【中间件】Rabbit离线部署操作

准备安装包： 1.rabbitmq-server-4.0.7-1.el8.noarch.rpm 2.erlang-26.2.5.4-1.el9.x86_64.rpm 3.socat-1.7.4.1-6.el9.x86_64.rpm 操作步骤： 1.上传将RabbitMQ文件夹上传至服务器的home中 2.先安装erlang服务，顺序执行以下命令设置服务的S…...

编程日记 2025/7/28 4:20:06

thinkphp漏洞再现

Thinkphp5x远程命令执行及getshell 1、开环境 2、使用工具攻击开启工具输入地址，点击漏洞检测存在漏洞之后，选择漏洞，执行命令 3、也可以执行远程命令执行命令 ?sindex/think\app/invokefunction&functioncall_user_func_array&…...

编程日记 2025/7/17 20:28:48

a-date-picker 格式化日期格式 YYYY-MM-DD HH:mm:ss

<template><a-range-pickerv-model:value"dateRange":show-time"{ format: HH:mm:ss, // 时间部分格式defaultValue: [moment(00:00:00, HH:mm:ss), moment(23:59:59, HH:mm:ss)] // 默认时间范围}"format"YYYY-MM-DD HH:mm:ss" // 整体…...

编程日记 2025/7/28 4:20:07

【前端】在＜el-form＞里循环插入list内容

这里的list为日志list【logList】 <el-row v-if"logList && logList.length > 0" style"display: flex; flex-direction: column; align-items: center;"><el-rowv-for"(log, index) in logList" :key"index" s…...

编程日记 2025/7/25 23:00:00

Spring Boot 一个接口实现任意表的 Excel 导入导出

Java的web开发需要excel的导入导出工具，所以需要一定的工具类实现，如果是使用easypoi、Hutool导入导出excel，会非常的损耗内存，因此可以尝试使用easyexcel解决大数据量的数据的导入导出，且可以通过Java8的函数式编程解…...

编程日记 2025/7/28 4:20:46

华为交换相关

端口模式 （1）access：只能属于单个VLAN，一般用于连接计算机端口 （2）trunk：端口允许多个VLAN通过，可以接收和发送多个VLAN报文，默认情况下只有管理VLAN不携带标签信息 &…...

编程日记 2025/7/25 18:56:26

「宇树科技」13家核心零部件供应商梳理！

2025年2月6日，摩根士丹利（Morgan Stanley）发布最新人形机器人研报：Humanoid 100: Mapping the Humanoid Robot Value Chain（人形机器人100：全球人形机器人产业链梳理）。 2025年2月20日&#xf…...

编程日记 2025/7/23 22:39:42

Kafka Snappy 压缩异常分析与解决方案

1. 问题描述在使用 Kafka 进行消息发送时，遇到了以下异常： org.apache.kafka.common.KafkaException: java.lang.UnsatisfiedLinkError: /tmp/snappy-1.1.7-ee0a2284-1d05-4116-9ddc-a0d5d4b3f8cd-libsnappyjava.so: Error loading shared library ld…...

编程日记 2025/7/27 9:34:00

Agent系列——Manus调研

一、Manus核心技术解析（代码实现原理） 1. 多智能体协同架构 class PlanningAgent: # 任务规划代理def decompose_task(self, task):return ["unzip_files", "extract_info", "match_skills"]class ExecutionAgent: # …...

编程日记 2025/7/27 22:48:20

CS实现票据样式效果

效果图代码 <template> <div class"outer"><div class"outer-container"></div></div> </template> <script langts> import { reactive, toRefs, onBeforeMount, onMounted } from vue import { useRouter, …...

编程日记 2025/7/28 4:17:59

Maven 简介及其核心概念

Maven 是 Apache 软件基金会组织维护的一款自动化构建工具，专注服务于 Java 平台的项目构建和依赖管理。官网： Introduction – Maven 下载地址： Download Apache Maven – Maven 1 Introduction Maven, a Yiddish word meaning accumulator of knowledge, began as an …...

编程日记 2025/7/28 4:15:46

阿里开源的免费数据集成工具——DataX

企业里真实的数据流转是什么样子的呢？ 左侧描述了一个企业真实的样子，我们总是需要把数据从一个地方搬到另一个地方，最后就是搬来搬去搬成了一张张解不开的网。右侧则表达了使用DataX为中心实现数据的同步。什么是DataX DataX是一个异构…...

编程日记 2025/7/26 9:38:02

医学图像分割数据集肺分割数据labelme格式6299张2类别

数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图像分辨率：1024x1024 图片数量(jpg文件个数)：6299 标注数量(json文件个数)：6299 标注类别数：2 标注类别名称:["leftl…...

编程日记 2025/7/23 15:18:37

Spring IoC的设计与实现

IoC,Inversion of Control 控制反转，将原本由应用程序负责对象创建的工作，交给IOC容器来完成。容器通过依赖注入（DI，Dependency Injection）来实现。作用：降低类对象之间的耦合度，减少代码量。…...

编程日记 2025/7/11 23:32:13

微信小程序开发：页面结构与样式设计

微信小程序页面结构与样式设计研究摘要微信小程序作为移动互联网的重要应用形式，其页面结构与样式设计对于用户体验和功能实现具有关键作用。本文深入探讨微信小程序的页面结构与样式设计，包括WXML语法与页面结构搭建、WXSS样式编写与页面美化提升以…...

编程日记 2025/7/27 2:41:37

Linux paste命令

目录一. 简介二. 基本语法三. 小案例一. 简介 paste 命令用于合并多个文件的行，按列方式输出，默认以制表符（Tab）分隔。 ⏹基本语法 paste [选项] 文件1 文件2 ...二. 基本语法 <()的方式模拟文件流paste命令将2个文件流粘…...

编程日记 2025/7/22 19:53:40

关于Object.assign

Object.assign 基本用法 Object.assign() 方法用于将所有可枚举属性的值从一个或者多个源对象source复制到目标对象。它将返回目标对象target const target { a: 1, b: 2 } const source { b: 4, c: 5 }const returnedTarget Object.assign(target, source)target // { a…...

编程日记 2025/7/27 22:49:21

新能源汽车充换站如何实现光储充一体化管理？

长三角某换电站光伏板晒到发烫，却因电网限电被迫切机；北京五环充电站每月多缴6万超容费；深圳物流车充电高峰排队3小时...当95%的充换站深陷“用不起绿电、扛不住扩容、算不清碳账”困局，安科瑞用一组真实数据撕开行业潜规则&#…...

编程日记 2025/6/27 21:16:47

Flink 流处理框架的核心特性

文章目录事件时间支持Flink状态编程一、状态的类型1. 托管状态（Managed State）2. 原始状态（Raw State） 二、状态的管理和容错 Flink端到端的一致性1、检查点机制2、幂等3、事务水位线窗口操作1、窗口类型2、窗口操作的时间语义 …...

编程日记 2025/7/17 6:27:20

蓝桥杯之AT24C02的页写页读

一、原理： 1、页写：一次性向AT24C02里的多个数据存储单元地址写入多个数据 （1）在AT24C02的页写模式下，每次写入数据后，存储单元地址会自动加1。 （2）一页有8个数据存储单元&#xff…...

编程日记 2025/7/27 7:55:02

计算机二级web易错点（7）-选择题

在 JavaScript 中，substr() 方法用于从字符串中提取子字符串。它接受两个参数，第一个参数表示开始提取的位置（索引从 0 开始），第二个参数表示要提取的字符数量。在代码 var str"abcdefgh"; alert(str.subs…...

编程日记 2025/7/27 8:55:32

WordPress子主题插件 Child Theme Configurator

一、插件介绍 Child Theme Configurator 是一款强大的 WordPress 插件，专为创建和管理子主题（Child Theme）而设计。使用子主题可以安全地自定义 WordPress 站点，而不会影响原主题（Parent Theme），同时确保主题更新时不会丢失修改。该插件适用于初学者和高级开发者，提…...

编程日记 2025/7/22 16:59:09

[网鼎杯 2020 白虎组]PicDown1 [反弹shell] [敏感文件路径] [文件描述符]

常见读取路径 /etc/passwd一些用户和权限还有一些乱七八糟的 /proc/self/cmdline包含用于开始当前进程的命令 /proc/self/cwd/app.py当前工作目录的app.py /proc/self/environ包含了可用进程的环境变量 /proc/pid/exe 包含了正在进程中运行的程序链接； /proc/pid…...

编程日记 2025/7/28 4:21:21

基于Spring Boot的乡村养老服务管理系统的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/7/21 14:07:24

ElasticSearch 可观测性最佳实践

ElasticSearch 概述 ElasticSearch 是一个开源的高扩展的分布式全文检索引擎，它可以近乎实时的存储、检索数据；本身扩展性很好，可以扩展到上百台服务器，处理 PB 级别（大数据时代）的数据。ES 也使用 Java 开…...

编程日记 2025/7/17 10:33:03

Java----正则表达式的学习

正则表达式可以检验字符串是否满足一定规则，并用来校验数据格式的合法性。在一段文本当中查找满足需求的内容： import java.math.BigDecimal; import java.math.BigInteger; import java.util.Random;import static java.lang.Math.abs; import static…...

编程日记 2025/7/28 4:11:29

为何AI系统比以往任何时候都更需要红队测试

AI 系统已深度融入现代生活，但并非无懈可击。红队测试作为一项关键技术，正通过系统性地挖掘 AI 漏洞，显著提升其安全性与可靠性。随着人工智能技术的快速迭代，这种全面测试的需求愈发迫切，不仅能防范潜在危害&#xff…...

编程日记 2025/7/27 10:28:21

ElementPlus 快速入门

目录前言为什么要学习 ElementPlus？ 正文步骤 1 创建一个工程化的vue 项目 2 安装 element-Plus :Form 表单 | Element Plus 1 点击当前界面的指南 2 点击左边菜单栏上的安装，选择包管理器 3 运行该命令 demo(案例1 ） 步骤 …...

编程日记 2025/7/25 13:42:45

vue3 ts 请求封装后端接口

一首页-广告区域-小程序首页-广告区域-小程序 GET/home/banner1.1 请求封装首页-广告区域 home.ts export const getHomeBannerApi (distributionSite 1) > {return http<BannerItem[]>({method: GET,url: /home/banner,data: {distributionSite,},}) }函数定…...

编程日记 2025/7/24 21:15:51

[ACTF2020 新生赛]BackupFile-3.23BUUCTF练习day5(1)

[ACTF2020 新生赛]BackupFile-3.23BUUCTF练习day5(1) 解题过程打开题目环境看题目意思应该是让我找备份文件备份文件一般的后缀名为 .rar .zip .7z .tar.gz .bak .swp .txt .html .bak 直接扫描一下在url中输入/index.php.bak 弱类型比较为弱相等，即当…...

编程日记 2025/7/25 10:33:28

信创-人大金仓数据库创建

一. 官文资源下载地址 https://download.kingbase.com.cn/xzzx/index.htm 下载安装文件下载授权文件产品文档地址：https://help.kingbase.com.cn/v8/index.html 二. 概念 2.1 体系结构 ‌ 实例结构 ‌：由数据库文件和 KingbaseES 实例组成。数据…...

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

【QT】QTCreator测试程序

使用QTCreator实现窗体，其中拟合程度图左侧是测点列表，右侧是改测点的拟合程度图（不使用UI，使用代码编写实现） 实现思路创建主窗口：继承 QMainWindow 类来创建主窗口。布局管理：使用 QSplitt…...

编程日记 2025/7/22 11:14:21

Python入门基础

python基础类型转换 str()与int()类型转换 name 张三 age 20 print(type(name),type(age))print(我叫name 今年， str(age)岁 )a10 b198.8 cFalse print(type(a),type(b),type(c)) print(str(a),str(b),str(c))s1 128 f198.7 s276.77 ffTrue s3hello print(type(s…...

编程日记 2025/7/14 19:05:33