fix: socket in shake

apps/web/package.json

@@ -13,12 +13,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "axios": "^1.6.8",
     "@fingerprintjs/fingerprintjs": "^4.2.2",
+    "axios": "^1.6.8",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "socket.io-client": "^4.7.5"
+    "socket.io-client": "^4.7.5",
+    "universal-cookie": "^7.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",

apps/web/src/app/(user)/shake/[university]/page.tsx

@@ -6,8 +6,9 @@ import { getMobileOperatingSystem } from "@/utils/getMobileOperatingSystem";
 import ShakeComponent from '../../../../components/Shake';
 import { useParams, useSearchParams } from "next/navigation";
 import { Suspense } from 'react';
-import { io } from "socket.io-client";
+import { io, Socket } from "socket.io-client";
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
+import Cookies from 'universal-cookie';
 
 let shaking: { x: number; y: number; z: number } | undefined;
 
@@ -17,17 +18,18 @@ function normalize(x: number, y: number, z: number) {
 }
 
 export default function Shake() {
-
-    const [cid, setCid] = useState<string | null>(null);
     let fid: string | null = null;
+    let socket: Socket | null = null;
+    const cookies = new Cookies();
 
     useEffect(() => {
         const handleConnect = () => {
             console.log('Client has connected to the server!');
         };
 
         const handleCid = (serverCid: string) => {
-            setCid(serverCid);
+            console.log('Received cid from server:');
+            cookies.set('cid', serverCid);
         };
 
         const handleDisconnect = () => {
@@ -38,14 +40,18 @@ export default function Shake() {
             const fp = await FingerprintJS.load();
             const result = await fp.get();
             fid = result.visitorId;
+            const savedCid = cookies.get('cid');
+
+            const extraHeaders: { [key: string]: string } = {
+                fid: fid,
+                name: 'john'
+            };
 
-            const socket = io('https://api.cutu2024.sgcu.in.th/', {
-                extraHeaders: {
-                    fid: fid,
-                    name: 'john'
-                }
-            });
-
+            if (savedCid) {
+                extraHeaders.cid = savedCid;
+            }
+            console.log(extraHeaders);
+            const socket = io('https://api.cutu2024.sgcu.in.th', { extraHeaders, path: "/api/ws", transports: ['websocket'] });
             socket.on('connect', handleConnect);
             socket.on('cid', handleCid);
             socket.on('disconnect', handleDisconnect);
@@ -94,8 +100,8 @@ export default function Shake() {
                 };
                 setCount(prevCount => {
                     const newCount = prevCount + 1;
-                    if (fid && cid) {
-                        socket.emit('count', { count: newCount, fid, cid });
+                    if (socket) {
+                        socket.emit('events', `${university} ${count}`);
                     }
                     return newCount;
                 });