worker 具体通讯方式

1.由 web page 发送消息- worker.postMessage(发送数据)
2.web worker 接收消息并执行相关逻辑- onmessage = (e) => { 接收数据并处理逻辑postMessage(传递处理后的数据)}
3.由 web page 监听 worker 消息，包括：- 处理数据的监听worker.onmessage = （得到处理的数据）=> {}- 执行中报错监听worker.onerror = (报错信息) => {}

Web Workers API 传送门

添加web worker - worker.ts

// 文件存储位置没具体固定，作者放在src/
onmessage = (e) => {console.log('发送来的数据'+e)postMessage(e)
}

引入、通信、监听报错、销毁

import MyWorker from '@/workers/index?worker'
const worker = new MyWorker()
// 向 Web Worker 发送数据
worker.postMessage({ type:'search2' })
//监听 Web Worker 返回的数据,并销毁
worker.onmessage = async (e) => {worker.terminate()console.log('接收数据'+e)
}
// 监听报错
worker.onerror = (err) => {console.error('Worker error:', err)worker.terminate()
}

new Blob

// 将一个函数转换为 blob，然后为这个 blob 生成 URL 对象
function fn2workerURL(fn) {const blob = new Blob([`(${fn.toString()})()`], { type: "text/javascript" });return URL.createObjectURL(blob);
}

new Worker

// 指定一个脚本的 URI 来执行 worker 线程
const myWorker = new Worker("worker文件URL");

进阶 web worker hooks

// 创建一个Web Worker实例
const createWorker = (workerScript: Function) => {const blob = new Blob(["(" + workerScript.toString() + ")()"], { type: "text/javascript" });const url = window.URL.createObjectURL(blob);return new Worker(url);
};
function useWebWorker(workerScript: Function) {const worker = ref(createWorker(workerScript));const message = ref(null);const error = ref<ErrorEvent | null>(null);worker.value.onmessage = (e) => {message.value = e.data;error.value = null;};worker.value.onerror = (e) => {message.value = null;error.value = e;};const postMessage = (msg: string | object) => worker.value.postMessage(msg);onUnmounted(() => worker.value.terminate());return { postMessage, message, error };
}
export default useWebWorker;

进阶 web worker 引入、使用

import useWebWorker from '@/hooks/webWorker'
// 设定 web worker 接收数据函数
const workerScript = function() {self.onmessage = function(e) {console.log('Worker received:99 ' + e.data)self.postMessage('Worker received: ' + e.data); };
};
// 获取 hooks 的数据
const { postMessage, message, error } = useWebWorker(workerScript);
postMessage(发送数据)