Merge pull request #57 from dscsnu/StreamListener

Stream listener

Author: lalitm1004

frontend/package-lock.json

@@ -16,6 +16,7 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/vite": "^4.0.0",
+		"@types/event-source-polyfill": "^1.0.5",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.0.0",
@@ -25,6 +26,7 @@
 	"dependencies": {
 		"@supabase/ssr": "^0.6.1",
 		"@supabase/supabase-js": "^2.49.4",
+		"event-source-polyfill": "^1.0.31",
 		"nanoid": "^5.1.5",
 		"tailwind-merge": "^3.2.0"
 	}

frontend/package.json

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { PUBLIC_BACKEND_URL, PUBLIC_STREAM_URL } from "$env/static/public";
+    import { JwtTokenStore } from "$lib/stores/JwtTokenStore";
+    import { TeamStore } from "$lib/stores/TeamStore";
+    import { EventSourcePolyfill } from "event-source-polyfill";
+    import { onMount } from "svelte";
+    import { get } from "svelte/store";
+
+    let eventSource: EventSourcePolyfill | null = $state(null);
+
+    const cleanup = () => {
+        if (eventSource) {
+            eventSource.close();
+            eventSource = null;
+        }
+    }
+
+    const connect = () => {
+        console.log('Attempting Connection');
+        const cleanedUrl = PUBLIC_BACKEND_URL.replace(/\/+$/, '');
+        const cleanedEndpoint = PUBLIC_STREAM_URL.replace(/^\/+/, '');
+        const jwt = get(JwtTokenStore);
+
+        eventSource = new EventSourcePolyfill(`${cleanedUrl}/${cleanedEndpoint}`, {
+            headers: {
+                'Authorization': `Bearer ${jwt}`
+            }
+        });
+
+        eventSource.onmessage = (event) => {
+            alert(event.data);
+        }
+
+        eventSource.onerror = (error) => {
+            console.error(`Stream error: ${error}`);
+            cleanup();
+        }
+    }
+
+    onMount(() => {
+        const unsubscribe = TeamStore.subscribe(current => {
+            if (current) {
+                connect();
+            } else {
+                cleanup();
+            }
+        })
+
+        return () => unsubscribe();
+    })
+</script>

frontend/src/lib/components/StreamListener.svelte

@@ -11,6 +11,7 @@
 	import Toast from "$lib/components/Toast.svelte";
 	import { LoadingStore } from "$lib/stores/LoadingStore";
 	import Loading from "$lib/components/Loading.svelte";
+    import StreamListener from "$lib/components/StreamListener.svelte";
 
 	let { data, children } = $props();
 	let { supabase, session, user } = $derived(data);
@@ -71,3 +72,6 @@
 {#if $LoadingStore}
 	<Loading />
 {/if}
+
+
+<StreamListener />

frontend/src/routes/+layout.svelte

@@ -27,7 +27,7 @@
 
         LoadingStore.set(true);
         try {
-            const response = await fetchWithAuth('api/createteam', {
+            const response = await fetchWithAuth('api/team/create', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -84,7 +84,7 @@
 
         LoadingStore.set(true)
         try {
-            const response = await fetchWithAuth('api/updateteam', {
+            const response = await fetchWithAuth('api/team/update', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',