Re-factor the MessageHandler-class event handler function

src/display/api.js

@@ -1982,7 +1982,7 @@ class PDFPageProxy {
 }
 
 class LoopbackPort {
-  #listeners = new Set();
+  #listeners = new Map();
 
   #deferred = Promise.resolve();
 
@@ -1992,21 +1992,39 @@ class LoopbackPort {
     };
 
     this.#deferred.then(() => {
-      for (const listener of this.#listeners) {
+      for (const [listener] of this.#listeners) {
         listener.call(this, event);
       }
     });
   }
 
-  addEventListener(name, listener) {
-    this.#listeners.add(listener);
+  addEventListener(name, listener, options = null) {
+    let rmAbort = null;
+    if (options?.signal instanceof AbortSignal) {
+      const { signal } = options;
+      if (signal.aborted) {
+        warn("LoopbackPort - cannot use an `aborted` signal.");
+        return;
+      }
+      const onAbort = () => this.removeEventListener(name, listener);
+      rmAbort = () => signal.removeEventListener("abort", onAbort);
+
+      signal.addEventListener("abort", onAbort);
+    }
+    this.#listeners.set(listener, rmAbort);
   }
 
   removeEventListener(name, listener) {
+    const rmAbort = this.#listeners.get(listener);
+    rmAbort?.();
+
     this.#listeners.delete(listener);
   }
 
   terminate() {
+    for (const [, rmAbort] of this.#listeners) {
+      rmAbort?.();
+    }
     this.#listeners.clear();
   }
 }

src/shared/message_handler.js

@@ -69,6 +69,8 @@ function wrapReason(reason) {
 }
 
 class MessageHandler {
+  #messageAC = new AbortController();
+
   constructor(sourceName, targetName, comObj) {
     this.sourceName = sourceName;
     this.targetName = targetName;
@@ -80,8 +82,12 @@ class MessageHandler {
     this.callbackCapabilities = Object.create(null);
     this.actionHandler = Object.create(null);
 
-    this._onComObjOnMessage = event => {
-      const data = event.data;
+    comObj.addEventListener("message", this.#onMessage.bind(this), {
+      signal: this.#messageAC.signal,
+    });
+  }
+
+  #onMessage({ data }) {
     if (data.targetName !== this.sourceName) {
       return;
     }
@@ -111,25 +117,26 @@ class MessageHandler {
       throw new Error(`Unknown action from worker: ${data.action}`);
     }
     if (data.callbackId) {
-        const cbSourceName = this.sourceName;
-        const cbTargetName = data.sourceName;
+      const sourceName = this.sourceName,
+        targetName = data.sourceName,
+        comObj = this.comObj;
 
       new Promise(function (resolve) {
         resolve(action(data.data));
       }).then(
         function (result) {
           comObj.postMessage({
-              sourceName: cbSourceName,
-              targetName: cbTargetName,
+            sourceName,
+            targetName,
             callback: CallbackKind.DATA,
             callbackId: data.callbackId,
             data: result,
           });
         },
         function (reason) {
           comObj.postMessage({
-              sourceName: cbSourceName,
-              targetName: cbTargetName,
+            sourceName,
+            targetName,
             callback: CallbackKind.ERROR,
             callbackId: data.callbackId,
             reason: wrapReason(reason),
@@ -143,8 +150,6 @@ class MessageHandler {
       return;
     }
     action(data.data);
-    };
-    comObj.addEventListener("message", this._onComObjOnMessage);
   }
 
   on(actionName, handler) {
@@ -527,7 +532,8 @@ class MessageHandler {
   }
 
   destroy() {
-    this.comObj.removeEventListener("message", this._onComObjOnMessage);
+    this.#messageAC?.abort();
+    this.#messageAC = null;
   }
 }