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

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

一、技术栈准备

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

二、项目初始化

1、创建 Vue3 项目：

bash 复制代码

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

2、引入 mxGraph 样式：

javascript 复制代码

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

三、核心组件开发

1. 画布组件设计

javascript 复制代码

// 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 = null

onMounted(() => {
  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. 通信模块封装

javascript 复制代码

// services/ws.ts
import { reactive, onMounted, onUnmounted } from 'vue'

interface WsState {
  socket: WebSocket | null
  messages: string[]
  connected: boolean
}

export const useWebSocket = () => {
  const state = reactive<WsState>({
    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. 数据处理与视图更新

javascript 复制代码

// 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) 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)
  }
}
</script>

六、注意事项

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

七、总结

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

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

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