feat: implement chat functionality with message validation and streaming

Author: electron271

package-lock.json

@@ -13,6 +13,7 @@
     "@astrojs/cloudflare": "^12.4.0",
     "@astrojs/react": "^4.2.3",
     "@tailwindcss/vite": "^4.1.2",
+    "@types/node": "^22.15.3",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
     "astro": "^5.6.0",

package.json

@@ -1,5 +1,6 @@
 ---
 import { authors } from "../ts/vars";
+import ChatController from "../controllers/chat";
 
 // math equation to generate the accurate number of the day
 const x = new Date().getDate();
@@ -20,6 +21,8 @@ if (Math.random() < 0.1) {
 
 let accuracyStyle = `color: hsl(${accuracyPercentage}, 100%, 50%); font-weight: bold;`;
 const author = authors[Math.floor(Math.random() * authors.length)];
+
+const messages = ChatController.getInstance().getMessages();
 ---
 
 <script>
@@ -72,6 +75,56 @@ const author = authors[Math.floor(Math.random() * authors.length)];
   }
 </script>
 
+<script is:inline>
+  document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("chat");
+    const input = document.getElementById("message");
+    let lastSubmittedMessage = "";
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+
+      // Save the message BEFORE clearing the input
+      lastSubmittedMessage = input.value;
+
+      fetch("/api/chat", {
+        method: "POST",
+        body: JSON.stringify({ message: input.value }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      input.value = "";
+      input.focus();
+    });
+
+    const eventSource = new EventSource("/api/stream");
+    eventSource.onmessage = (event) => {
+      const messages = document.getElementById("messages");
+
+      // Create the new message element first
+      const li = document.createElement("li");
+      li.className = "text-sm text-white list-none text-left";
+
+      // Compare with the saved message
+      if (lastSubmittedMessage === JSON.parse(event.data)) {
+        li.innerText = "YOU: " + JSON.parse(event.data);
+        // Clear lastSubmittedMessage after it's been matched
+        lastSubmittedMessage = "";
+      } else {
+        li.innerText = JSON.parse(event.data);
+      }
+
+      // Add the new message
+      messages.appendChild(li);
+
+      // Then check if we need to remove old messages
+      while (messages.children.length > 5) {
+        messages.removeChild(messages.firstChild);
+      }
+    };
+  });
+</script>
+
 <header class="text-center text-white py-8">
   <h1 class="text-4xl font-bold text-grain-text hover:animate-vibrate2x">
     <a href="/fizzbuzz" class="hover:underline">accuratelinuxgraphs.com</a>
@@ -141,21 +194,41 @@ const author = authors[Math.floor(Math.random() * authors.length)];
         title="Ad"
       /></a
     >
-  </div>
-  <audio loop id="accuRotateAudio" class="hidden">
-    <source
-      src="/assets/audio/extremebinarydrumandbass.mp3"
-      type="audio/mp3"
-      id="accuRotateAudio2"
-    />
-    Your browser does not support the audio element. Seek help.
-  </audio>
-  <p class="invisible" id="credits">
-    AccuRotate Audio Credit: <a
-      href="https://opengameart.org/content/extreme-binary-dnb"
-      >Gobusto - Extreme Binary DnB</a
-    >
-  </p>
 
-  <hr class="animate-ping" />
+    <div class="bg-grain-panel rounded-lg p-4 mt-4">
+      <h2 class="text-xl font-bold mb-2">Chat</h2>
+      <ul id="messages" class="list-disc pl-5 font-bold bg-grain-bg">
+        {
+          messages.map((message) => (
+            <li class="text-sm text-white list-none text-left">{message}</li>
+          ))
+        }
+      </ul>
+      <form id="chat">
+        <input
+          type="text"
+          id="message"
+          class="border border-gray-300 rounded px-2 py-1 w-full mt-2"
+          placeholder="Type your message here..."
+        />
+        <input type="submit" hidden />
+      </form>
+    </div>
+    <audio loop id="accuRotateAudio" class="hidden">
+      <source
+        src="/assets/audio/extremebinarydrumandbass.mp3"
+        type="audio/mp3"
+        id="accuRotateAudio2"
+      />
+      Your browser does not support the audio element. Seek help.
+    </audio>
+    <p class="invisible" id="credits">
+      AccuRotate Audio Credit: <a
+        href="https://opengameart.org/content/extreme-binary-dnb"
+        >Gobusto - Extreme Binary DnB</a
+      >
+    </p>
+
+    <hr class="animate-ping" />
+  </div>
 </header>

src/components/Header.astro

@@ -0,0 +1,58 @@
+import EventEmitter from "events";
+import { isValidMessage } from "../ts/chat";
+
+export default class ChatController {
+  private static instance: ChatController;
+  private constructor() {}
+
+  static getInstance(): ChatController {
+    if (!ChatController.instance) {
+      ChatController.instance = new ChatController();
+    }
+    return ChatController.instance;
+  }
+  private messages: string[] = [];
+  private closedCallbacks: Set<Function> = new Set(); // Track which callbacks are from closed connections
+
+  public getMessages(): string[] {
+    return this.messages;
+  }
+  private emitter = new EventEmitter();
+
+  public subscribe(callback: (message: string) => void): void {
+    this.emitter.on("message", callback);
+  }
+
+  public unsubscribe(callback: (message: string) => void): void {
+    // Mark this callback as coming from a closed connection
+    this.closedCallbacks.add(callback);
+    this.emitter.off("message", callback);
+  }
+
+  public addMessage(message: string): void {
+    if (!isValidMessage(message)) {
+      message =
+        "SYS: Messages are limited to 3 words and only the words 'accurate', 'linux', and 'graphs' are allowed. Also a few more, have fun finding them!";
+    }
+    this.messages.push(message);
+
+    // Get all listeners BEFORE emitting to avoid race conditions
+    const listeners = this.emitter.listeners("message");
+
+    // Only emit to listeners that aren't closed
+    for (const listener of listeners) {
+      if (!this.closedCallbacks.has(listener)) {
+        try {
+          listener(message);
+        } catch (err) {
+          console.error("Error in message listener:", err);
+        }
+      }
+    }
+
+    // remove messages older than 5 so it doesn't get too long
+    if (this.messages.length > 5) {
+      this.messages.shift();
+    }
+  }
+}

src/controllers/chat.ts

@@ -0,0 +1,8 @@
+import type { APIRoute } from "astro";
+import ChatController from "../../controllers/chat";
+
+export const POST: APIRoute = async ({ request }) => {
+  const { message } = await request.json();
+  ChatController.getInstance().addMessage(message);
+  return new Response(null, { status: 204 });
+};

src/pages/api/chat.ts

@@ -0,0 +1,49 @@
+import type { APIRoute } from "astro";
+import ChatController from "../../controllers/chat";
+
+export const GET: APIRoute = async ({ request }) => {
+  const body = new ReadableStream({
+    start(controller) {
+      const encoder = new TextEncoder();
+      let isClosed = false;
+
+      const sendEvent = (data: any) => {
+        // Double protection: check flag and try-catch the operation
+        if (isClosed) return;
+
+        try {
+          const message = `data: ${JSON.stringify(data)}\n\n`;
+          controller.enqueue(encoder.encode(message));
+        } catch (error) {
+          // If we somehow reach here with a closed controller, mark as closed
+          console.error("Error sending event:", error);
+          isClosed = true;
+        }
+      };
+
+      // Subscribe to new messages
+      ChatController.getInstance().subscribe(sendEvent);
+
+      request.signal.addEventListener("abort", () => {
+        // Mark as closed first
+        isClosed = true;
+        // Unsubscribe from new messages - doing this synchronously
+        ChatController.getInstance().unsubscribe(sendEvent);
+
+        try {
+          controller.close();
+        } catch (error) {
+          console.error("Error closing controller:", error);
+        }
+      });
+    },
+  });
+
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
+};

src/pages/api/stream.ts

@@ -37,4 +37,4 @@ export function getStaticPaths() {
 }
 
 return Astro.redirect(`/assets/graphs/${Astro.params.img}`);
-
+---

src/pages/files/img/[img].astro

@@ -19,7 +19,7 @@ const fizzbuzz = (n: number) => {
 };
 ---
 
-<script>
+<script lang="js">
   // on click of anywhere on the site, spawn 10 oscillators playing droning randomized notes
   // and play them forever
   document.addEventListener("click", () => {

src/pages/fizzbuzz.astro

@@ -0,0 +1,21 @@
+// needs to be 3 words maximum, only words allowed are "accurate", "linux", "graphs"
+export function isValidMessage(message: string): boolean {
+  const words = message.split(" ");
+  if (words.length > 3) {
+    return false;
+  }
+  const validWords = [
+    "accurate",
+    "linux",
+    "graphs",
+    "accuracy",
+    "accuratelinuxgraphs",
+    "hi",
+  ];
+  for (const word of words) {
+    if (!validWords.includes(word)) {
+      return false;
+    }
+  }
+  return true;
+}