Merge branch 'main' into feature/db-update-urls

Author: BruCandy

frontend/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.5/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.6/schema.json",
   "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
   "files": { "ignoreUnknown": false },
   "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2 },

frontend/src/hooks/useChatHandler.ts

@@ -1 +1,77 @@
-/* 接続、再接続、切断のライフサイクル管理の実装 */
+/* メッセージの受信と送信のイベント管理の実装 */
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/* 送受信するデータ型の設定 */
+export type MemberId = number;
+
+export interface Member {
+  id: MemberId;
+  name: string;
+}
+
+export interface Payment {
+  id: number;
+  amount: number | "";
+  paidBy: MemberId;
+  paidFor: MemberId;
+}
+
+export type WsMessage = Member | Payment;
+
+/* 接続を管理するカスタムフック */
+export const useChatHandler = (url: string) => {
+  const wsRef = useRef<WebSocket | null>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const onMessageRef = useRef<((msg: WsMessage) => void) | null>(null);
+
+  useEffect(() => {
+    /* WebSocket接続の確立 */
+    const ws = new WebSocket(url);
+    wsRef.current = ws;
+
+    /* WebSocketイベントのハンドラ */
+    const handleOpen = () => {
+      setIsConnected(true);
+    };
+
+    const handleClose = () => {
+      setIsConnected(false);
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data) as WsMessage;
+        onMessageRef.current?.(data);
+      } catch (_error) {
+        console.error("Failed to parse WebSocket message:", event.data);
+      }
+    };
+
+    ws.addEventListener("open", handleOpen);
+    ws.addEventListener("close", handleClose);
+    ws.addEventListener("message", handleMessage);
+
+    return () => {
+      ws.close();
+      ws.removeEventListener("open", handleOpen);
+      ws.removeEventListener("close", handleClose);
+      ws.removeEventListener("message", handleMessage);
+    };
+  }, [url]);
+
+  /* メッセージ受信時 */
+  const setOnMessage = (handler: (msg: WsMessage) => void) => {
+    onMessageRef.current = handler;
+  };
+
+  /* メッセージ送信時 */
+  const sendMessage = useCallback((msg: WsMessage) => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      console.error("WebSocket is not connected.");
+      return;
+    }
+    wsRef.current.send(JSON.stringify(msg));
+  }, []);
+
+  return { isConnected, sendMessage, setOnMessage };
+};

frontend/src/hooks/useWebSocket.ts

@@ -1 +1,90 @@
-/* メッセージの受信と送信のイベント管理の実装 */
+/* 接続、再接続、切断のライフサイクル管理の実装 */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseWebSocketOptions {
+  reconnect?: boolean;
+  reconnectInterval?: number;
+}
+
+export function useWebSocket<T = unknown>(
+  url: string,
+  options: UseWebSocketOptions = {},
+) {
+  const { reconnect = true, reconnectInterval = 3000 } = options;
+
+  const socketRef = useRef<WebSocket | null>(null);
+
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const messageHandlerRef = useRef<((data: T) => void) | null>(null);
+
+  const [isConnected, setIsConnected] = useState(false);
+
+  const connect = useCallback(() => {
+    if (socketRef.current) return;
+
+    const socket = new WebSocket(url);
+    socketRef.current = socket;
+
+    socket.onopen = () => {
+      console.log("[WebSocket] Connected:", url);
+      setIsConnected(true);
+
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+    };
+
+    socket.onmessage = (event) => {
+      try {
+        const parsed = JSON.parse(event.data) as T;
+        messageHandlerRef.current?.(parsed);
+      } catch (_err) {
+        console.error("[WebSocket] Failed to parse message:", event.data);
+      }
+    };
+
+    socket.onclose = () => {
+      console.log("[WebSocket] Disconnected:", url);
+      setIsConnected(false);
+      socketRef.current = null;
+
+      if (reconnect) {
+        reconnectTimerRef.current = setTimeout(connect, reconnectInterval);
+      }
+    };
+
+    socket.onerror = (err) => {
+      console.error("[WebSocket] Error:", err);
+      socket.close();
+    };
+  }, [url, reconnect, reconnectInterval]);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+      socketRef.current?.close();
+    };
+  }, [connect]);
+
+  const sendMessage = useCallback((message: T) => {
+    if (socketRef.current?.readyState === WebSocket.OPEN) {
+      socketRef.current.send(JSON.stringify(message));
+    } else {
+      console.warn("[WebSocket] Cannot send message. Not connected.");
+    }
+  }, []);
+
+  const setOnMessage = useCallback((handler: (data: T) => void) => {
+    messageHandlerRef.current = handler;
+  }, []);
+
+  return {
+    isConnected,
+    sendMessage,
+    setOnMessage,
+  };
+}