41 lines
1.2 KiB
HTML
41 lines
1.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"}}
|
|
<div class="tool-page">
|
|
<h1>Server Sent Events Demo</h1>
|
|
|
|
<p>This page demonstrates the use of the <a href="https://htmx.org/extensions/sse/" class="tool-link">HTMX SSE
|
|
Extension</a> to receive Server Sent Events on the "default" channel.</p>
|
|
<p>Any events received on the "default" channel will appear below:</p>
|
|
<div hx-ext="sse" sse-connect="/api/sse" sse-swap="message" class="sse-message-container">
|
|
Waiting for SSE Message...
|
|
</div>
|
|
|
|
<p>Here you can send messages on the default channel:</p>
|
|
<form hx-post="/api/tools/sendsse" hx-trigger="submit" hx-swap="none" class="form-group">
|
|
<div class="form-group">
|
|
<label for="message">Message</label>
|
|
<input type="text" id="message" name="message" value="Hello world!" placeholder="Enter your message here" />
|
|
</div>
|
|
|
|
<button type="submit" class="tool-button">Send Event</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "foot"}}
|
|
<script src="/public/js/htmx.sse.js"></script>
|
|
{{end}}
|