Add Drop Updates button to simulate transport failing to deliver messages

README.md

@@ -97,6 +97,12 @@ are running.
 The dev tool console shows messages with the same color prefix as the instance
 UIs.
 
+You can simulate the host losing messages by toggling the `Drop Updates` button
+on a specific instance. While enabled the instance will not receive any updates
+as if the transport has failed to deliver them. Note: on later reloads of the
+page the instance will load all updates again because the state is shared between
+all instances in the webxdc-dev backend.
+
 #### Clean state
 
 Instances start with a clean slate: empty `localStorage` and `sessionStorage`.

frontend/Instance.tsx

@@ -1,4 +1,4 @@
-import { Component, Show } from "solid-js";
+import { Component, Show, createSignal } from "solid-js";
 import { Flex, createDisclosure, notificationService } from "@hope-ui/solid";
 
 import { Instance as InstanceData } from "../types/instance";
@@ -12,12 +12,13 @@ const Instance: Component<{
   setSearch: (search: Search) => void;
 }> = (props) => {
   let iframeRef: HTMLIFrameElement | undefined = undefined;
+  let [dropUpdates, setDropUpdates] = createSignal(false);
 
   const handleReload = () => {
     if (iframeRef == null) {
       return;
     }
-
+    setDropUpdates(false) // reset our state because inner sim/webxdc state is reset in reload
     iframeRef.contentWindow?.postMessage("reload", props.instance.url);
 
     notificationService.show({
@@ -29,6 +30,14 @@ const Instance: Component<{
     defaultIsOpen: false,
   });
 
+  const toggleDropUpdates = () => {
+    if (iframeRef == null) {
+      return;
+    }
+    setDropUpdates(!dropUpdates())
+    iframeRef.contentWindow?.postMessage({ name: "dropUpdates", value: dropUpdates()}, props.instance.url)
+  }
+
   const getStyle = () => {
     return {
       // XXX these dimensions should be configurable somehow
@@ -49,6 +58,8 @@ const Instance: Component<{
         onStart={onOpen}
         onStop={onClose}
         isStarted={isOpen}
+        dropUpdates={dropUpdates()}
+        onToggleDropUpdates={toggleDropUpdates}
       />
       <Show
         when={isOpen()}

frontend/InstanceHeader.tsx

@@ -9,6 +9,7 @@ import {
 } from "@hope-ui/solid";
 import { IoRefreshOutline, IoStop, IoPlay } from "solid-icons/io";
 import { FiExternalLink, FiTrash } from "solid-icons/fi";
+import { RiDeviceWifiLine, RiDeviceWifiOffLine } from 'solid-icons/ri'
 
 import type { Instance as InstanceData } from "../types/instance";
 import { sent, received, mutateInstances } from "./store";
@@ -21,6 +22,8 @@ const InstanceHeader: Component<{
   onStart: () => void;
   onStop: () => void;
   isStarted: Accessor<boolean>;
+  dropUpdates: boolean;
+  onToggleDropUpdates: () => void;
 }> = (props) => {
   const sentCount = createMemo(() => {
     return sent(props.instance.id);
@@ -113,6 +116,11 @@ const InstanceHeader: Component<{
           onClick={() => handleRemoveInstance(props.instance.id)}
           icon={<FiTrash size={22} color="#000000" />}
         />
+        <InstanceButton
+          label="Drop Updates"
+          onClick={props.onToggleDropUpdates}
+          icon={props.dropUpdates ? <RiDeviceWifiOffLine size={22} color={"#FF0000"} /> : <RiDeviceWifiLine size={22} color={"#000000"} /> }
+        />
       </Flex>
     </Flex>
   );

sim/create.ts

@@ -112,7 +112,6 @@ export function createWebXdc(
     setUpdateListener: (listener, serial = 0): Promise<void> => {
       transport.onMessage((message) => {
         if (isUpdatesMessage(message)) {
-          log("recv update", message.updates);
           for (const update of message.updates) {
             listener(update);
           }

sim/webxdc.ts

@@ -17,12 +17,23 @@ export class DevServerTransport implements Transport {
   messageListener: SocketMessageListener | null = null;
   promise: Promise<Info>;
   resolveInfo!: (info: Info) => void;
+  dropUpdates: boolean = false;
 
   constructor(url: string) {
     this.socket = new WebSocket(url);
     this.promise = new Promise((resolve) => {
       this.resolveInfo = resolve;
     });
+    window.addEventListener("message", (event) => {
+      if (!eventIsAllowed(event)) {
+        return;
+      }
+      if (typeof event.data === "object") {
+        if (event.data.name === "dropUpdates") {
+          this.dropUpdates = event.data.value;
+        }
+      }
+    });
   }
 
   send(data: any): void {
@@ -34,6 +45,9 @@ export class DevServerTransport implements Transport {
       this.socket.removeEventListener("message", this.messageListener);
     }
     const listener = (event: Event): void => {
+      if (this.dropUpdates) {
+        return;
+      }
       callback(JSON.parse((event as any).data));
     };
     this.messageListener = listener;
@@ -134,14 +148,18 @@ window.addEventListener("load", () => alterUi(getWebXdc().selfName, transport));
 
 // listen to messages coming into iframe
 window.addEventListener("message", (event) => {
-  const isAllowed =
-    event.origin.includes("localhost:") ||
-    (location.host.endsWith(".webcontainer.io") &&
-      event.origin.includes(".webcontainer.io"));
-  if (!isAllowed) {
+  if (!eventIsAllowed(event)) {
     return;
   }
   if (event.data === "reload") {
     window.location.reload();
   }
 });
+
+function eventIsAllowed(event: MessageEvent<any>) {
+  return (
+    event.origin.includes("localhost:") ||
+    (location.host.endsWith(".webcontainer.io") &&
+      event.origin.includes(".webcontainer.io"))
+  );
+}