????

pages/templates/tools.ssedemo.html

@@ -7,7 +7,7 @@ Atridad Lahiji // Tools // SSE Demo
 {{end}}
 
 {{define "description"}}
-A demo of my SSE implimentation.
+A demo of my SSE implementation.
 {{end}}
 
 {{define "head"}}
@@ -17,9 +17,9 @@ A demo of my SSE implimentation.
 <h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-[2rem]">Server Sent Events Demo</h2>
 
 <p class="text-lg">This page demonstrates the use of the <a href="https://htmx.org/extensions/sse/">HTMX SSE
-    Extention</a> to receive Server Sent Events on the "default" channel.</p>
+    Extension</a> to receive Server Sent Events on the "default" channel.</p>
 <p class="text-lg">Any events received on the "default" channel will appear below:</p>
-<div hx-ext="sse" sse-connect="/api/sse" sse-swap="message">
+<div id="sse-target" hx-ext="sse" sse-connect="/api/sse" sse-swap="message">
   Waiting for SSE Message...
 </div>
 
@@ -37,4 +37,26 @@ A demo of my SSE implimentation.
 
 {{define "foot"}}
 <script src="/public/js/htmx.sse.js"></script>
+<script>
+  // Custom EventSource factory with better retry handling
+  htmx.createEventSource = function(url) {
+    console.log("Creating EventSource for:", url);
+    
+    // Create EventSource with credentials
+    const source = new EventSource(url, { withCredentials: true });
+    
+    // Log connection state changes
+    source.onopen = function() {
+      console.log("SSE connection opened successfully");
+      document.getElementById('sse-target').innerHTML = "Connected to SSE. Waiting for messages...";
+    };
+    
+    source.onerror = function(err) {
+      console.error("SSE connection error:", err);
+      document.getElementById('sse-target').innerHTML = "Connection error. Retrying...";
+    };
+    
+    return source;
+  };
+</script>
 {{end}}