通讯操作

packages/message/client.ts

@@ -1,6 +1,6 @@
-export function sendMessage(action: string, params?: any): Promise<any> {
+export function sendMessage(action: string, data?: any): Promise<any> {
   return new Promise((resolve, reject) => {
-    chrome.runtime.sendMessage({ action, data: params }, (res) => {
+    chrome.runtime.sendMessage({ action, data }, (res) => {
       if (res.code) {
         console.error(res);
         reject(res.message);
@@ -11,10 +11,10 @@ export function sendMessage(action: string, params?: any): Promise<any> {
   });
 }
 
-export function connect(action: string, params?: any): Promise<chrome.runtime.Port> {
+export function connect(action: string, data?: any): Promise<chrome.runtime.Port> {
   return new Promise((resolve) => {
     const port = chrome.runtime.connect();
-    port.postMessage({ action, data: params });
+    port.postMessage({ action, data });
     resolve(port);
   });
 }

packages/message/message_queue.ts

@@ -2,17 +2,20 @@ import EventEmitter from "eventemitter3";
 import { connect } from "./client";
 import { ApiFunction, Server } from "./server";
 
+export type SubscribeCallback = (message: any) => void;
+
 export class Broker {
   constructor() {}
 
   // 订阅
-  async subscribe(topic: string, handler: (message: any) => void) {
+  async subscribe(topic: string, handler: SubscribeCallback): Promise<chrome.runtime.Port> {
     const con = await connect("messageQueue", { action: "subscribe", topic });
     con.onMessage.addListener((msg: { action: string; topic: string; message: any }) => {
       if (msg.action === "message") {
         handler(msg.message);
       }
     });
+    return con;
   }
 
   // 发布

packages/message/window_message.ts

@@ -0,0 +1,99 @@
+import { v4 as uuidv4 } from "uuid";
+
+// 通过 window.postMessage/onmessage 实现通信
+
+import EventEmitter from "eventemitter3";
+
+// 消息体
+export type WindowMessageBody = {
+  messageId: string; // 消息id
+  type: "sendMessage" | "respMessage" | "connect"; // 消息类型
+  data: any; // 消息数据
+};
+
+export class WindowMessage {
+  EE: EventEmitter = new EventEmitter();
+
+  // source: Window 消息来源
+  // target: Window 消息目标
+  constructor(
+    private source: Window,
+    private target: Window
+  ) {
+    // 监听消息
+    this.source.addEventListener("message", (e) => {
+      if (e.source === this.target) {
+        this.messageHandle(e.data);
+      }
+    });
+  }
+
+  messageHandle(data: WindowMessageBody) {
+    // 处理消息
+    if (data.type === "sendMessage") {
+      // 接收到消息
+      this.EE.emit("message", data.data, (resp: any) => {
+        // 发送响应消息
+        const body: WindowMessageBody = {
+          messageId: data.messageId,
+          type: "respMessage",
+          data: resp,
+        };
+        this.target.postMessage(body, "*");
+      });
+    } else if (data.type === "respMessage") {
+      // 接收到响应消息
+      this.EE.emit("response:" + data.messageId, data);
+    } else if (data.type === "connect") {
+      this.EE.emit("connect", data.data, new WindowMessageConnect(data.messageId, this.EE, this.target));
+    } else if (data.type === "disconnect") {
+      this.EE.emit("disconnect", data.data, new WindowMessageConnect(data.messageId, this.EE, this.target));
+    } else if (data.type === "connectMessage") {
+      this.EE.emit("connectMessage", data.data, new WindowMessageConnect(data.messageId, this.EE, this.target));
+    }
+  }
+
+  onConnect(callback: (data: any, con: WindowMessageConnect) => void) {
+    this.EE.addListener("connect", callback);
+  }
+
+  connect(action: string, data?: any): Promise<WindowMessageConnect> {
+    return new Promise((resolve) => {
+      const body: WindowMessageBody = {
+        messageId: uuidv4(),
+        type: "connect",
+        data: { action, data },
+      };
+      this.target.postMessage(body, "*");
+      resolve(new WindowMessageConnect(body.messageId, this.EE, this.target));
+    });
+  }
+
+  onMessage(callback: (data: any, sendResponse: (data: any) => void) => void) {
+    this.EE.addListener("message", callback);
+  }
+
+  sendMessage(action: string, data?: any): Promise<any> {
+    return new Promise((resolve) => {
+      const body: WindowMessageBody = {
+        messageId: uuidv4(),
+        type: "sendMessage",
+        data: { action, data },
+      };
+      const callback = (body: WindowMessageBody) => {
+        this.EE.removeListener("response:" + body.messageId, callback);
+        resolve(body.data);
+      };
+      this.EE.addListener("response:" + body.messageId, callback);
+      this.target.postMessage(body, "*");
+    });
+  }
+}
+
+export class WindowMessageConnect {
+  constructor(
+    private messageId: string,
+    private EE: EventEmitter,
+    private target: Window
+  ) {}
+}