当前位置：首页 > news >正文

Vue3 + Vite + TS,使用 Web Worker，web worker进阶 hooks

news 来源：原创 2025/6/20 4:35:14

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(发送数据)