Merge pull request #119 from traP-jp/SSlime/fix-frontend-ws

Update WebSocket hostname and improve dispatcher handling

client/src/App.tsx

@@ -11,7 +11,7 @@ const App = () => {
   const dispatcher = useExplorerDispatcher();
   const setDispatcher = useSetAtom(dispatcherAtom);
   useEffect(() => {
-    setDispatcher(dispatcher);
+    setDispatcher(() => dispatcher);
   }, [dispatcher, setDispatcher]);
 
   return (

client/src/api/explorer.ts

@@ -2,7 +2,7 @@ import { useSetAtom } from "jotai";
 import { Position } from "../model/position";
 import { ExplorationField, ExplorationFieldEvents } from "../schema2/explore";
 import { serverWSHostName } from "./hostname";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import fieldMessagesAtom from "../state/message";
 import fieldReactionsAtom from "../state/reactions";
 import { ReactionName } from "../model/reactions";
@@ -28,21 +28,28 @@ const useExplorerDispatcher = () => {
   const setFieldSpeakerPhones = useSetAtom(fieldSpeakerPhonesAtom);
   const setFieldExplorers = useSetAtom(fieldExplorersAtom);
 
-  const dispatcher: ExplorerMessageDispatcher = (mes) => {
+  const dispatcher: ExplorerMessageDispatcher = useCallback((mes) => {
     if (!mes) return;
     subscriberRef.current.dispatchEvent(
       new CustomEvent(explorerEvent, {
         detail: {
-          position: mes.position,
-          size: mes.size,
+          position: {
+            x: Math.round(mes.position.x),
+            y: Math.round(mes.position.y),
+          },
+          size: {
+            width: Math.round(mes.size.width),
+            height: Math.round(mes.size.height),
+          },
         },
       }),
     );
-  };
+  }, []);
 
   useEffect(() => {
     const ws = new WebSocket(serverWSHostName);
-    subscriberRef.current.addEventListener(explorerEvent, (event: Event) => {
+    const currentSubscriber = subscriberRef.current;
+    const subscriverHandler = (event: Event) => {
       // @ts-expect-error event is CustomEvent
       const message = event.detail as ExplorerMessage;
 
@@ -57,7 +64,8 @@ const useExplorerDispatcher = () => {
       };
 
       ws.send(JSON.stringify(explorationField));
-    });
+    };
+    currentSubscriber.addEventListener(explorerEvent, subscriverHandler);
     ws.onmessage = (event) => {
       if (event.type !== "text") {
         return;
@@ -196,6 +204,7 @@ const useExplorerDispatcher = () => {
     };
     return () => {
       ws.close();
+      currentSubscriber.removeEventListener(explorerEvent, subscriverHandler);
     };
   }, [
     setFieldMessages,

client/src/api/hostname.ts

@@ -1,3 +1,3 @@
 const serverHostName = "http://localhost:8000";
-export const serverWSHostName = "ws://localhost:8000";
+export const serverWSHostName = "ws://localhost:8000/ws";
 export default serverHostName;

client/src/pixi/Canvas.tsx

@@ -14,7 +14,8 @@ import {
 } from "../model/position";
 import Explorer from "./components/Explorer";
 import PIXI from "pixi.js";
-import useExplorerDispatcher from "../api/explorer";
+import { useAtomValue } from "jotai";
+import dispatcherAtom from "../state/dispatcher";
 
 const mountHandler = import.meta.env.DEV
   ? (app: PIXI.Application) => {
@@ -39,9 +40,9 @@ const Canvas: React.FC<Props> = (props) => {
     width: number;
     height: number;
   } | null>(null);
-  const [intervalID, setIntervalID] = useState<number | null>(null);
+  const intervalID = useRef<number | null>(null);
   const stageRef = useRef<HTMLDivElement>(null);
-  const dispatcher = useExplorerDispatcher();
+  const dispatcher = useAtomValue(dispatcherAtom);
 
   useEffect(() => {
     const width = (window.innerWidth * 3) / 5;
@@ -79,24 +80,26 @@ const Canvas: React.FC<Props> = (props) => {
           y: targetPosition.y - position.y,
         };
         if (Math.abs(diff.x) < 3 && Math.abs(diff.y) < 3) {
-          dispatcher({
+          dispatcher?.({
             position: targetPosition,
             size: fieldSize,
           });
+
+          clearInterval(intervalID.current ?? undefined);
           return targetPosition;
         }
         const nextPosition = calcNewPosition(position, {
           x: diff.x / 10,
           y: diff.y / 10,
         });
-        dispatcher({
+        dispatcher?.({
           position: nextPosition,
           size: fieldSize,
         });
         return nextPosition;
       });
     },
-    [dispatcher, fieldSize],
+    [dispatcher, fieldSize, intervalID],
   );
 
   const onFieldClick = useCallback(
@@ -124,15 +127,16 @@ const Canvas: React.FC<Props> = (props) => {
         userDisplayPosition,
       );
 
-      if (intervalID !== null) {
-        clearInterval(intervalID);
+      if (intervalID.current !== null) {
+        clearInterval(intervalID.current);
       }
+
       const id = setInterval(() => {
         updateUserPosition(clickPosition);
       }, 1000 / 60);
-      setIntervalID(id);
+      intervalID.current = id;
     },
-    [intervalID, updateUserPosition, userDisplayPosition, userPosition],
+    [updateUserPosition, userDisplayPosition, userPosition],
   );
 
   if (