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(發送數據)