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

news2025/3/26 21:53:54

本文将详细介绍如何在 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 = 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. 通信模块封装

// 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. 数据处理与视图更新

// 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 消息进行格式校验
- 敏感操作添加身份验证