Web Woker与主线程通信场景下对postMessage的简洁封装详解

// 定义一个 WorkerMessage 类，用于向 Worker 发送消息并处理返回结果
let canStructuredClone;
export class WorkerMessage {
    constructor(workerUrl) {
        this.worker = new Worker(workerUrl);
        this.callbacks = new Map();
        canStructuredClone === undefined && this.isStructuredCloneSupported();
        // 监听从 Worker 返回的消息
        this.worker.addEventListener('message', event => {
            const {id, type, payload} = event.data;
            const callback = this.callbacks.get(id);
            if (!callback) {
                console.warn(`未知的消息 ID：${id}`);
                return;
            }
            switch (type) {
                case 'SUCCESS':
                    callback.resolve(payload);
                    break;
                case 'ERROR':
                    callback.reject(payload);
                    break;
                default:
                    console.warn('未知的消息类型：', type);
            }
            this.callbacks.delete(id);
        });
    }
    // 发送消息给 Worker
    postMessage(payload) {
        const id = Date.now().toString(36) + Math.random().toString(36).substr(2);
        const message = canStructuredClone ? {id, payload} : JSON.stringify({id, payload})
        this.worker.postMessage(message);
        return new Promise((resolve, reject) => {
            this.callbacks.set(id, {resolve, reject});
        });
    }
    // 关闭 Worker
    terminate() {
        this.worker.terminate();
    }
    // 判断当前浏览器是否支持结构化克隆算法
    isStructuredCloneSupported() {
        try {
            const obj = {data: 'Hello'};
            const clonedObj = window.postMessage ? window.postMessage(obj, '*') : obj;
            return canStructuredClone = clonedObj !== obj;
        } catch (error) {
            // 捕获到异常，说明浏览器不支持结构化克隆
            return canStructuredClone = false;
        }
    }
}

export class childMessage {
    constructor(self, config) {
        this.self = self;
        this.config = config;
    }
    // 监听从主线程传来的消息
    addEventListener(callback) {
        this.self.addEventListener('message', event => {
            const {id, payload} = event.data;
            const {type} = payload;
            try {
                const res = this.config[type](canStructuredClone ? payload.payload : JSON.parse(payload.payload));
                if (res instanceof Promise) {
                    res.then(data => {
                        this.self.postMessage({
                            id,
                            type: 'SUCCESS',
                            payload: canStructuredClone ? data : JSON.stringify(data)
                        });
                    }).catch(e => {
                        this.self.postMessage({id, type: 'ERROR', payload: e.toString()});
                    });
                } else {
                    this.self.postMessage({
                        id,
                        type: 'SUCCESS',
                        payload: canStructuredClone ? res : JSON.stringify(res)
                    });
                }
            } catch (e) {
                this.self.postMessage({id, type: 'ERROR', payload: e.toString()});
            } finally {
                callback?.();
            }
        });
    }
}

// 创建一个 WorkerMessage 实例，并指定要加载的 Worker 文件路径
import {WorkerMessage} from "../index.js";
console.log('WorkerMessage start')
const worker = new WorkerMessage('./worker.js');
// 发送一个消息给 Worker，并处理返回结果
worker.postMessage({type: 'CALCULATE', payload: 10}).then(
    result => {
        console.log('计算结果：', result);
    },
    error => {
        console.error('计算出错：', error);
    }
);
// 关闭 Worker 实例
// worker.terminate();
worker.postMessage({type: 'PLUS', payload: 10}).then(
    result => {
        console.log('计算结果：', result);
    },
    error => {
        console.error('计算出错：', error);
    }
);

import {childMessage} from "../index.js";
// 执行计算的函数
function doCalculate(num) {
    // 这里可以执行一些复杂的计算任务
    return num * 2;
}
function doPlus(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num + 1);
        }, 1000);
    });
}
const child = new childMessage(self, {
    CALCULATE: doCalculate,
    PLUS: doPlus
});
// 起到分发执行的效果
child.addEventListener(()=>{
    console.log('worker is listened');
});