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

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

一、技术栈准备

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

二、项目初始化

1、创建 Vue3 项目：

npm create vue@latest mxgraph-websocket-democd mxgraph-websocket-demonpm install mxgraph

2、引入 mxGraph 样式：

// main.tsimport \'mxgraph/javascript/mxClient\'import \'mxgraph/styles/mxgraph.css\'

三、核心组件开发

1. 画布组件设计

// components/GraphCanvas.vue 
import { ref, onMounted, onUnmounted } from \'vue\'import { mxGraph, mxCell, mxConstants } from \'mxgraph\'const graphContainer = ref(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() }}).mxgraph { border: 1px solid #ccc; margin: 20px;}

四、WebSocket 集成

1. 通信模块封装

// services/ws.tsimport { reactive, onMounted, onUnmounted } from \'vue\'interface WsState { socket: WebSocket | null messages: string[] connected: boolean}export const useWebSocket = () => { const state = reactive({ socket: null, messages: [], connected: false }) const connect = (url: string) => { if (state.socket) return state.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 = false setTimeout(() => connect(url), 3000) } } const handleMessage = (message: string) => { const data = JSON.parse(message) // 调用画布更新方法 updateGraph(data) } return { connect, state }}

五、实时更新逻辑

1. 数据处理与视图更新

// components/GraphCanvas.vue// ... 省略之前的代码// 引入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) return graph.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) }}

六、注意事项

1. 性能优化：

   • 使用graph.getModel().beginUpdate()和endUpdate()包裹批量操作
   • 对频繁更新的场景添加防抖处理

2. 内存管理：

   • 在组件卸载时调用graph.dispose()释放资源
   • 正确关闭 WebSocket 连接

3. 安全性：

   • 对 WebSocket 消息进行格式校验
   • 敏感操作添加身份验证

七、总结

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

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

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