starred/godoxy-yusing
1
0
Fork 0
mirror of https://github.com/yusing/godoxy.git synced 2026-04-26 10:18:29 +02:00
Code Issues 18 Packages Projects Releases 10 Wiki Activity

feat(idlewatcher): implement real-time SSE-based loading page with enhanced UX

Browse Source 
This major overhaul of the idlewatcher system introduces a modern, real-time loading experience with Server-Sent Events (SSE) streaming and improved error handling.

- **Real-time Event Streaming**: New SSE endpoint (`/$godoxy/wake-events`) provides live updates during container wake process
- **Enhanced Loading Page**: Modern console-style interface with timestamped events and color-coded status messages
- **Improved Static Asset Management**: Dedicated paths for CSS, JS, and favicon to avoid conflicting with upstream assets
- **Event History Buffer**: Stores wake events for reconnecting clients and debugging

- Refactored HTTP request handling with cleaner static asset routing
- Added `WakeEvent` system with structured event types (starting, waking_dep, dep_ready, container_woke, waiting_ready, ready, error)
- Implemented thread-safe event broadcasting using xsync.Map for concurrent SSE connections
- Enhanced error handling with detailed logging and user-friendly error messages
- Simplified loading page template system with better asset path management
- Fixed race conditions in dependency waking and state management

- Removed `common.go` functions (canceled, waitStarted) - moved inline for better context
- Updated Waker interface to accept context parameter in Wake() method
- New static asset paths use `/$godoxy/` prefix to avoid conflicts

- Console-style output with Fira Code font for better readability
- Color-coded event types (yellow for starting, blue for dependencies, green for success, red for errors)
- Automatic page refresh when container becomes ready
- Improved visual design with better glassmorphism effects and responsive layout
- Real-time progress feedback during dependency wake and container startup

This change transforms the static loading page into a dynamic, informative experience that keeps users informed during the wake process while maintaining backward compatibility with existing routing behavior.
This commit is contained in:
yusing
2025-11-07 14:58:33 +08:00
parent 3cbd70f73a
commit 910ef639a4
19 changed files with 531 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
internal/idlewatcher/html/loading_page.html
View File

@@ -1,37 +1,32 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{.Title}}</title>
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="{{.LoadingPageCSSPath}}" />
<link rel="icon" href="{{.FavIconPath}}" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<script>
const wakeEventsPath = "{{.WakeEventsPath}}";
</script>
<script src="{{.LoadingPageJSPath}}" defer></script>
<div class="container">
<!-- icon handled by waker_http -->
<img class="logo" src="/favicon.ico" />
<img class="logo" src="{{.FavIconPath}}" />
<div id="loading-dots" class="loading-dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div id="message" class="message">{{.Message}}</div>
<div id="console" class="console" />
</div>
<script>
window.onload = async function () {
let resp = await fetch(window.location.href, {
headers: {
"{{.CheckRedirectHeader}}": "1",
},
});
if (resp.ok) {
window.location.href = resp.url;
} else {
document.getElementById("message").innerText = await resp.text();
document.getElementById("loading-dots").remove();
}
};
</script>
</body>
</html>