Added the functionality of realtime with fastAPI

Author: nabin2004

FastAPI/__pycache__/main.cpython-313.pyc

@@ -0,0 +1,28 @@
+from fastapi import FastAPI, WebSocket
+from fastapi.middleware.cors import CORSMiddleware
+from typing import List
+
+app = FastAPI()
+active_connections: List[WebSocket] = []
+
+# Allow all origins
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allows all origins
+    allow_credentials=True,
+    allow_methods=["*"],   # Allows all HTTP methods
+    allow_headers=["*"],   # Allows all headers
+)
+
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
+    await websocket.accept()
+    active_connections.append(websocket)
+
+    try:
+        while True:
+            data = await websocket.receive_text()
+            for connection in active_connections:
+                await connection.send_text(data)
+    except:
+        active_connections.remove(websocket)

FastAPI/main.py

@@ -1,17 +1,62 @@
-'use client'
-import React, { useState, useMemo } from 'react';
-import dynamic from 'next/dynamic'; // Import dynamic from Next.js
-import { Button } from "@/components/ui/button";
-import { Chess } from "chess.js"; 
-import { Chessboard } from 'react-chessboard'
-import { ModeToggle } from "@/components/ui/mode-toggle"; 
-import { ThemeProvider } from '@/components/theme-provider';
-
-
+"use client";
+import React, { useState, useMemo, useEffect, useRef } from "react";
+import { Chess } from "chess.js";
+import { Chessboard } from "react-chessboard";
+import { ThemeProvider } from "@/components/theme-provider";
+import { ModeToggle } from "@/components/ui/mode-toggle";
 
 export default function Home() {
   const [game, setGame] = useState(new Chess());
   const [position, setPosition] = useState(game.fen());
+  const ws = useRef(null); // Ref for WebSocket
+
+  // Initialize WebSocket connection when the component mounts
+  useEffect(() => {
+    ws.current = new WebSocket("ws://localhost:8000/ws"); // Replace with your WebSocket server address
+
+    // Handle incoming messages
+    ws.current.onmessage = (event) => {
+      const { sourceSquare, targetSquare } = JSON.parse(event.data);
+      const newMove = game.move({
+        from: sourceSquare,
+        to: targetSquare,
+        promotion: "q",
+      });
+
+      if (newMove) {
+        setPosition(game.fen());
+      }
+    };
+
+    // Clean up WebSocket on component unmount
+    return () => {
+      ws.current.close();
+    };
+  }, [game]);
+
+  // Handle moves on the board
+  function onDrop(sourceSquare, targetSquare) {
+    const move = game.move({
+      from: sourceSquare,
+      to: targetSquare,
+      promotion: "q",
+    });
+
+    if (move === null) {
+      return false;
+    }
+
+    // Update board state and send the move to the WebSocket server
+    setPosition(game.fen());
+
+    if (ws.current && ws.current.readyState === WebSocket.OPEN) {
+      ws.current.send(
+        JSON.stringify({ sourceSquare, targetSquare })
+      );
+    }
+
+    return true;
+  }
 
   const pieces = ["wP", "wN", "wB", "wR", "wQ", "wK", "bP", "bN", "bB", "bR", "bQ", "bK"];
 
@@ -32,48 +77,28 @@ export default function Home() {
     return pieceComponents;
   }, []);
 
-  // Function to handle moves
-  function onDrop(sourceSquare, targetSquare) {
-    const move = game.move({
-      from: sourceSquare,
-      to: targetSquare,
-      promotion: "q", // auto-promote to queen for simplicity
-    });
-
-    if (move === null) {
-
-      return false;
-    }
-
-    // Update position state if the move is valid
-    setPosition(game.fen());
-    return true;
-  }
-
   return (
-        <ThemeProvider>
-
-        <ModeToggle/>
-        <div className="m-10 w-screen max-w-xl flex justify-center items-center">
-          <Chessboard
-            id="StyledBoard"
-            boardOrientation="white"
-            position={position}
-            onPieceDrop={onDrop}
-            customBoardStyle={{
-              borderRadius: "4px",
-              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
-            }}
-            customDarkSquareStyle={{
-              backgroundColor: "#008B8B",
-            }}
-            customLightSquareStyle={{
-              backgroundColor: "#FCEAC7",
-            }}
-            customPieces={customPieces}
-          />
-
-        </div>
-        </ThemeProvider>
+    <ThemeProvider>
+      <ModeToggle />
+      <div className="m-10 w-screen max-w-xl flex justify-center items-center">
+        <Chessboard
+          id="StyledBoard"
+          boardOrientation="white"
+          position={position}
+          onPieceDrop={onDrop}
+          customBoardStyle={{
+            borderRadius: "4px",
+            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+          }}
+          customDarkSquareStyle={{
+            backgroundColor: "#008B8B",
+          }}
+          customLightSquareStyle={{
+            backgroundColor: "#FCEAC7",
+          }}
+          customPieces={customPieces}
+        />
+      </div>
+    </ThemeProvider>
   );
 }

frontend/chess/src/app/chess/page.jsx

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/chess/page.jsx", "src/app/chess/page.jsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/chess/page.jsx", "src/app/chess/page.jsx", "src/app/heatmap/page.jsx"],
   "exclude": ["node_modules"]
 }