Distinguish between multiple emulator worker instances in fallback mode

mihaip · mihaip · commit 836523a6a24f · 2025-05-04T22:01:18.000-07:00
Generate a worker ID when creating a new instance, and include in the fallback communication channels with the service worker. That allows it to maintain a per-worker state and queue of commands. Updates #382
diff --git a/public/embed-testbed.html b/public/embed-testbed.html
@@ -30,7 +30,6 @@ <h1>Embed Testbed</h1>
                     type="checkbox"
                     name="screen_update_messages"
                     value="true"
-                    checked
                 />
                 Get screen updates
             </label>
@@ -53,9 +52,8 @@ <h1>Embed Testbed</h1>
             <input type="submit" value="Load" />
         </form>
 
-
-        <div id='iframes' style='display: flex; gap: 10px;'>
-            <div class='iframe-outer'>
+        <div id="iframes" style="display: flex; gap: 10px">
+            <div class="iframe-outer">
                 <iframe
                     allow="cross-origin-isolated"
                     style="border: 2px solid red"
@@ -73,12 +71,6 @@ <h1>Embed Testbed</h1>
         <script>
             const frame = document.querySelector("iframe");
 
-            onload = function () {
-                if (location.search.includes("autoload")) {
-                    document.querySelector("form").submit();
-                }
-            };
-
             onmessage = function (e) {
                 const data = e.data;
                 switch (data.type) {
@@ -91,30 +83,50 @@ <h1>Embed Testbed</h1>
             };
 
             // Duplicate everything
-            
-            const newFormEl = document.querySelector('form').cloneNode(true);
-            newFormEl.target = 'frame2';
-            document.body.insertBefore(newFormEl, document.querySelector('form').nextElementSibling);
-            
-            const newIframeEl = document.querySelector('#iframes .iframe-outer').cloneNode(true);
-            newIframeEl.querySelector('iframe').name = 'frame2';
-            document.querySelector('#iframes').append(newIframeEl);
-            
+
+            const newFormEl = document.querySelector("form").cloneNode(true);
+            newFormEl.target = "frame2";
+            document.body.insertBefore(
+                newFormEl,
+                document.querySelector("form").nextElementSibling
+            );
+
+            const newIframeEl = document
+                .querySelector("#iframes .iframe-outer")
+                .cloneNode(true);
+            newIframeEl.querySelector("iframe").name = "frame2";
+            document.querySelector("#iframes").append(newIframeEl);
+
             // Event listeners
-            
+
             document.querySelectorAll(".pause").forEach(el => {
                 el.onclick = function () {
-                    el.closest('.iframe-outer').querySelector('iframe').contentWindow.postMessage({type: "emulator_pause"}, "*");
+                    el.closest(".iframe-outer")
+                        .querySelector("iframe")
+                        .contentWindow.postMessage(
+                            {type: "emulator_pause"},
+                            "*"
+                        );
                 };
             });
             document.querySelectorAll(".unpause").forEach(el => {
                 el.onclick = function () {
-                    el.closest('.iframe-outer').querySelector('iframe').contentWindow.postMessage(
-                        {type: "emulator_unpause"},
-                        "*"
-                    )
+                    el.closest(".iframe-outer")
+                        .querySelector("iframe")
+                        .contentWindow.postMessage(
+                            {type: "emulator_unpause"},
+                            "*"
+                        );
                 };
             });
+
+            onload = function () {
+                if (location.search.includes("autoload")) {
+                    for (const form of document.querySelectorAll("form")) {
+                        form.submit();
+                    }
+                }
+            };
         </script>
     </body>
 </html>
diff --git a/src/emulator/emulator-common.ts b/src/emulator/emulator-common.ts
@@ -145,6 +145,7 @@ export function generateNextChunkUrl(
 }
 
 export type EmulatorWorkerConfig = EmulatorDef & {
+    workerId: string;
     wasm: ArrayBuffer;
     disks: EmulatorChunkedFileSpec[];
     delayedDisks?: EmulatorChunkedFileSpec[];
diff --git a/src/emulator/emulator-service-worker.ts b/src/emulator/emulator-service-worker.ts
@@ -7,9 +7,13 @@ import {
 
 declare const self: ServiceWorkerGlobalScope;
 
-let workerCommands: EmulatorFallbackCommand[] = [];
-let isPaused = false;
-let onUnpauseCallbacks: ((response: Response) => void)[] = [];
+const workerInfoById = new Map<string, WorkerInfo>();
+
+class WorkerInfo {
+    public commands: EmulatorFallbackCommand[] = [];
+    public isPaused = false;
+    public onUnpauseCallbacks: ((response: Response) => void)[] = [];
+}
 
 function constructJsonResponse(json: any) {
     return new Response(JSON.stringify(json), {
@@ -28,23 +32,29 @@ self.addEventListener("message", event => {
     const {data} = event;
     if (data.type === "worker-command") {
         const command = data.command as EmulatorFallbackCommand;
+        const workerId = data.workerId as string;
+        let workerInfo = workerInfoById.get(workerId);
+        if (!workerInfo) {
+            workerInfo = new WorkerInfo();
+            workerInfoById.set(workerId, workerInfo);
+        }
         let shouldPush = true;
         if (command.type === "input") {
             if (command.event.type === "pause") {
-                isPaused = true;
+                workerInfo.isPaused = true;
                 shouldPush = false;
             }
             if (command.event.type === "unpause") {
-                isPaused = false;
+                workerInfo.isPaused = false;
                 shouldPush = false;
-                for (const callback of onUnpauseCallbacks) {
-                    callback(prepareCommandsFetchResponse());
+                for (const callback of workerInfo.onUnpauseCallbacks) {
+                    callback(prepareCommandsFetchResponse(workerId));
                 }
-                onUnpauseCallbacks = [];
+                workerInfo.onUnpauseCallbacks = [];
             }
         }
         if (shouldPush) {
-            workerCommands.push(data.command);
+            workerInfo.commands.push(data.command);
         }
     } else if (data.type === "init-disk-cache") {
         const diskFileSpec = data.spec as EmulatorChunkedFileSpec;
@@ -78,9 +88,21 @@ self.addEventListener("message", event => {
 self.addEventListener("fetch", (event: FetchEvent) => {
     const requestUrl = new URL(event.request.url);
     if (requestUrl.pathname.endsWith("/worker-commands")) {
-        handleWorkerCommands(event);
+        const workerId = requestUrl.searchParams.get("worker-id");
+        if (!workerId) {
+            console.error("No worker-id provided");
+            event.respondWith(constructJsonResponse([]));
+            return;
+        }
+        handleWorkerCommands(event, workerId);
     } else if (requestUrl.pathname.endsWith("/worker-idlewait")) {
-        handleIdleWait(event);
+        const workerId = requestUrl.searchParams.get("worker-id");
+        if (!workerId) {
+            console.error("No worker-id provided");
+            event.respondWith(constructJsonResponse({}));
+            return;
+        }
+        handleIdleWait(event, workerId);
     } else if (
         diskCacheSpecs.some(spec =>
             decodeURIComponent(requestUrl.pathname).startsWith(spec.baseUrl)
@@ -90,12 +112,18 @@ self.addEventListener("fetch", (event: FetchEvent) => {
     }
 });
 
-function handleWorkerCommands(event: FetchEvent) {
-    if (isPaused) {
+function handleWorkerCommands(event: FetchEvent, workerId: string) {
+    const workerInfo = workerInfoById.get(workerId);
+    if (!workerInfo) {
+        console.error("No worker info found for worker ID", workerId);
+        event.respondWith(constructJsonResponse([]));
+        return;
+    }
+    if (workerInfo.isPaused) {
         const unpausePromise = new Promise<Response>(resolve => {
             console.log("Emulator paused, waiting for input");
             const startTime = performance.now();
-            onUnpauseCallbacks.push(response => {
+            workerInfo.onUnpauseCallbacks.push(response => {
                 console.log(
                     "Emulator unpaused after",
                     ((performance.now() - startTime) / 1000).toFixed(1),
@@ -107,16 +135,33 @@ function handleWorkerCommands(event: FetchEvent) {
         event.respondWith(unpausePromise);
         return;
     }
-    event.respondWith(prepareCommandsFetchResponse());
+    event.respondWith(prepareCommandsFetchResponse(workerId));
 }
 
-function prepareCommandsFetchResponse(): Response {
-    const fetchResponse = constructJsonResponse(workerCommands);
-    workerCommands = [];
+function prepareCommandsFetchResponse(workerId: string): Response {
+    const workerInfo = workerInfoById.get(workerId);
+    if (!workerInfo) {
+        console.error(
+            "No worker info found for worker ID, returning no commands",
+            workerId
+        );
+        return constructJsonResponse([]);
+    }
+    const fetchResponse = constructJsonResponse(workerInfo.commands);
+    workerInfo.commands = [];
     return fetchResponse;
 }
 
-function handleIdleWait(event: FetchEvent) {
+function handleIdleWait(event: FetchEvent, workerId: string) {
+    const workerInfo = workerInfoById.get(workerId);
+    if (!workerInfo) {
+        console.error(
+            "No worker info found for worker ID, skipping idlewait",
+            workerId
+        );
+        event.respondWith(constructJsonResponse({}));
+        return;
+    }
     const requestUrl = new URL(event.request.url);
     const timeout = parseInt(requestUrl.searchParams.get("timeout")!, 10);
     // Subtract 1ms since that's the overhead of a roundtrip with the
@@ -127,7 +172,10 @@ function handleIdleWait(event: FetchEvent) {
             const interval = self.setInterval(() => {
                 // Interrupt idlewait if new commands (presumably input) has
                 // come in.
-                if (workerCommands.length || performance.now() >= endTime) {
+                if (
+                    workerInfo.commands.length ||
+                    performance.now() >= endTime
+                ) {
                     self.clearInterval(interval);
                     resolve(constructJsonResponse({}));
                 }
diff --git a/src/emulator/emulator-ui.ts b/src/emulator/emulator-ui.ts
@@ -156,6 +156,9 @@ export class Emulator {
     #delegate?: EmulatorDelegate;
     #worker: Worker;
     #workerTerminated: boolean = false;
+    // Doesn't have to be secure, just unique enough for a few instances that
+    // may be used concurrently.
+    #workerId = Math.random().toString(16).slice(2);
 
     #screenCanvasContext: CanvasRenderingContext2D;
     #screenImageData: ImageData;
@@ -208,6 +211,7 @@ export class Emulator {
                 if (serviceWorkerAvailable) {
                     this.#serviceWorker!.postMessage({
                         type: "worker-command",
+                        workerId: this.#workerId,
                         command,
                     });
                 } else {
@@ -443,6 +447,7 @@ export class Emulator {
                 emulatorType,
                 emulatorSubtype,
             } as EmulatorDef),
+            workerId: this.#workerId,
             wasm,
             disks,
             delayedDisks,
diff --git a/src/emulator/emulator-worker.ts b/src/emulator/emulator-worker.ts
@@ -145,7 +145,9 @@ class EmulatorWorkerApi {
         let fallbackEndpoint: EmulatorFallbackEndpoint | undefined;
         function getFallbackEndpoint(): EmulatorFallbackEndpoint {
             if (!fallbackEndpoint) {
-                fallbackEndpoint = new EmulatorFallbackEndpoint();
+                fallbackEndpoint = new EmulatorFallbackEndpoint(
+                    config.workerId
+                );
             }
             return fallbackEndpoint;
         }
@@ -556,10 +558,15 @@ class EmulatorWorkerApi {
 }
 
 export class EmulatorFallbackEndpoint {
+    #workerId: string;
     #commandQueue: EmulatorFallbackCommand[] = [];
     #fetchFailures = 0;
     #loggedMaxFetchFailures = false;
 
+    constructor(workerId: string) {
+        this.#workerId = workerId;
+    }
+
     idleWait(timeout: number) {
         this.#fetchSync(`./worker-idlewait?timeout=${timeout}&t=${Date.now()}`);
     }
@@ -643,7 +650,7 @@ export class EmulatorFallbackEndpoint {
             return undefined;
         }
         const xhr = new XMLHttpRequest();
-        xhr.open("GET", url, false);
+        xhr.open("GET", url + `&worker-id=${this.#workerId}`, false);
         xhr.send(null);
         if (xhr.status !== 200) {
             console.warn(

Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,7 @@ export function generateNextChunkUrl(`
`145`	`145`	`}`
`146`	`146`
`147`	`147`	`export type EmulatorWorkerConfig = EmulatorDef & {`
	`148`	`+ workerId: string;`
`148`	`149`	`wasm: ArrayBuffer;`
`149`	`150`	`disks: EmulatorChunkedFileSpec[];`
`150`	`151`	`delayedDisks?: EmulatorChunkedFileSpec[];`