Render logs from the cloud browser

sonkatalon · Jan 28, 2024 · b9b1078 · b9b1078
1 parent 03fa22b
commit b9b1078
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/docker/device/extension/content.js b/docker/device/extension/content.js
@@ -1,11 +1,6 @@
 document.addEventListener("click", (event) => {
-  chrome.runtime.sendMessage(
-    {
-      url: "http://nextjs:3000/relay/click",
-      body: { target: event.target.outerHTML },
-    },
-    function (response) {
-      alert(JSON.stringify(response));
-    }
-  );
+  chrome.runtime.sendMessage({
+    url: "http://nextjs:3000/relay/click",
+    body: { target: event.target.outerHTML },
+  });
 });
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,13 +10,16 @@ const height = 600;
 
 type RecordState = "done" | "creating" | "recording" | "destroying";
 
-function renderNotice(recordState: RecordState): string {
+function renderNotice(recordState: RecordState, logs: string[]): string {
   switch (recordState) {
     case "done":
       return 'Enter an URL and click "Record" to start recording...';
     case "creating":
       return "Creating device...";
     case "recording":
+      if (logs.length > 0) {
+        return `[LOG] ${logs[logs.length - 1]}`;
+      }
       return 'Click "Done" to stop.';
     case "destroying":
       return "Destroying device...";
@@ -26,11 +29,13 @@ function renderNotice(recordState: RecordState): string {
 export default function Home() {
   const [recordState, setRecordState] = useState<RecordState>("done");
   const [device, setDevice] = useState<Device | null>(null);
+  const [logs, setLogs] = useState<string[]>([]);
   const urlRef = useRef<ElementRef<"input">>(null);
   const rfbRef = useRef<ElementRef<"div">>(null);
 
   const startRecording = useCallback(async () => {
     setRecordState("creating");
+    setLogs([]);
     setDevice(
       await createDevice({
         hostname: window.location.hostname,
@@ -41,7 +46,7 @@ export default function Home() {
       })
     );
     setRecordState("recording");
-  }, [setRecordState]);
+  }, [setRecordState, setLogs]);
   const stopRecording = useCallback(async () => {
     if (device !== null) {
       setRecordState("destroying");
@@ -52,20 +57,30 @@ export default function Home() {
   }, [device, setDevice, setRecordState]);
 
   useEffect(() => {
-    (async () => {
+    (async function loadRfb() {
       const { current } = rfbRef;
       if (device !== null && current != null) {
         const RFB = (await import("@novnc/novnc/core/rfb")).default;
         new RFB(current, device.rfbUrl);
       }
     })();
-  }, [device]);
+  }, [device, rfbRef]);
+
+  useEffect(() => {
+    (async function loadSocketIo() {
+      const { io } = await import("socket.io-client");
+      const socket = io();
+      socket.on("click", (data: { target: string }) => {
+        setLogs((logs) => [...logs, `Clicked: ${data.target}`]);
+      });
+    })();
+  }, [setLogs]);
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          {renderNotice(recordState)}
+          {renderNotice(recordState, logs)}
         </div>
       </div>