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

本文将详细介绍如何在 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>

六、注意事项

1. 性能优化：

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

2. 内存管理：

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

3. 安全性：

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

七、总结

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

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

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