feat: use SSE

Author: aster-void

common/types.ts

@@ -1,5 +1,7 @@
 // common/type/types.ts
 
+import type { Message, UserID } from "./zod/types.ts";
+
 export type {
   UserID,
   GUID,
@@ -34,3 +36,17 @@ export type {
   InitSharedRoom,
   UpdateRoom,
 } from "./zod/types.ts";
+
+export type SSEChatEvents = {
+  "Chat:Append": {
+    message: Message;
+  };
+  "Chat:Update": {
+    id: number;
+    message: Message;
+  };
+  "Chat:Delete": {
+    id: number;
+  };
+  "Chat:Ping": "";
+};

server/package.json

@@ -5,7 +5,7 @@
   "main": "src/index.ts",
   "scripts": {
     "prepare": "bun --env-file=./.env.dev prisma generate --sql || (echo 'please set DATABASE_URL in server/.env.dev' && exit 1)",
-    "dev": "bun --watch src/main.ts",
+    "dev": "bun --watch src/index.ts",
     "build": "tsc",
     "serve": "bun target/main.js"
   },

server/src/index.ts

@@ -1,13 +1,13 @@
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { HTTPException } from "hono/http-exception";
-import { initializeSocket } from "./lib/socket/socket";
 import { allUrlMustBeValid, env } from "./lib/utils";
 import chatRoutes from "./router/chat";
 import coursesRoutes from "./router/courses";
 import matchesRoutes from "./router/matches";
 import pictureRoutes from "./router/picture";
 import requestsRoutes from "./router/requests";
+import sseRoutes from "./router/sse";
 import subjectsRoutes from "./router/subjects";
 import usersRoutes from "./router/users";
 
@@ -30,11 +30,10 @@ if (corsOptions.origin.length > 1) {
 const app = new Hono()
   .onError((err, c) => {
     if (err instanceof HTTPException) {
-      c.status(err.status);
-      return c.json({ error: err });
+      throw err;
     }
-    c.status(500);
-    return c.json({ error: err });
+    console.log(err);
+    return c.json({ error: err }, 500);
   })
 
   .use(cors(corsOptions))
@@ -49,14 +48,7 @@ const app = new Hono()
   .route("/subjects", subjectsRoutes)
   .route("/requests", requestsRoutes)
   .route("/matches", matchesRoutes)
-  .route("/chat", chatRoutes);
+  .route("/chat", chatRoutes)
+  .route("/sse", sseRoutes);
 
-export function main() {
-  const server = Bun.serve({
-    fetch: app.fetch,
-    port: process.env.PORT ?? 3000,
-  });
-  // ??
-  return initializeSocket(app, corsOptions);
-}
 export default app;

server/src/lib/socket/socket.ts

@@ -11,10 +11,10 @@ import { z } from "zod";
 import * as db from "../database/chat";
 import { getUserId } from "../firebase/auth/db";
 import * as core from "../functions/chat";
-import * as ws from "../lib/socket/socket";
 import { json, param } from "../lib/validator";
+import * as sse from "../router/sse";
 
-const userid_param = param({ userid: z.number() });
+const userid_param = param({ userid: z.coerce.number() });
 const router = new Hono()
   .get("/overview", async (c) => {
     const id = await getUserId(c);
@@ -29,9 +29,13 @@ const router = new Hono()
     const send = c.req.valid("json");
     const result = await core.sendDM(user, friend, send);
     if (result.ok) {
-      ws.sendMessage(result.body, friend);
+      sse.send(friend, {
+        event: "Chat:Append",
+        data: { message: result.body },
+      });
     }
-    return c.json(result.body); // status: result.code
+    c.status(result.code);
+    return c.json(result.body);
   })
 
   // GET a DM Room with userId, CREATE one if not found.
@@ -118,7 +122,13 @@ const router = new Hono()
 
       const result = await core.updateMessage(user, id, content);
       if (result.ok) {
-        ws.updateMessage(result.body, friend);
+        sse.send(friend, {
+          event: "Chat:Update",
+          data: {
+            id: result.body.id,
+            message: result.body,
+          },
+        });
       }
       c.status(result.code);
       return c.json(result.body);
@@ -134,7 +144,12 @@ const router = new Hono()
       const id = c.req.valid("param").id;
       const friend = c.req.valid("json").friend;
       await db.deleteMessage(id as MessageID, user);
-      ws.deleteMessage(id, friend);
+      sse.send(friend, {
+        event: "Chat:Delete",
+        data: {
+          id,
+        },
+      });
       c.status(204);
       return c.json({});
     },

server/src/main.ts

@@ -0,0 +1,55 @@
+import type { SSEChatEvents, UserID } from "common/types";
+import { Hono } from "hono";
+import { HTTPException } from "hono/http-exception";
+import { streamSSE } from "hono/streaming";
+import { getUserIdFromToken } from "../firebase/auth/db";
+
+export const sseChatPath = (id: UserID) => `sse:chat:${id}`;
+type SSEChatEventEnum = "Chat:Append" | "Chat:Update" | "Chat:Delete";
+type SSEChatEvent<T extends SSEChatEventEnum> = {
+  event: T;
+  data: SSEChatEvents[T];
+};
+export function send<T extends SSEChatEventEnum>(
+  to: UserID,
+  event: SSEChatEvent<T>,
+) {
+  const bc = new BroadcastChannel(sseChatPath(to));
+  bc.postMessage(event);
+  bc.close();
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
+// https://hono.dev/docs/helpers/streaming
+const route = new Hono().get("/chat", async (c) => {
+  const token = c.req.query("token");
+  if (!token)
+    throw new HTTPException(400, {
+      message: "token required in param",
+    });
+
+  const userId = await getUserIdFromToken(token);
+  return streamSSE(c, async (stream) => {
+    const bc = new BroadcastChannel(sseChatPath(userId));
+    bc.onmessage = (e: MessageEvent) => {
+      const event = e.data as SSEChatEvent<SSEChatEventEnum>;
+      stream.writeSSE({
+        event: event.event,
+        data: JSON.stringify(event.data),
+      });
+    };
+
+    stream.onAbort(() => {
+      bc.close();
+    });
+    while (true) {
+      await Bun.sleep(2000);
+      stream.writeSSE({
+        event: "Ping",
+        data: "",
+      });
+    }
+  });
+});
+
+export default route;

server/src/router/chat.ts

@@ -11,6 +11,7 @@ import "@fontsource/roboto/700.css";
 import BanLandscape from "~/components/BanLandscape";
 import { AlertProvider } from "~/components/common/alert/AlertProvider";
 import { ModalProvider } from "~/components/common/modal/ModalProvider";
+import SSEProvider from "~/components/data/socket";
 import AuthProvider from "~/firebase/auth/AuthProvider";
 
 const theme = createTheme({
@@ -50,7 +51,7 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    {children}
+                    <SSEProvider>{children}</SSEProvider>
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>