vue-使用Worker实现多标签页共享一个WebSocket

// Vue 组件中使用 Web Worker 与 WebSocket 的示例
<template>
  <div>
    <button @click="startWorker">开始工作</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      worker: null,
    };
  },
  methods: {
    startWorker() {
      if (this.worker) {
        this.worker.terminate();
      }
      this.worker = new Worker('./worker.js'); // 假设有一个 worker.js 文件
      this.worker.onmessage = ({ data }) => {
        console.log('来自 Worker 的数据:', data);
      };
      this.worker.postMessage({ type: 'start', data: '你的 WebSocket URL' });
    },
  },
  beforeDestroy() {
    if (this.worker) {
      this.worker.terminate();
    }
  },
};
</script>

在这个例子中，我们创建了一个 Vue 组件，其中包含一个按钮用于启动 Web Worker。点击按钮后，如果 Worker 已经存在，则终止它，并创建一个新的 Worker 实例。我们假设有一个 worker.js 文件，它将处理 WebSocket 的连接和数据处理。在组件销毁之前，我们确保终止 Worker 以释放资源。