fix: clientからready状態を送信してもらってからsimulatorの状態を送るようにする

isucon · Dec 4, 2024 · 8fa7e6e · 8fa7e6e
1 parent 9422c81
commit 8fa7e6e
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 42 deletions.
diff --git a/frontend/app/components/hooks/use-ghost-chairs.ts b/frontend/app/components/hooks/use-ghost-chairs.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { NearByChair } from "~/types";
+import { Message, MessageTypes } from "~/utils/post-message";
 import { TownList } from "../modules/map/map-data";
 
 const randomInt = (min: number, max: number) =>
@@ -47,12 +48,9 @@ export const useGhostChairs = (): NearByChair[] => {
     const onMessage = ({
       origin,
       data,
-    }: MessageEvent<{
-      type: "isuride.simulator.config";
-      payload?: { ghostChairEnabled?: boolean };
-    }>) => {
+    }: MessageEvent<Message["SimulatorConfing"]>) => {
       const isSameOrigin = origin == location.origin;
-      if (isSameOrigin && data.type === "isuride.simulator.config") {
+      if (isSameOrigin && MessageTypes.SimulatorConfing === data.type) {
         setEnabled(data?.payload?.ghostChairEnabled ?? false);
       }
     };

diff --git a/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx b/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx
@@ -11,7 +11,6 @@ import { Modal } from "~/components/primitives/modal/modal";
 import { Text } from "~/components/primitives/text/text";
 import { useSimulatorContext } from "~/contexts/simulator-context";
 import { Coordinate, SimulatorChair } from "~/types";
-import { isArrayIncludes } from "~/utils/includes";
 import { getSimulatorStartCoordinate } from "~/utils/storage";
 import { SimulatorChairRideStatus } from "../simulator-chair-status/simulator-chair-status";
 
@@ -142,30 +141,22 @@ const ChairProgress: FC<{
         <div className="flex w-1/2">
           <PinIcon color={colors.red[500]} width={20} />
           <div className="relative w-full ms-6">
-            {isArrayIncludes(
-              [
-                "PICKUP",
-                "CARRYING",
-                "ARRIVED",
-                "COMPLETED",
-              ] as const satisfies RideStatus[],
-              rideStatus,
-            ) && (
-              <ChairIcon
-                model={model}
-                className={`size-6 absolute top-[-2px] ${rideStatus === "CARRYING" ? "animate-shake" : ""}`}
-                style={{ right: `${distanceProgress}%` }}
-              />
-            )}
+            {rideStatus &&
+              ["PICKUP", "CARRYING", "ARRIVED", "COMPLETED"].includes(
+                rideStatus,
+              ) && (
+                <ChairIcon
+                  model={model}
+                  className={`size-6 absolute top-[-2px] ${rideStatus === "CARRYING" ? "animate-shake" : ""}`}
+                  style={{ right: `${distanceProgress}%` }}
+                />
+              )}
           </div>
         </div>
         <div className="flex w-1/2">
           <PinIcon color={colors.black} width={20} />
           <div className="relative w-full ms-6">
-            {isArrayIncludes(
-              ["MATCHING", "ENROUTE"] as const satisfies RideStatus[],
-              rideStatus,
-            ) && (
+            {rideStatus && ["MATCHING", "ENROUTE"].includes(rideStatus) && (
               <ChairIcon
                 model={model}
                 className={twMerge(

diff --git a/frontend/app/components/modules/simulator-display/simulator-config-display.tsx b/frontend/app/components/modules/simulator-display/simulator-config-display.tsx
@@ -3,6 +3,11 @@ import { fetchChairPostActivity } from "~/api/api-components";
 import { Toggle } from "~/components/primitives/form/toggle";
 import { Text } from "~/components/primitives/text/text";
 import { useSimulatorContext } from "~/contexts/simulator-context";
+import {
+  Message,
+  MessageTypes,
+  sendSimulatorConfig,
+} from "~/utils/post-message";
 
 type SimulatorConfigType = {
   ghostChairEnabled: boolean;
@@ -11,6 +16,7 @@ type SimulatorConfigType = {
 export const SimulatorConfigDisplay: FC<{
   simulatorRef: RefObject<HTMLIFrameElement>;
 }> = ({ simulatorRef }) => {
+  const [ready, setReady] = useState<boolean>(false);
   const { targetChair: chair } = useSimulatorContext();
   const [activate, setActivate] = useState<boolean>(true);
 
@@ -31,17 +37,24 @@ export const SimulatorConfigDisplay: FC<{
   });
 
   useEffect(() => {
-    const sendMessage = () => {
-      simulatorRef.current?.contentWindow?.postMessage(
-        { type: "isuride.simulator.config", payload: config },
-        "*",
-      );
+    if (!ready) return;
+    if (simulatorRef.current?.contentWindow) {
+      sendSimulatorConfig(simulatorRef.current.contentWindow, config);
+    }
+  }, [config, ready, simulatorRef]);
+
+  useEffect(() => {
+    const onMessage = ({ data }: MessageEvent<Message["ClientReady"]>) => {
+      const isSameOrigin = origin == location.origin;
+      if (isSameOrigin && data.type === MessageTypes.ClientReady) {
+        setReady(Boolean(data?.payload?.ready));
+      }
     };
-    const timer = setTimeout(sendMessage, 800);
+    window.addEventListener("message", onMessage);
     return () => {
-      clearTimeout(timer);
+      window.removeEventListener("message", onMessage);
     };
-  }, [config, simulatorRef]);
+  }, []);
 
   return (
     <>

diff --git a/frontend/app/contexts/simulator-context.tsx b/frontend/app/contexts/simulator-context.tsx
@@ -97,10 +97,11 @@ export const useClientChairNotification = (id?: string) => {
   useEffect(() => {
     if (!isSSE) return;
     const eventSource = new EventSource(`${apiBaseURL}/chair/notification`);
-    const onMessage = (event: { data: unknown } | undefined) => {
-      if (typeof event?.data === "string") {
+    const onMessage = ({ data }: MessageEvent<{ data?: unknown }>) => {
+      if (typeof data !== "string") return;
+      try {
         const eventData = JSON.parse(
-          event?.data,
+          data,
         ) as ChairGetNotificationResponse["data"];
         setNotification((preRequest) => {
           if (
@@ -116,6 +117,8 @@ export const useClientChairNotification = (id?: string) => {
             return preRequest;
           }
         });
+      } catch (error) {
+        console.error(error);
       }
       return () => {
         eventSource.close();

diff --git a/frontend/app/routes/client._index/route.tsx b/frontend/app/routes/client._index/route.tsx
@@ -17,6 +17,7 @@ import { Modal } from "~/components/primitives/modal/modal";
 import { Text } from "~/components/primitives/text/text";
 import { useUserContext } from "~/contexts/user-context";
 import { NearByChair, isClientApiError } from "~/types";
+import { sendClientReady } from "~/utils/post-message";
 import { Arrived } from "./driving-state/arrived";
 import { Carrying } from "./driving-state/carrying";
 import { Enroute } from "./driving-state/enroute";
@@ -166,6 +167,13 @@ export default function Index() {
     };
   }, [centerCoordinate, isStatusModalOpen]);
 
+  useEffect(() => {
+    sendClientReady(window.parent, { ready: true });
+    return () => {
+      sendClientReady(window.parent, { ready: false });
+    };
+  }, []);
+
   return (
     <>
       <CampaignBanner />

diff --git a/frontend/app/utils/includes.ts b/frontend/app/utils/includes.ts
diff --git a/frontend/app/utils/post-message.ts b/frontend/app/utils/post-message.ts
@@ -0,0 +1,31 @@
+export const MessageTypes = {
+  ClientReady: "isuride.client.ready",
+  SimulatorConfing: "isuride.simulator.config",
+} as const;
+
+export type Message = {
+  ClientReady: {
+    type: typeof MessageTypes.ClientReady;
+    payload: { ready?: boolean };
+  };
+  SimulatorConfing: {
+    type: typeof MessageTypes.SimulatorConfing;
+    payload: {
+      ghostChairEnabled?: boolean;
+    };
+  };
+};
+
+export const sendClientReady = (
+  target: Window,
+  payload: NonNullable<Message["ClientReady"]["payload"]>,
+) => {
+  target.postMessage({ type: MessageTypes.ClientReady, payload }, "*");
+};
+
+export const sendSimulatorConfig = (
+  target: Window,
+  payload: NonNullable<Message["SimulatorConfing"]["payload"]>,
+) => {
+  target.postMessage({ type: MessageTypes.SimulatorConfing, payload }, "*");
+};