ryan/games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Fix SSE architecture for reliable connections (#13)
All checks were successful
CI / Deploy / test (push) Successful in 14s
Details
CI / Deploy / lint (push) Successful in 25s
Details
CI / Deploy / deploy (push) Successful in 1m32s
Details

Browse Source
This commit was merged in pull request #13.
This commit is contained in:
ryan
2026-03-03 23:33:13 +00:00
parent 331c4c8759
commit 67a768ea22
20 changed files with 2950 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
features/common/components/shared.templ
View File

@@ -1,7 +1,7 @@
package components
import (
"fmt"
"time"
"github.com/starfederation/datastar-go/datastar"
)
@@ -48,60 +48,13 @@ templ NicknamePrompt(returnPath string) {
</main>
}
func isStale(lastPing int64) bool {
return lastPing == 0
}
var connectionWatcherHandle = templ.NewOnceHandle()
// ConnectionIndicator shows a small dot indicating SSE connection status.
// Server patches this with a timestamp; client JS detects staleness.
templ ConnectionIndicator(lastPing int64) {
<div
id="connection-indicator"
class="fixed top-2 right-2"
data-last-ping={ fmt.Sprintf("%d", lastPing) }
>
<div class="inline-grid *:[grid-area:1/1]">
<div
id="connection-ping"
class={
"status status-sm",
templ.KV("status-success animate-ping", !isStale(lastPing)),
templ.KV("status-error", isStale(lastPing)),
}
></div>
<div
id="connection-dot"
class={
"status status-sm",
templ.KV("status-success", !isStale(lastPing)),
templ.KV("status-error", isStale(lastPing)),
}
></div>
</div>
// LiveClock shows the current server time, updated every second via SSE.
// If the clock stops updating, users know the connection is stale.
templ LiveClock() {
<div class="fixed top-2 right-2 flex items-center gap-1.5 text-xs opacity-60 font-mono">
<div style="width: 6px; height: 6px; border-radius: 50%; background-color: #22c55e;"></div>
{ time.Now().Format("15:04:05") }
</div>
@connectionWatcherHandle.Once() {
@connectionWatcher()
}
}
script connectionWatcher() {
setInterval(function() {
var el = document.getElementById('connection-indicator');
var dot = document.getElementById('connection-dot');
var ping = document.getElementById('connection-ping');
if (!el || !dot || !ping) return;
var lastPing = parseInt(el.dataset.lastPing, 10) || 0;
var stale = Date.now() - lastPing > 20000;
dot.classList.toggle('status-success', !stale);
dot.classList.toggle('status-error', stale);
ping.classList.toggle('status-success', !stale);
ping.classList.toggle('status-error', stale);
ping.classList.toggle('animate-ping', !stale);
}, 1000);
}
templ GameJoinPrompt(loginURL string, registerURL string, gamePath string) {

5
features/common/layouts/base.templ
View File

@@ -1,6 +1,7 @@
package layouts
import (
"github.com/ryanhamamura/games/assets"
"github.com/ryanhamamura/games/config"
"github.com/ryanhamamura/games/version"
)
@@ -11,8 +12,8 @@ templ Base(title string) {
<head>
<title>{ title }</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<script defer type="module" src="/assets/js/datastar.js"></script>
<link href="/assets/css/output.css" rel="stylesheet" type="text/css"/>
<script defer type="module" src={ assets.StaticPath("js/datastar.js") }></script>
<link href={ assets.StaticPath("css/output.css") } rel="stylesheet" type="text/css"/>
</head>
<body class="flex flex-col h-screen">
if config.Global.Environment == config.Dev {