Start thinking about how to actually use Mithril to build a frontend for this app.

chat-app/build.ts

@@ -1,4 +1,28 @@
-Bun.build({
-  entrypoints: [ "./src/components/index.js" ],
+async function main() {
+  const results = await Bun.build({
+    entrypoints: [ "./frontend/index.js" ],
     outdir: "./static/js/",
+    verbose: true
+  });
+
+
+  if (!results.success) {
+    for (const message of results.logs) {
+      console.error(message);
+    }
+
+    return false;
+  }
+
+  return true;
+}
+
+
+main()
+  .then(() => {
+    process.exit(0)
+  })
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
   });

chat-app/frontend/components/ChatApp.js

@@ -2,7 +2,8 @@ import m from "mithril";
 import { MessageBox } from "./MessageBox";
 import { LoginForm } from "./Login";
 
-export const ChatApp = {
+export function createChatApp({ ws, session }) {
+  return {
     view: function () {
       return m("div", { class: "container" }, [
         m("h1", "A Stupid Chat Application"),
@@ -10,3 +11,4 @@ export const ChatApp = {
       ]);
     }
   };
+}

chat-app/frontend/components/Login.js

@@ -1,11 +1,37 @@
 import m from "mithril";
+import Cookies from "js-cookie";
 
-export const LoginForm = {
+export function LoginForm() {
+  let loggedIn = false;
+
+  async function login(e) {
+    e.preventDefault();
+
+    const formData = new FormData(e.target);
+
+    const res = await m.request({
+      method: "POST",
+      url: "/login",
+      body: formData
+    });
+
+    if (res.success) {
+      Cookies.set('logged-in', true);
+    } else {
+      Cookies.remove('logged-in');
+    }
+  }
+
+  return {
+    oninit: function() {
+      loggedIn = !!Cookies.get('logged-in');
+    },
     view: function() {
-    return m("form", { action: "/login" }, [
+      return m("form", { action: "/login", method: "post", onsubmit: login }, [
         m("label", { for: "username" }, "Username"),
         m("input", { type: "text", name: "username" }),
         m("input", { type: "submit", value: "Login" })
       ]);
     }
-};
+  }
+}

chat-app/frontend/index.js

@@ -1,8 +1,10 @@
 import m from "mithril";
-import { ChatApp } from "./components/ChatApp";
-
-const localState = {
-  messages: []
-}
+import { createChatApp } from "./components/ChatApp";
+import { createWebSocket } from "./websocket";
+import { Sessions } from "./session";
 
+// open the WS to the server
+const ws = createWebSocket();
+const session = new Sessions();
+const ChatApp = createChatApp({ ws, session });
 m.mount(document.getElementById("app"), ChatApp);

chat-app/frontend/session.js

@@ -0,0 +1,31 @@
+export class Sessions extends EventManager {
+  constructor() {
+    this.users = [];
+  }
+
+  userExists(user) {
+    return !!this.findUser(user);
+  }
+
+  findUser(user) {
+    return this.users.find(u => u.username === user.username);
+  }
+
+  addUser(user) {
+    if (!this.userExists(user)) {
+      this.users.push(user);
+      this.emit('user-logged-in', user);
+    }
+  }
+
+  clearUser(user) {
+    if (this.userExists(user)) {
+      const index = this.users.indexOf(user);
+
+      if (index > -1) {
+        this.users.splice(index - 1, 1);
+        this.emit('user-removed', user);
+      }
+    }
+  }
+}

chat-app/frontend/websocket.js

@@ -0,0 +1,3 @@
+export function createWebSocket() {
+  return new WebSocket("ws://localhost:3000/chat-service");
+}

chat-app/justfile

@@ -0,0 +1,8 @@
+build:
+    bun build.ts
+
+clean:
+    rm -r static/js/*
+
+test:
+    bun test

chat-app/package.json

@@ -2,11 +2,13 @@
   "name": "chat-app",
   "scripts": {
     "dev": "bun run --hot src/index.ts",
-    "build": "bun src/build.ts"
+    "build": "rm -r static/js && bun build.ts"
   },
   "dependencies": {
     "@types/mithril": "^2.2.7",
     "hono": "^4.6.3",
+    "js-cookie": "^3.0.5",
+    "js-guid": "^1.0.2",
     "mithril": "^2.2.5"
   },
   "devDependencies": {

chat-app/src/index.ts

@@ -13,8 +13,16 @@ const users: string[] = [];
 
 // Set up the chat socket
 const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
-app.get("/chat-socket", upgradeWebSocket((c) => {
+app.get("/chat-service", upgradeWebSocket((c) => {
   return {
+    onOpen(_event, ws) {
+      chatRoom.addListener('message-added', function (e) {
+        ws.send(JSON.stringify({
+          message: e.message.message,
+          chatter: e.message.chatter
+        }));
+      });
+    },
     onMessage(event, ws) {
       const data = JSON.parse(event.data);
 
@@ -29,8 +37,6 @@ app.get("/chat-socket", upgradeWebSocket((c) => {
       };
 
       chatRoom.addMessage(message);
-
-      ws.send(JSON.stringify({ message: createMessageString(message) }));
     },
     onClose() {
       console.log("Connection closed.");
@@ -41,6 +47,20 @@ app.get("/chat-socket", upgradeWebSocket((c) => {
   }
 }));
 
+// set up the username, somehow
+// set the session for a user
+app.post("/login", async (c) => {
+  const user = await c.req.parseBody();
+  let success: boolean = false;
+
+  if (!users.find((u) => u == user.username)) {
+    users.push(user.username);
+    success = true;
+  }
+
+  return c.json({ success });
+});
+
 // get the HTML and JS from the static repo
 app.use("/", serveStatic({ path: "/static/index.html" }));
 app.use("/*", serveStatic({ root: "/static" }));

chat-app/static/css/main.css

@@ -0,0 +1,4 @@
+input, label {
+    display: block;
+    margin-top: 0.5em;
+}

chat-app/static/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <title>A Dumb Chat Application</title>
+    <link rel="stylesheet" type="text/css" href="/css/main.css" />
 </head>
 <body>
 <div id="app"></div>