Vue プロジェクトで jsmind を組み合わせて、マインド マップのリアルタイム共有と共同編集を実現するにはどうすればよいですか?

npm install jsmind --save

yarn add jsmind

import jsMind from 'jsmind';
import 'jsmind/style/jsmind-default.css';

mounted() {
  const jsmindContainer = this.$refs.jsmindContainer;
  const mindMap = {
    "meta": {
      "name": "思维导图",
      "author": "你的名字",
      "version": "1.0"
    },
    "format": "node_array",
    "data": [
      {"id":"root","isroot":true,"topic":"主题"}
    ]
  };
  this.jsMindInstance = new jsMind(jsmindContainer, mindMap);
},

npm install vue-native-websocket --save

yarn add vue-native-websocket

import VueNativeSock from 'vue-native-websocket';

Vue.use(VueNativeSock, 'ws://localhost:8080', {
  format: 'json',
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 3000
});

methods: {
  handleMindMapUpdate(data) {
    this.jsMindInstance.show(data);
  }
},
sockets: {
  mindMapUpdate(data) {
    this.handleMindMapUpdate(data);
  }
},

<template>
  <div ref="jsmindContainer"></div>
</template>

<script>
import jsMind from 'jsmind';
import 'jsmind/style/jsmind-default.css';

export default {
  mounted() {
    const jsmindContainer = this.$refs.jsmindContainer;
    const mindMap = {
      "meta": {
        "name": "思维导图",
        "author": "你的名字",
        "version": "1.0"
      },
      "format": "node_array",
      "data": [
        {"id":"root","isroot":true,"topic":"主题"}
      ]
    };
    this.jsMindInstance = new jsMind(jsmindContainer, mindMap);
  },
  methods: {
    handleMindMapUpdate(data) {
      this.jsMindInstance.show(data);
    }
  },
  sockets: {
    mindMapUpdate(data) {
      this.handleMindMapUpdate(data);
    }
  }
};
</script>

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    // 接收到新的思维导图数据
    // 广播给所有连接到服务器的客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});