feat:socet

app/dashboard/etle/page.tsx

@@ -13,18 +13,10 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
 import { Button } from "@/components/ui/button"
 import Image from "next/image"
+import { useEffect, useState } from "react"
+import { socket } from "@/components/socket"
 
 const dummy = [
   { url: "/sample-1.jpg" },
@@ -40,6 +32,60 @@ const dummy = [
 
 export default function Etle() {
   const router = useRouter()
+  const [sessionId, setSessionId] = useState<string | null>(null)
+  const [imageSrc, setImageSrc] = useState<string>("")
+  const [plate, setPlate] = useState<string>("")
+  const [confidence, setConfidence] = useState<number | null>(null)
+  const [history, setHistory] = useState<string[]>([])
+
+  useEffect(() => {
+    if (!socket.connected) {
+      socket.connect()
+    }
+
+    socket.on("connected", (data) => {
+      console.log("session", data.session_id)
+      setSessionId(data.session_id)
+    })
+
+    socket.emit("start_detection", {
+      stream_url: "/app/static/uploads/ds1",
+    })
+
+    socket.on("video_frame", (data) => {
+      console.log("frame", data.frame)
+      setImageSrc(`data:image/jpeg;base64,${data.frame}`)
+    })
+
+    socket.on("plate_detected", (data) => {
+      console.log("plate", data.plate_text)
+      setPlate(data.plate_text)
+      setConfidence(data.confidence ?? null)
+
+      const thumb = `data:image/jpeg;base64,${data.frame_thumb}`
+      setHistory((prev) => [thumb, ...prev].slice(0, 20))
+    })
+
+    socket.on("detection_stopped", (data) => {
+      console.log("Total:", data.total)
+    })
+
+    socket.on("error", (data) => {
+      console.error(data.message)
+    })
+
+    return () => {
+      socket.emit("stop_detection")
+      socket.removeAllListeners()
+      socket.disconnect()
+    }
+  }, [])
+
+  // const startDetection = () => {
+  //   socket.emit("start_detection", {
+  //     stream_url: "/app/static/uploads/ds1",
+  //   })
+  // }
   return (
     <div className="flex flex-col">
       <div className="flex h-[8vh] flex-row items-center gap-10 bg-[#0057B3] px-8 py-5">
@@ -50,23 +96,25 @@ export default function Etle() {
       </div>
       <div className="flex h-[92vh] flex-col items-start gap-5 bg-gray-200 p-8 text-black">
         <p className="text-2xl font-semibold">TRAFFIC VIOLATIONS</p>
-        <Image
+        {/* <Button onClick={startDetection}>START DETECTION</Button> */}
-          src={"/sample-1.jpg"}
+        {imageSrc && (
-          width={1280}
+          <img
-          height={960}
+            src={imageSrc}
-          alt={"main-image"}
+            alt="Realtime"
-          className="w-screen rounded-lg md:w-full xl:w-180"
+            className="w-screen rounded-lg md:w-full xl:w-180"
-        />
+          />
+        )}
         <Button
           variant="ghost"
           className="h-12 bg-white px-10 text-xl shadow-sm"
         >
-          D1234PZ
+          {plate || "Belum ada plat"}
         </Button>
         <p className="text-2xl font-semibold">VIOLATIONS</p>
         <p>
-          Plat yang terdeteksi berangka D1234PZ di 2026-01-08 jam 17:55:26
+          {plate
-          berada di jalur 2
+            ? `Plat ${plate} terdeteksi dengan confidence ${confidence}`
+            : "Menunggu deteksi..."}
         </p>
       </div>
       <Drawer direction="right">
@@ -91,6 +139,11 @@ export default function Etle() {
                 />
               </div>
             ))}
+            {history.map((img, index) => (
+              <div key={index} className="rounded-lg bg-white p-3">
+                <img src={img} className="rounded-lg" />
+              </div>
+            ))}
           </div>
         </DrawerContent>
       </Drawer>

components/socket.tsx

@@ -0,0 +1,8 @@
+import { io, Socket } from "socket.io-client"
+
+const URL = "http://plate.koronyo.online/"
+// const URL = "http://kubik.koroniyo.online:7272/"
+
+export const socket: Socket = io(URL, {
+  autoConnect: false,
+})

package-lock.json

@@ -33,6 +33,7 @@
         "react-dom": "^19.2.4",
         "react-hook-form": "^7.71.2",
         "shadcn": "^4.0.8",
+        "socket.io-client": "^4.8.3",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.1",
         "tw-animate-css": "^1.4.0",
@@ -3184,6 +3185,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -5173,6 +5179,26 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
+      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.20.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
@@ -9425,6 +9451,32 @@
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
+      "integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -10410,6 +10462,26 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/wsl-utils": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.3.1.tgz",
@@ -10425,6 +10497,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -12,36 +12,36 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4.2.1",
     "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
     "embla-carousel-react": "^8.6.0",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "16.1.7",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.577.0",
     "next": "16.1.7",
     "next-themes": "^0.4.6",
+    "postcss": "^8",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.71.2",
     "shadcn": "^4.0.8",
+    "socket.io-client": "^4.8.3",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0",
-    "vaul": "^1.1.2",
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4.2.1",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.4",
-    "eslint-config-next": "16.1.7",
-    "postcss": "^8",
-    "prettier": "^3.8.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4.2.1",
-    "typescript": "^5.9.3"
+    "tw-animate-css": "^1.4.0",
-  },
+    "typescript": "^5.9.3",
-  "devDependencies": {}
+    "vaul": "^1.1.2"
+  }
 }