WebWorker-专用线程-从0到1实现一个小型comlink(仿comlink)

//先不用在意ts类型
const expose = (
    rawObject: unknown,
    ep: Endpoint = globalThis as any,
    allowedOrigins: string[] = ['*']
) => {
    ep.addEventListener('message', function call(ev: MessageEvent<MessageValue<WireValue>>) {
        if (!ev || !ev.data) return; //TODO catchError;
        if (!allowedOrigins.includes(`*`) && !allowedOrigins.includes(ev.origin as (typeof allowedOrigins)[number])) return; //TODO catchError;
		const { id, path = [], type, value } = ev.data; //这里是内部用于传递数据的自定义类型
        const parentObj = path.slice(0, -1).reduce((obj, prop) => obj[prop], rawObject);//取到其父对象，用其父对象调用方法，保证this指向不变
        const propKey = path.slice(-1)[0];
        let returnValue: any;
        switch (type) {
            case MessageType.GET:
                {
                    returnValue = parentObj[propKey];
                }
                break;
            default:
                {
                    returnValue = undefined;
                }
                break;
        }
        if ('start' in ep) ep.start();
        ep.postMessage(
            {
                id,
              	returnValue
            }
        );
    });
    if ('start' in ep) {
		ep.start();
	}
};

const createMessage = (ep: Endpoint, obj: Partial<MessageValue>, transfer?: Transferable[]) => {
	const id = generateUUID();//创建一个随机ID，用于区分不同的消息，因为存在多个文件调用同一个worker的情况，所以需要一个id去确认使用的双方
	return new Promise((_res, _rej) => {
		ep.addEventListener('message', function call(ev: MessageEvent<MessageValue>) {
			if (!ev || !ev.data || ev.data.id !== id) return _rej();//这里应该直接return，后面会改动，并赋有解释
			ep.removeEventListener('message', call);
			_res(ev.data);
		});
		if ('start' in ep) ep.start();
		ep.postMessage(
			{
				id,
				...obj,
			},
			transfer
		);
	});
};

const wrap = (ep: Endpoint) => {
	return createProxy(ep);
};
const createProxy = (ep: Endpoint, path: string[] = []) => {
	const proxy = new Proxy(
		{},//这里应该function(){}，后面会改动，并赋有解释
		{
			get(_, prop) {
				if (prop === 'then') {//这里表示只有 prop 为 then 时才发送消息执行取值操作，体现在 Comlink 上就是针对代理对象的操作都需要使用 await 获取。
					//thenable
					const r = createMessage(ep, {
						type: MessageType.GET,
						path: path,
					})
					return r.then.bind(r);//这里必须要返回bind之后的then
				}
				return createProxy(ep, [...path, prop]);
			},
		}
	);
	return proxy;
};

//main.js
import { wrap } from './harverWorker.js';
const proxy = wrap(new Worker('./worker1.js'));
console.log(await proxy.name);//22
console.log(proxy.name);//proxy
 
//worker1.js
importScripts('selfWorker.js');
// 要共享的对象或函数
const myObject = {
	name: '22',
};
MyWorker.expose(myObject);

const map = new Map();
const proxy = new Proxy(map, {});
console.log(proxy.set === new Map().set)//true
proxy.set('test', 1); // Error

const proxy = new Proxy(map, {
  get(target, property, receiver) {
    const value = Reflect.get(target, property, receiver)
    if (target instanceof Map) {
      value = value.bind(target)
    }
    return value
  },
})
 

const createProxy = (ep: Endpoint, path: string[] = []) => {
    const proxy = new Proxy(
        {},
        {
            get(_, prop) {
                if (prop === 'then') {
                    const r = createMessage(ep, {
                        type: MessageType.GET,
                        path: path,
                    });
                    return r.then.bind(r);
                }
                return createProxy(ep, [...path, prop]);
            },
            set(_, prop, newValue) {
                return createMessage(ep, {
                    type: MessageType.SET,
                    path: [...path, prop].map(p => p.toString()),
                    value: newValue,
                })
            },
        }
    );
    return proxy;
};
 

	switch (type) {
			case MessageType.GET:
				{
					returnValue = parentObj[propKey];
				}
				break;
			case MessageType.SET:
				{
					parentObj[propKey] = value;
					returnValue = true;
				}
				break;
			default:
				{
					returnValue = undefined;
				}
				break;
		}

//expose
switch (type) {
    case MessageType.GET:
        {
            returnValue = parentObj[propKey];
        }
        break;
    case MessageType.SET:
        {
            parentObj[propKey] = value;
            returnValue = true;
        }
        break;
    case MessageType.APPLY:
        {
            returnValue = parentObj[propKey].apply(parentObj, ...value);
        }
        break;
    default:
        {
            returnValue = undefined;
        }
        break;
}

//createProxy
const createProxy = (ep: Endpoint, path:string[] = []) => {
	const proxy = new Proxy(function () {}, {
		get(_, prop) {
			if (prop === 'then') {
				//这里表示只有 prop 为 then 时才发送消息执行取值操作，体现在 Comlink 上就是针对代理对象的操作都需要使用 await 获取。
				//thenable
				const r = createMessage(ep, {
					type: MessageType.GET,
					path: path,
				});
				return r.then.bind(r);
			}
			return createProxy(ep, [...path, prop]);
		},
		set(_, prop, newValue) {
			return createMessage(ep, {
				type: MessageType.SET,
				path: [...path, prop].map(p => p.toString()),
				value: newValue,
			}) as any;
		},
		apply(_, __, rawArgumentList) {
			return createMessage(ep, {
				type: MessageType.APPLY,
				path: [...path].map(p => p.toString()),
				value: rawArgumentList,
			}) as any;
		},
	});
	return proxy;
};

 
const transferCacheObject = new WeakMap<any, Transferable[]>();
 
const fromWireValue = (val: WireValue) => {
	switch (val.type) {
		case ValueType.RAW: {
			return val.value;
		}
	}
};
const toWireValue = (val: any): [WireValue, Transferable[]] => {
	return [
		{
			type: ValueType.RAW,
			value: val,
		},
		transferCacheObject.get(val) ?? [],
	];
};
const transfer = <T>(obj: T, transfers: Transferable[]) => {
	transferCacheObject.set(obj, transfers);
	return obj;
};

const createProxy = (ep: Endpoint, path:string[] = []) => {
	const proxy = new Proxy(function () {}, {
		get(_, prop) {
			if (prop === 'then') {
				//这里表示只有 prop 为 then 时才发送消息执行取值操作，体现在 Comlink 上就是针对代理对象的操作都需要使用 await 获取。
				//thenable
				const r = createMessage(ep, {
					type: MessageType.GET,
					path: path,
				}).then(fromWireValue);
				return r.then.bind(r);
			}
			return createProxy(ep, [...path, prop]);
		},
		set(_, prop, newValue) {
			const [wireValue, transfer] = toWireValue(newValue);
			return createMessage(
				ep,
				{
					type: MessageType.SET,
					path: [...path, prop].map(p => p.toString()),
					value: wireValue,
				},
				transfer
			) as any;
		},
		apply(_, __, rawArgumentList) {
			const [wireValues, transfers] = rawArgumentList.map(toWireValue).reduce(
				(array, cur) => {
					array = [
						[...array[0], cur[0]],
						[...array[1], ...cur[1]],
					];
 
					return array;
				},
				[[], []]
			);
			return createMessage(
				ep,
				{
					type: MessageType.APPLY,
					path: [...path].map(p => p.toString()),
					value: wireValues,
				},
				transfers
			).then(fromWireValue) as any;
		},
	});
	return proxy;
};
 
const expose = (rawObject: unknown, ep: Endpoint = globalThis as any, allowedOrigins: string[] = ['*']) => {
	ep.addEventListener('message', function call(ev: MessageEvent<MessageValue<any>>) {
		if (!ev || !ev.data) return; //TODO catchError;
		if (!allowedOrigins.includes(`*`) && !allowedOrigins.includes(ev.origin as (typeof allowedOrigins)[number])) return; //TODO catchError;
		const { id, path = [], type, value } = ev.data; //这里是内部用于传递数据的自定义类型
		const parentObj = path.slice(0, -1).reduce((obj, prop) => obj[prop], rawObject); //取到其父对象，用其父对象调用方法，保证this指向不变
		const propKey = path.slice(-1)[0] as any;
		let returnValue: any;
		switch (type) {
			case MessageType.GET:
				{
					returnValue = parentObj[propKey];
				}
				break;
			case MessageType.SET:
				{
					parentObj[propKey] = fromWireValue(value);
					returnValue = true;
				}
				break;
			case MessageType.APPLY:
				{
					returnValue = parentObj[propKey].apply(parentObj, value.map(fromWireValue));
				}
				break;
			default:
				{
					returnValue = undefined;
				}
				break;
		}
		if ('start' in ep) ep.start();
		Promise.resolve(returnValue).then(value => {
			const [wireValue, transfer] = toWireValue(value);
			ep.postMessage(
				{
					...wireValue,
					id,
				},
				transfer
			);
		});
	});
    if ('start' in ep) {
		ep.start();
	}
};

const transferHandle: Handle = {
	canHandle: (obj: unknown) => isObject(obj) && obj[proxyMarker],
	serialize: (obj: unknown): [MessagePort, Transferable[]] => {
		const { port1, port2 } = new MessageChannel();
		expose(obj, port1); //这里要分清楚是在主线程环境下调用的还是在worker下调用的proxy()，如果是在主线程，那么是worker线程传递消息给主线程，主线程处理消息，反之则是worker线程处理消息
		return [port2, [port2]]; //将另一个port传递给信道的另一端
	},
	deserialize: (port2: MessageChannel['port1']) => {
		if ('start' in port2) port2.start();
		return wrap(port2); //接受传递来的另一端口，并将其交给proxy
	},
};
const handles = new Map<string, Handle>([['proxyMarker', transferHandle]]);
const fromWireValue = (val: WireValue) => {
	switch (val.type) {
		case ValueType.RAW: {
			return val.value;
		}
		case ValueType.HANDLER: {
			return handles.get(val.name).deserialize(val.value);
		}
	}
};
const toWireValue = (val: any): [WireValue, Transferable[]] => {
	for (const [name, handle] of handles) {
		if (handle.canHandle(val)) {
			const [value, transfer] = transferHandle.serialize(val);
			return [
				{
					type: ValueType.HANDLER,
					value,
					name,
				},
				transfer,
			];
		}
	}
 
	return [
		{
			type: ValueType.RAW,
			value: val,
		},
		transferCacheObject.get(val) ?? [],
	];
};
const proxy = (obj: Record<string, any>) => {
	return Object.assign(obj, { [proxyMarker]: true });
};

function callback(value) {
	alert(`Result: ${value}`);//window独有，worker中不存在
}
async function init() {
	const remoteFunction = wrap(new Worker('worker1.js'));
	await remoteFunction(proxy(callback));
}
 
init();
 
//worker
async function remoteFunction(cb) {
	await cb('A string from a worker');
}
MyWorker.expose(remoteFunction);

const releaseProxy = Symbol('releaseProxy');
const proxyFinalizers =
	'FinalizationRegistry' in globalThis &&
	new FinalizationRegistry((ep: Endpoint) => {
		proxyCount.set(ep, (proxyCount.get(ep) ?? 1) - 1);
		if (!proxyCount.get(ep)) {
			releaseEndpoint(ep);
		}
	});
 
function isMessagePort(endpoint: Endpoint): endpoint is MessagePort {
	return endpoint.constructor.name === 'MessagePort';
}
 
function closeEndPoint(endpoint: Endpoint) {
	if (isMessagePort(endpoint)) endpoint.close();
}
const releaseEndpoint = (ep: Endpoint) => {
	return createMessage(ep, { type: MessageType.RELEASE }).then(_ => {
		closeEndPoint(ep);
	});
};
const unregisterProxy = (proxy: any) => {
	if (proxyFinalizers) {
		proxyFinalizers.unregister(proxy);
	}
};
const registerProxy = (proxy: any, ep: Endpoint) => {
	proxyCount.set(ep, (proxyCount.get(ep) ?? 0) + 1);
	if (proxyFinalizers) {
		proxyFinalizers.register(proxy, ep, proxy);
	}
};
const throwIfProxyReleased = (isReleased: boolean) => {
	if (isReleased) {
		throw new Error('Proxy has been released and is not useable');
	}
};
 
const createProxy = (ep: Endpoint, path: string[] = []) => {
	let isProxyReleased = false;
	const proxy = new Proxy(function () {}, {
		get(_, prop) {
			throwIfProxyReleased(isProxyReleased);
			if (prop === releaseProxy) {
				return () => {
					unregisterProxy(proxy);
					releaseEndpoint(ep);
					isProxyReleased = true;
				};
			}
			if (prop === 'then') {
				//这里表示只有 prop 为 then 时才发送消息执行取值操作，体现在 Comlink 上就是针对代理对象的操作都需要使用 await 获取。
				//thenable
				const r = createMessage(ep, {
					type: MessageType.GET,
					path: path,
				}).then(fromWireValue);
				return r.then.bind(r);
			}
			return createProxy(ep, [...path, prop]);
		},
		set(_, prop, newValue) {
			const [wireValue, transfer] = toWireValue(newValue);
			return createMessage(
				ep,
				{
					type: MessageType.SET,
					path: [...path, prop].map(p => p.toString()),
					value: wireValue,
				},
				transfer
			) as any;
		},
		apply(_, __, rawArgumentList) {
			const [wireValues, transfers] = rawArgumentList.map(toWireValue).reduce(
				(array, cur) => {
					array = [
						[...array[0], cur[0]],
						[...array[1], ...cur[1]],
					];
 
					return array;
				},
				[[], []]
			);
			return createMessage(
				ep,
				{
					type: MessageType.APPLY,
					path: [...path].map(p => p.toString()),
					value: wireValues,
				},
				transfers
			).then(fromWireValue) as any;
		},
	});
	registerProxy(proxy, ep);
	return proxy;
};
 
const expose = (rawObject: unknown, ep: Endpoint = globalThis as any, allowedOrigins: string[] = ['*']) => {
	ep.addEventListener('message', function call(ev: MessageEvent<MessageValue<any>>) {
		if (!ev || !ev.data) return; //TODO catchError;
		if (!allowedOrigins.includes(`*`) && !allowedOrigins.includes(ev.origin as (typeof allowedOrigins)[number])) return; //TODO catchError;
		const { id, path = [], type, value } = ev.data; //这里是内部用于传递数据的自定义类型
		const parentObj = path.slice(0, -1).reduce((obj, prop) => obj[prop], rawObject); //取到其父对象，用其父对象调用方法，保证this指向不变
		const rawValue = path.reduce((obj, prop) => obj[prop], rawObject) as any;
 
		let returnValue: any;
		switch (type) {
			case MessageType.GET:
				{
					returnValue = rawValue;
				}
				break;
			case MessageType.SET:
				{
					parentObj[path.slice(-1)[0]] = fromWireValue(value);
					returnValue = true;
				}
				break;
			case MessageType.APPLY:
				{
					returnValue = rawValue.apply(parentObj, value.map(fromWireValue));
				}
				break;
			case MessageType.RELEASE:
			default:
				{
					returnValue = undefined;
				}
				break;
		}
		if ('start' in ep) ep.start();
		Promise.resolve(returnValue).then(value => {
			const [wireValue, transfer] = toWireValue(value);
			ep.postMessage(
				{
					...wireValue,
					id,
				},
				transfer
			);
			if (type === MessageType.RELEASE) {
				//释放
				ep.removeEventListener('message', call as any);
				closeEndPoint(ep);
			}
		});
	});
	if ('start' in ep) {
		ep.start();
	}
};

const throwMarker = Symbol('error');
const throwHandler: Handle<ErrorValue, any> = {
	canHandle: value => isObject(value) && obj[throwMarker],
	serialize(obj: unknown) {
		if (obj instanceof Error) {
			return [
				{
					isError: true,
					value: {
						message: obj.message,
						name: obj.name,
						stack: obj.stack,
					},
				},
				[],
			];
		} else {
			return [{ isError: false, value: obj }, []];
		}
	},
	deserialize(serialized) {
		if (serialized.isError) {
			throw Object.assign(new Error(serialized.value.message), serialized.value);
		}
		throw serialized.value;
	},
};
const handles = new Map<string, Handle<any, any>>([
	['proxyMarker', transferHandle],
	['throwMarker', throwHandler],
]);
const expose = (rawObject: unknown, ep: Endpoint = globalThis as any, allowedOrigins: string[] = ['*']) => {
	ep.addEventListener('message', function call(ev: MessageEvent<MessageValue<any>>) {
		if (!ev || !ev.data) return; //TODO catchError;
		if (!allowedOrigins.includes(`*`) && !allowedOrigins.includes(ev.origin as (typeof allowedOrigins)[number])) return; //TODO catchError;
		const { id, path = [], type, value } = ev.data; //这里是内部用于传递数据的自定义类型
		let returnValue: any;
		try {
			const parentObj = path.slice(0, -1).reduce((obj, prop) => obj[prop], rawObject); //取到其父对象，用其父对象调用方法，保证this指向不变
			const rawValue = path.reduce((obj, prop) => obj[prop], rawObject) as any;
 
			switch (type) {
				case MessageType.GET:
					{
						returnValue = rawValue;
					}
					break;
				case MessageType.SET:
					{
						parentObj[path.slice(-1)[0]] = fromWireValue(value);
						returnValue = true;
					}
					break;
				case MessageType.APPLY:
					{
						returnValue = rawValue.apply(parentObj, value.map(fromWireValue));
					}
					break;
				case MessageType.RELEASE:
				default:
					{
						returnValue = undefined;
					}
					break;
			}
		} catch (value) {
			returnValue = { value, throwMarker: true };
		}
 
		Promise.resolve(returnValue)
			.catch(value => {
				return { value, [throwMarker]: 0 };
			})
			.then(value => {
				const [wireValue, transfer] = toWireValue(value);
				ep.postMessage(
					{
						...wireValue,
						id,
					},
					transfer
				);
				if (type === MessageType.RELEASE) {
					//释放
					ep.removeEventListener('message', call as any);
					closeEndPoint(ep);
				}
			})
			.catch(value => {
				return { value, [throwMarker]: 0 };
			});
	});
	if ('start' in ep) {
		ep.start();
	}
};