feat: push scrobbles rather than pull them via SSE

frontend/package-lock.json

···
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "htmx-ext-sse": "^2.2.2",
         "htmx.org": "^2.0.4",
         "normalize.css": "^8.0.1",
         "three": "^0.172.0"
···
         "node": ">=8"
       }
     },
+    "node_modules/htmx-ext-sse": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/htmx-ext-sse/-/htmx-ext-sse-2.2.2.tgz",
+      "integrity": "sha512-MTnKkBzA2t4sI8gOXrRiPaceTlkUbrw3+3qOy1BfuBNIPBalsJiT4qxUGd6W48ggOkfe2akOnB8uxICJKw+Dsg=="
+    },
     "node_modules/htmx.org": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.4.tgz",
···
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
+    },
+    "htmx-ext-sse": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/htmx-ext-sse/-/htmx-ext-sse-2.2.2.tgz",
+      "integrity": "sha512-MTnKkBzA2t4sI8gOXrRiPaceTlkUbrw3+3qOy1BfuBNIPBalsJiT4qxUGd6W48ggOkfe2akOnB8uxICJKw+Dsg=="
     },
     "htmx.org": {
       "version": "2.0.4",

frontend/package.json

···
   },
   "dependencies": {
     "htmx.org": "^2.0.4",
+    "htmx-ext-sse": "^2.2.2",
     "normalize.css": "^8.0.1",
     "three": "^0.172.0"
   },

frontend/src/ts/htmx.ts

···
+import htmx from "htmx.org";
+
+declare global {
+  interface Window {
+    htmx: typeof htmx;
+  }
+}
+
+window.htmx = htmx;

frontend/src/ts/main.ts

···
 import "../css/main.css";
 
-import "htmx.org";
+// need to load htmx as a global variable before importing extensions
+import "./htmx";
+import "htmx-ext-sse";
 
 import "./header";
 import "./logo";

server/Cargo.lock

···
 ]
 
 [[package]]
+name = "async-stream"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b5a71a6f37880a80d1d7f19efd781e4b5de42c88f0722cc13bcb6cc2cfe8476"
+dependencies = [
+ "async-stream-impl",
+ "futures-core",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "async-stream-impl"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c7c24de15d275a1ecfd47a380fb4d5ec9bfe0933f309ed5e705b775596a3574d"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
 name = "atomic-waker"
 version = "1.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 dependencies = [
  "anyhow",
  "askama",
+ "async-stream",
  "axum",
  "reqwest",
  "serde",
  "tokio",
+ "tokio-stream",
  "tower",
  "tower-http",
  "tracing",
···
 checksum = "5f6d0975eaace0cf0fcadee4e4aaa5da15b5c079146f2cffb67c113be122bf37"
 dependencies = [
  "rustls",
+ "tokio",
+]
+
+[[package]]
+name = "tokio-stream"
+version = "0.1.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eca58d7bba4a75707817a2c44174253f9236b2d5fbd055602e9d5c07c139a047"
+dependencies = [
+ "futures-core",
+ "pin-project-lite",
  "tokio",
 ]
 

server/Cargo.toml

···
 [dependencies]
 anyhow = "1.0.57"
 askama = { version = "0.13.0", git="https://github.com/rinja-rs/askama.git" }
+async-stream = "0.3.6"
 axum = "0.8.1"
 reqwest = { version = "0.12.12", features = ["json"] }
 serde = { version = "1.0.217", features = ["derive"] }
 tokio = { version = "1.18.2", features = ["full"] }
+tokio-stream = "0.1.17"
 tower = "0.5.2"
 tower-http = { version = "0.6.2", features = ["compression-full", "fs", "trace", "set-header"] }
 tracing = "0.1.34"

server/src/main.rs

···
 mod scrobble;
 mod scrobble_monitor;
 
-use std::{env, net::SocketAddr};
+use std::{convert::Infallible, env, net::SocketAddr, time::Duration};
 
 use crate::index::get_index;
 use crate::scrobble_monitor::ScrobbleMonitor;
 
 use askama::Template;
+use async_stream::stream;
 use axum::{
     http::{HeaderName, HeaderValue, StatusCode},
-    response::{Html, IntoResponse},
+    response::{sse, Html, IntoResponse, Sse},
     routing::{get, get_service},
     Extension, Router,
 };
+use tokio::time::{self, MissedTickBehavior};
+use tokio_stream::Stream;
 use tower::ServiceBuilder;
 use tower_http::{
     compression::CompressionLayer, services::ServeDir, set_header::SetResponseHeaderLayer,
···
     })
 }
 
-async fn get_scrobble(Extension(mut monitor): Extension<ScrobbleMonitor>) -> impl IntoResponse {
-    let template = monitor.get_scrobble().await.map_err(|err| {
-        tracing::error!("failed to get data from last.fm: {err:?}");
-        StatusCode::BAD_GATEWAY
-    })?;
-    template.render().map(Html).map_err(|err| {
-        tracing::error!("failed to render scrobble: {err:?}");
-        StatusCode::INTERNAL_SERVER_ERROR
-    })
+async fn get_scrobble(
+    Extension(mut monitor): Extension<ScrobbleMonitor>,
+) -> Sse<impl Stream<Item = Result<sse::Event, Infallible>>> {
+    let stream = stream! {
+        let mut interval = time::interval(Duration::from_secs(30));
+        interval.set_missed_tick_behavior(MissedTickBehavior::Skip);
+        interval.tick().await;
+        loop {
+            interval.tick().await;
+            let template = match monitor.get_scrobble().await {
+                Ok(template) => template,
+                Err(err) => {
+                    tracing::error!("failed to get data from last.fm: {err:?}");
+                    continue;
+                }
+            };
+            let data = match template.render() {
+                Ok(data) => data,
+                Err(err) => {
+                    tracing::error!("failed to render scrobble: {err:?}");
+                    break;
+                }
+            };
+            yield Ok(sse::Event::default().event("scrobble").data(data));
+        }
+    };
+
+    Sse::new(stream)
 }

server/templates/index.html

···
     </div>
     <div
       class="scrobble-bar"
-      hx-get="/scrobbles"
-      hx-trigger=
-        {%- if let Some(_) = scrobble -%}
-          "every 30s"
-        {%- else -%}
-          "load, every 30s"
-        {%- endif -%}
+      hx-ext="sse"
+      sse-connect="/scrobbles"
+      sse-swap="scrobble"
       >
       {%- match scrobble %} {%- when Some with (ScrobblesTemplate {intro, now_playing, image, srcset}) %}
       {% include "scrobble.html" %}