=sse: events

sse/fe/src/routes/sse/+page.svelte

@@ -2,6 +2,9 @@
     import { onMount } from'svelte';
 
     $: msg = "";
+    $: jmsg = {};
+    $: dping = "";
+    $: dpong = "";
 
     function now() {
         const now = new Date(Date.now());
@@ -22,29 +25,37 @@
             console.log(`sse error ${now()}`);
             if (sse.readyState === EventSource.CONNECTING) {
                 console.log(`sse reconnecting ${now()}`);                
+                msg = `sse reconnecting ${now()}`;
+            } else {
+                msg = `sse error ${now()}`;    
             }
-            msg = `sse error ${now()}`;
         };
 
 		sse.onmessage = (e) => {
 			let Msg = JSON.parse(e.data);
 			console.log(`received: ${JSON.stringify(Msg)}`);
-            msg = `received: ${JSON.stringify(Msg)} ${Date.now()}`;
+            msg = `received: ${JSON.stringify(Msg)} ${now()}`;
+            jmsg = Msg;
 		};
         
         sse.addEventListener('ping', (e) => {
-            console.log(`ping: ${e.data}`);
-            msg = `ping: ${e.data} ${Date.now()}`;
+            let Msg = JSON.parse(e.data);
+            msg = `ping: ${Msg.id} ${Msg.data} ${now()}`;
+            console.log(msg);
+            dping = Msg.id;
         });
         
         sse.addEventListener('pong', (e) => {
-            console.log(`pong: ${e.data}`);
-            msg = `pong: ${e.data} ${Date.now()}`;
+            let Msg = JSON.parse(e.data);
+            msg = `pong: ${Msg.id} ${Msg.data} ${now()}`;
+            console.log(msg);
+            dpong = Msg.id;
         });
         
-        sse.addEventListener('message', (e) => {
-            console.log(`message: ${e.data}`);
-            msg = `message: ${e.data} ${Date.now()}`;
+        sse.addEventListener('msg', (e) => {
+            let Msg = JSON.parse(e.data);
+            msg = `Msg: ${Msg.id} ${Msg.data} ${now()}`;
+            console.log(msg);
         })
 		
         return () => {
@@ -62,11 +73,11 @@
         await fetch('/api/msg');
     }
 
-    async function ping() {
+    async function Ping() {
         await fetch('/api/ping');
     }
 
-    async function pong() {
+    async function Pong() {
         await fetch('/api/pong');
     }
 
@@ -75,7 +86,21 @@
 
 <h1>{msg}</h1>
 
+<ul>
+    <li>{jmsg.event}</li>
+    <li>{jmsg.data}</li>
+    <li>{jmsg.id}</li>
+</ul>
+<br>
+<h2>Ping: {dping}</h2>
+<br>
+<h2>Pong: {dpong}</h2>
+
 
 <button on:click={newmsg}>send Msg</button>
-<button on:click={ping}>send Ping</button>
-<button on:click={pong}>send Pong</button>
+<button on:click={Ping}>send Ping</button>
+<button on:click={Pong}>send Pong</button>
+
+<hr>
+
+<button on:click={Subscribe}>SSE Msg</button>