vue-使用Worker实现多标签页共享一个WebSocket
warning:
这篇文章距离上次修改已过215天,其中的内容可能已经有所变动。
// 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 以释放资源。
评论已关闭