test(streaming logs): more test but failed again

frontend/src/components/ocme/CycleCountLog.tsx

@@ -1,46 +1,49 @@
-//import {useEffect, useState} from "react";
+// //import {useEffect, useState} from "react";
-import {LstCard} from "../extendedUI/LstCard";
+// import {LstCard} from "../extendedUI/LstCard";
-import {CardContent, CardHeader} from "../ui/card";
+// import {CardContent, CardHeader} from "../ui/card";
-import {Skeleton} from "../ui/skeleton";
+// import {Skeleton} from "../ui/skeleton";
-import {Button} from "../ui/button";
+// import {Button} from "../ui/button";
-import {toast} from "sonner";
+// import {toast} from "sonner";
+// import {useEffect} from "react";
 
-export default function CycleCountLog() {
+// export default function CycleCountLog() {
-    //const [logs, setLogs] = useState([]);
+//     //const [logs, setLogs] = useState([]);
-    //const [streaming, setStreaming] = useState(false); // Track if streaming is active
+//     //const [streaming, setStreaming] = useState(false); // Track if streaming is active
 
-    // useEffect(() => {
+//     useEffect(() => {
-    //     // Start streaming when the button is clicked
+//         // Start streaming when the button is clicked
-    //     let es;
+//         let es;
 
-    //     es = new EventSource("http://localhost:4000/api/logger/logs/stream?service=ocme-count&level=info");
+//         const url = `http://localhost:4000/api/log`;
-    //     es.onopen = () => console.log(">>> Connection opened!");
-    //     es.onerror = (e) => console.log("ERROR!", e);
-    //     es.onmessage = (e) => {
-    //         console.log(">>>", JSON.stringify(e));
-    //     };
 
-    //     return () => es.close();
+//         es = new EventSource(url, {withCredentials: true});
-    // }, []); // Effect runs when `streaming` state changes
+//         es.onopen = () => console.log(">>> Connection opened!");
+//         es.onerror = (e) => console.log("ERROR!", e);
+//         es.onmessage = (e) => {
+//             console.log(">>>", JSON.stringify(e));
+//         };
 
-    // const handleStartStreaming = () => {
+//         return () => es.close();
-    //     setStreaming(true); // Start streaming when button is clicked
+//     }, []);
-    // };
+
-    return (
+//     // const handleStartStreaming = () => {
-        <LstCard className="w-48">
+//     //     setStreaming(true); // Start streaming when button is clicked
-            <CardHeader className="flex justify-center">
+//     // };
-                <span>Cycle Count logs</span>
+//     return (
-            </CardHeader>
+//         <LstCard className="w-48">
-            <CardContent>
+//             <CardHeader className="flex justify-center">
-                {Array(10)
+//                 <span>Cycle Count logs</span>
-                .fill(0)
+//             </CardHeader>
-                .map((_, i) => (
+//             <CardContent>
-                    <div key={i}>
+//                 {Array(10)
-                        <Skeleton className="m-2 h-4" />
+//                 .fill(0)
-                    </div>
+//                 .map((_, i) => (
-                ))}
+//                     <div key={i}>
-            </CardContent>
+//                         <Skeleton className="m-2 h-4" />
-            <Button onClick={() => toast.success("SOmething")}>Start Stream</Button>
+//                     </div>
-        </LstCard>
+//                 ))}
-    );
+//             </CardContent>
-}
+//             <Button onClick={() => toast.success("SOmething")}>Start Stream</Button>
+//         </LstCard>
+//     );
+// }

server/services/logger/controller/streamLogs.ts

@@ -1,7 +1,7 @@
 import type {Context} from "hono";
 import {db} from "../../../../database/dbclient.js";
 import {and, eq, gt} from "drizzle-orm";
-import {streamSSE} from "hono/streaming";
+import {streamSSE, streamText} from "hono/streaming";
 import {logs} from "../../../../database/schema/logs.js";
 
 export async function streamLogs(c: Context) {

server/services/logger/routes/streamLogs.ts

@@ -29,6 +29,11 @@ app.openapi(
     }),
     async (c) => {
         apiHit(c, {endpoint: `api/logger/logs`});
+        c.header("Access-Control-Allow-Origin", "*"); // Or restrict to a specific origin
+        c.header("Access-Control-Allow-Headers", "Content-Type");
+        c.header("Content-Type", "text/event-stream");
+        c.header("Cache-Control", "no-cache");
+        c.header("Connection", "keep-alive");
         return streamLogs(c);
     }
 );