From b690a7ef0853cc8948c638f46b93f67507b673aa Mon Sep 17 00:00:00 2001 From: IndieKKY Date: Sun, 6 Oct 2024 13:33:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSubtitleService.ts | 4 ++-- src/messaging/README.md | 1 + src/messaging/const.ts | 2 +- src/messaging/layer2/ExtensionMessage.ts | 29 +++++++++++------------ src/messaging/layer2/InjectMessage.ts | 4 ++-- src/messaging/layer2/useMessage.ts | 8 +++---- src/messaging/layer2/useMessageService.ts | 4 ++-- 7 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/hooks/useSubtitleService.ts b/src/hooks/useSubtitleService.ts index 9b71a9e..5a14009 100644 --- a/src/hooks/useSubtitleService.ts +++ b/src/hooks/useSubtitleService.ts @@ -21,7 +21,7 @@ import {useAsyncEffect, useInterval} from 'ahooks' import {getModelMaxTokens, getWholeText} from '../utils/biz_util' import {MESSAGE_TO_INJECT_GET_SUBTITLE} from '../consts/const' import useMessage from '../messaging/layer2/useMessage' -import { injectWaiter } from '@/messaging/layer2/useMessageService' +import { msgWaiter } from '@/messaging/layer2/useMessageService' /** * Service是单例，类似后端的服务概念 @@ -95,7 +95,7 @@ const useSubtitleService = () => { useAsyncEffect(async () => { // 等待inject准备好 - await injectWaiter.wait() + await msgWaiter.wait() // 初始获取列表 sendInject(MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO, {force: true}) // 初始获取设置信息 diff --git a/src/messaging/README.md b/src/messaging/README.md index 628d206..e111b84 100644 --- a/src/messaging/README.md +++ b/src/messaging/README.md @@ -1,4 +1,5 @@ ## 消息通信库封装 +此消息通信库设计为通用的，后面可能会提取到单独的项目中。 ### 消息端 diff --git a/src/messaging/const.ts b/src/messaging/const.ts index 6e66250..1389366 100644 --- a/src/messaging/const.ts +++ b/src/messaging/const.ts @@ -13,7 +13,7 @@ export type L2ResMsg = { } export const MESSAGE_TO_EXTENSION_HANDSHAKE = '_handshake' -export const MESSAGE_TO_EXTENSION_ROUTE_MSG = '_routeMsg' +export const MESSAGE_TO_EXTENSION_ROUTE = '_route' export const TAG_TARGET_INJECT = 'target:inject' export const TAG_TARGET_APP = 'target:app' diff --git a/src/messaging/layer2/ExtensionMessage.ts b/src/messaging/layer2/ExtensionMessage.ts index 56a2436..144a3a7 100644 --- a/src/messaging/layer2/ExtensionMessage.ts +++ b/src/messaging/layer2/ExtensionMessage.ts @@ -1,33 +1,33 @@ import Layer1Protocol from '../layer1/Layer1Protocol' -import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE_MSG } from '../const' +import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE } from '../const' -type PortContext = { +type PortContext = { id: string name: string //暂时没什么用 port: chrome.runtime.Port - portMessageHandler: Layer1Protocol + portMessageHandler: Layer1Protocol ready: boolean tabId?: number // 所属tab tags?: string[] // 标签，用来筛选消息发送目标 } -type L2MethodHandler = (params: any, context: MethodContext, portContext: PortContext) => Promise -type L2MethodHandlers = { - [key: string]: L2MethodHandler +type L2MethodHandler = (params: any, context: MethodContext, portContext: PortContext) => Promise +type L2MethodHandlers = { + [key: string]: L2MethodHandler } class ExtensionMessage { - portIdToPort: Map = new Map() - methods?: L2MethodHandlers + portIdToPort: Map> = new Map() + methods?: L2MethodHandlers debug = (...args: any[]) => { console.debug('[Extension Messaging]', ...args) } - init = (methods: L2MethodHandlers) => { - const innerMethods: L2MethodHandlers = { - [MESSAGE_TO_EXTENSION_HANDSHAKE]: async (params: any, context: MethodContext, portContext: PortContext) => { + init = (methods: L2MethodHandlers) => { + const innerMethods: L2MethodHandlers = { + [MESSAGE_TO_EXTENSION_HANDSHAKE]: async (params: any, context: MethodContext, portContext: PortContext) => { const tags = params.tags let tabId = params.tabId @@ -44,7 +44,7 @@ class ExtensionMessage { portContext.tags = tags portContext.ready = true }, - [MESSAGE_TO_EXTENSION_ROUTE_MSG]: async (params: any, context: MethodContext) => { + [MESSAGE_TO_EXTENSION_ROUTE]: async (params: any, context: MethodContext) => { return this.broadcastMessageExact([context.tabId!], params.tags, params.method, params.params) }, } @@ -84,7 +84,7 @@ class ExtensionMessage { } }, port) // 创建portContext - const portContext: PortContext = { id, name, port, portMessageHandler, ready: false } + const portContext: PortContext = { id, name, port, portMessageHandler, ready: false } this.portIdToPort.set(id, portContext) // 监听断开连接 @@ -110,8 +110,7 @@ class ExtensionMessage { //check tags if (tags == null || tags.some(tag => portContext.tags?.includes(tag))) { try { - const req: L2ReqMsg = { method, params, from: 'extension' } - res = await portContext.portMessageHandler.sendMessage(req) + res = await portContext.portMessageHandler.sendMessage({ method, params, from: 'extension' }) } catch (e) { console.error('send message to port error', portContext.id, e) } diff --git a/src/messaging/layer2/InjectMessage.ts b/src/messaging/layer2/InjectMessage.ts index ed9b26e..6cbaa51 100644 --- a/src/messaging/layer2/InjectMessage.ts +++ b/src/messaging/layer2/InjectMessage.ts @@ -1,5 +1,5 @@ import Layer1Protocol from '../layer1/Layer1Protocol' -import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE_MSG, TAG_TARGET_APP, TAG_TARGET_INJECT } from '../const' +import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE, TAG_TARGET_APP, TAG_TARGET_INJECT } from '../const' class InjectMessage { port?: chrome.runtime.Port @@ -94,7 +94,7 @@ class InjectMessage { if (method === 'setVideoInfo') { console.log('sendApp>>>', method, params) } - return this.sendExtension(MESSAGE_TO_EXTENSION_ROUTE_MSG, { + return this.sendExtension(MESSAGE_TO_EXTENSION_ROUTE, { tags: [TAG_TARGET_APP], method, params, diff --git a/src/messaging/layer2/useMessage.ts b/src/messaging/layer2/useMessage.ts index 592cd6b..f50a797 100644 --- a/src/messaging/layer2/useMessage.ts +++ b/src/messaging/layer2/useMessage.ts @@ -1,12 +1,12 @@ -import { injectWaiter } from './useMessageService' +import { msgWaiter } from './useMessageService' import { useCallback } from 'react' import Layer1Protocol from '../layer1/Layer1Protocol' -import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_ROUTE_MSG, TAG_TARGET_INJECT } from '../const' +import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_ROUTE, TAG_TARGET_INJECT } from '../const' const useMessage = () => { const sendExtension = useCallback(async (method: string, params?: any) => { // wait - const pmh = await injectWaiter.wait() as Layer1Protocol + const pmh = await msgWaiter.wait() as Layer1Protocol // send message const res = await pmh.sendMessage({ from: 'app', @@ -21,7 +21,7 @@ const useMessage = () => { }, []) const sendInject = useCallback(async (method: string, params?: any): Promise => { - return await sendExtension(MESSAGE_TO_EXTENSION_ROUTE_MSG, { + return await sendExtension(MESSAGE_TO_EXTENSION_ROUTE, { tags: [TAG_TARGET_INJECT], method, params: params ?? {}, diff --git a/src/messaging/layer2/useMessageService.ts b/src/messaging/layer2/useMessageService.ts index b835c75..3c5e43b 100644 --- a/src/messaging/layer2/useMessageService.ts +++ b/src/messaging/layer2/useMessageService.ts @@ -11,9 +11,9 @@ let portMessageHandlerInit: boolean = false let portMessageHandler: Layer1Protocol | undefined // let postInjectMessage: (method: string, params: PostMessagePayload) => Promise | undefined -export const injectWaiter = new Waiter(() => ({ +export const msgWaiter = new Waiter>(() => ({ finished: portMessageHandlerInit, - data: portMessageHandler + data: portMessageHandler!, }), 100, 15000) const useMessageService = (methods?: {