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

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

一、技术栈准备

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

二、项目初始化

1、创建 Vue3 项目：

1. npm create vue@latest mxgraph-websocket-demo
2. cd mxgraph-websocket-demo
3. npm install mxgraph

复制代码

2、引入 mxGraph 样式：

1. // main.ts
2. import 'mxgraph/javascript/mxClient'
3. import 'mxgraph/styles/mxgraph.css'

复制代码

三、核心组件开发

1. 画布组件设计

1. // components/GraphCanvas.vue
2. <template>
3.   <div ref="graphContainer" class="mxgraph" style="height: 600px;"></div>
4. </template>
6. <script setup lang="ts">
7. import { ref, onMounted, onUnmounted } from 'vue'
8. import { mxGraph, mxCell, mxConstants } from 'mxgraph'
10. const graphContainer = ref<HTMLDivElement | null>(null)
11. let graph: mxGraph | null = null
13. onMounted(() => {
14.   if (!graphContainer.value) return
16.   // 初始化画布
17.   graph = new mxGraph(graphContainer.value)
18.   const parent = graph.getDefaultParent()
20.   // 添加初始节点
21.   graph.getModel().beginUpdate()
22.   try {
23.     const cell1 = graph.insertVertex(parent, null, 'Node 1', 20, 20, 80, 30)
24.     const cell2 = graph.insertVertex(parent, null, 'Node 2', 200, 20, 80, 30)
25.     graph.insertEdge(parent, null, '', cell1, cell2)
26.   } finally {
27.     graph.getModel().endUpdate()
28.   }
29. })
31. onUnmounted(() => {
32.   if (graph) {
33.     graph.dispose()
34.   }
35. })
36. </script>
38. <style scoped>
39. .mxgraph {
40.   border: 1px solid #ccc;
41.   margin: 20px;
42. }
43. </style>

复制代码

 
四、WebSocket 集成

1. 通讯模块封装

1. // services/ws.ts
2. import { reactive, onMounted, onUnmounted } from 'vue'
4. interface WsState {
5.   socket: WebSocket | null
6.   messages: string[]
7.   connected: boolean
8. }
10. export const useWebSocket = () => {
11.   const state = reactive<WsState>({
12.     socket: null,
13.     messages: [],
14.     connected: false
15.   })
17.   const connect = (url: string) => {
18.     if (state.socket) return
20.     state.socket = new WebSocket(url)
21.     state.socket.onopen = () => {
22.       state.connected = true
23.     }
24.     state.socket.onmessage = (event) => {
25.       state.messages.push(event.data)
26.       // 解析消息并更新画布
27.       handleMessage(event.data)
28.     }
29.     state.socket.onclose = () => {
30.       state.connected = false
31.       setTimeout(() => connect(url), 3000)
32.     }
33.   }
35.   const handleMessage = (message: string) => {
36.     const data = JSON.parse(message)
37.     // 调用画布更新方法
38.     updateGraph(data)
39.   }
41.   return {
42.     connect,
43.     state
44.   }
45. }

复制代码

五、及时更新逻辑

1. 数据处理与视图更新

1. // components/GraphCanvas.vue
2. <script setup lang="ts">
3. // ... 省略之前的代码
5. // 引入WebSocket服务
6. import { useWebSocket } from '@/services/ws'
7. const { connect } = useWebSocket()
9. // 初始化WebSocket连接
10. onMounted(() => {
11.   connect('ws://localhost:8080/ws')
12. })
14. // 新增节点方法
15. const addVertex = (x: number, y: number, label: string) => {
16.   if (!graph) return
18.   graph.getModel().beginUpdate()
19.   try {
20.     graph.insertVertex(
21.       graph.getDefaultParent(),
22.       null,
23.       label,
24.       x,
25.       y,
26.       80,
27.       30,
28.       mxConstants.STYLE_SHAPE + '=ellipse;'
29.     )
30.   } finally {
31.     graph.getModel().endUpdate()
32.   }
33. }
35. // 接收WebSocket数据更新
36. const updateGraph = (data: any) => {
37.   if (data.type === 'add-node') {
38.     addVertex(data.x, data.y, data.label)
39.   }
40. }
41. </script>

复制代码

六、注意事项

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

七、总结

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

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

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

 

 
 
 


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。