feat: connect client to realtime WebSocket

src/App.svelte

@@ -13,6 +13,8 @@
   let authError = '';
   let authBusy = false;
   let connectionNotice = '';
+  let realtimeState = 'DISCONNECTED';
+  let realtimeSocket: WebSocket | undefined;
   let oauthLink = '';
   let oauthIdentity: 'streamer' | 'bot' = 'streamer';
   let oauthBusy = false;
@@ -60,6 +62,7 @@
       authenticated = true;
       mustReplaceCredentials = result.must_replace_credentials;
       connectionState = 'CONNECTED';
+      connectRealtime();
       if (!mustReplaceCredentials) password = '';
       if (mustReplaceCredentials) newUsername = username;
     } catch (error) {
@@ -95,6 +98,9 @@
   }
 
   async function logout() {
+    realtimeSocket?.close();
+    realtimeSocket = undefined;
+    realtimeState = 'DISCONNECTED';
     if (sessionToken) {
       await fetch(`${serverAddress}/api/v1/auth/logout`, { method: 'POST', headers: { authorization: `Bearer ${sessionToken}` } }).catch(() => undefined);
     }
@@ -104,6 +110,32 @@
     oauthLink = '';
   }
 
+  function connectRealtime() {
+    realtimeSocket?.close();
+    const socketUrl = serverAddress.replace(/^http/, 'ws') + '/api/v1/ws';
+    realtimeState = 'CONNECTING';
+    const socket = new WebSocket(socketUrl);
+    realtimeSocket = socket;
+    socket.onopen = () => {
+      socket.send(JSON.stringify({ frame_type: 'authenticate', token: sessionToken }));
+    };
+    socket.onmessage = (message) => {
+      try {
+        const event: { event_type?: string } = JSON.parse(message.data);
+        if (event.event_type === 'connection.ready') realtimeState = 'CONNECTED';
+      } catch {
+        realtimeState = 'DISCONNECTED';
+      }
+    };
+    socket.onclose = () => {
+      realtimeState = 'DISCONNECTED';
+      if (realtimeSocket === socket) realtimeSocket = undefined;
+    };
+    socket.onerror = () => {
+      realtimeState = 'DISCONNECTED';
+    };
+  }
+
   async function createOAuthLink(identity: 'streamer' | 'bot') {
     oauthBusy = true;
     oauthError = '';
@@ -188,7 +220,7 @@
           <div class="empty-row">Sign in as administrator to connect accounts.</div>
         {/if}
       </div>
-      <div class="side-section side-footer"><div class="micro">SERVER VERSION</div><div class="mono">{serverVersion}</div></div>
+      <div class="side-section side-footer"><div class="micro">REALTIME</div><div class="mono">{realtimeState}</div><div class="micro version-label">SERVER VERSION</div><div class="mono">{serverVersion}</div></div>
     </aside>
 
     <section class="content-area">

src/styles.css

@@ -326,6 +326,10 @@ label {
   margin-top: auto;
   border-bottom: 0;
 }
+.version-label {
+  display: block;
+  margin-top: 13px;
+}
 .content-area {
   min-width: 0;
   padding: 8px;