Atridad Lahiji
497abfe83f
All checks were successful
Docker Deploy / build-and-push (push) Successful in 1m13s
62 lines
2 KiB
HTML
62 lines
2 KiB
HTML
{{define "title"}}
|
|
Atridad Lahiji // Tools // SSE Demo
|
|
{{end}}
|
|
|
|
{{define "navcontent"}}
|
|
Atridad Lahiji // Tools // SSE Demo
|
|
{{end}}
|
|
|
|
{{define "description"}}
|
|
A demo of my SSE implementation.
|
|
{{end}}
|
|
|
|
{{define "head"}}
|
|
{{end}}
|
|
|
|
{{define "main"}}
|
|
<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
|
|
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 id="sse-target" hx-ext="sse" sse-connect="/api/sse" sse-swap="message">
|
|
Waiting for SSE Message...
|
|
</div>
|
|
|
|
<p class="text-lg">Here you can send messages on the default channel:</p>
|
|
<form hx-post="/api/tools/sendsse" hx-trigger="submit" hx-swap="none" class="flex-col flex gap-2">
|
|
<div class="label">
|
|
<span class="label-text">Message</span>
|
|
</div>
|
|
<input type="text" name="message" value="Hello world!" placeholder="Enter your message here"
|
|
class="input input-bordered input-primary w-full max-w-xs" />
|
|
|
|
<button type="submit" class="btn btn-primary">Send Event</button>
|
|
</form>
|
|
{{end}}
|
|
|
|
{{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}}
|