Add the Chat Rooms. Start working on the frontend app.

2024-09-29 21:49:30 -04:00 · 2024-09-29 21:49:30 -04:00 · eb696faae0
commit eb696faae0
11 changed files with 226 additions and 0 deletions
--- a/chat-app/.editorconfig
+++ b/chat-app/.editorconfig
@ -0,0 +1,3 @@
+[*.{js,ts,jsx,tsx,json,yaml}]
+indent_size = 2
+indent_tye = "space"
--- a/chat-app/.gitignore
+++ b/chat-app/.gitignore
@ -0,0 +1,2 @@
+# deps
+node_modules/
--- a/chat-app/README.md
+++ b/chat-app/README.md
@ -0,0 +1,11 @@
+To install dependencies:
+```sh
+bun install
+```
+
+To run:
+```sh
+bun run dev
+```
+
+open http://localhost:3000
--- a/chat-app/bun.lockb
+++ b/chat-app/bun.lockb
--- a/chat-app/package.json
+++ b/chat-app/package.json
@ -0,0 +1,12 @@
+{
+  "name": "chat-app",
+  "scripts": {
+    "dev": "bun run --hot src/index.ts"
+  },
+  "dependencies": {
+    "hono": "^4.6.3"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  }
+}
--- a/chat-app/src/chat-room.ts
+++ b/chat-app/src/chat-room.ts
@ -0,0 +1,44 @@
+import { EventEmitter } from "events";
+
+export type Chatter = {
+  name: string,
+};
+
+export const chatters = new Array<Chatter>();
+
+export type Message = {
+  message: string,
+  timestamp: Date
+  chatter: Chatter
+};
+
+export function createMessageString(message: Message): string {
+  return `${message.chatter.name}: ${message.message}`;
+}
+
+export class ChatRoom extends EventEmitter {
+  protected messages: Message[];
+
+  public constructor() {
+    this.message = new Array<Message>();
+  }
+
+  public getMessages(): Message[] {
+    return this.messages;
+  }
+
+  public addMessage(message: Message) {
+    this.messages.push(message);
+    this.emit("message-added", { message });
+  }
+
+  public getMessagesAsArray(): string[] {
+    return this.messages.map(m => createMessageString(m));
+  }
+
+  public getNewestMessage(): Message {
+    const message = this.messages[this.messages - 1];
+  }
+}
+
+export const chatRomm = new ChatRoom();
--- a/chat-app/src/index.ts
+++ b/chat-app/src/index.ts
@ -0,0 +1,43 @@
+import { Hono } from "hono";
+import { serveStatic, createBunWebSocket } from "hono/bun";
+import type { ServerWebSocket } from "hono";
+import { chatRoom, chatters } from "./chat-room.ts";
+
+const app = new Hono();
+const users: string[] = [];
+
+// Set up the chat socket
+const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
+app.get("/chat-socket", upgradeWebSocket((c) => {
+  return {
+    onMessage(event, ws) {
+      const data = JSON.parse(event.data);
+      if (!chatters.find(c => c.name == data.chatter.name)) {
+        chatters.push(data.chatter);
+      }
+      chatRoom.addMessage({
+        chatter: { data.chatter },
+        message: data.message,
+        timestamp: Date.now()
+      });
+
+      ws.send(JSON.stringify(chatRoom.getMessage().message));
+    },
+    onClose() {
+      console.log("Connection closed.");
+    },
+    onError(event) {
+      console.log(event);
+    }
+  }
+}));
+
+
+// get the HTML and JS from the static repo
+app.use("/", serveStatic({ path: "/static/index.html" }));
+app.use("/*", serveStatic({ root: "/static" }));
+
+Bun.serve({
+  fetch: app.fetch,
+  websocket
+});
--- a/chat-app/static/index.html
+++ b/chat-app/static/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>A Dumb Chat Application</title>
+</head>
+<body>
+
+<script src="https://unpkg.com/mithril/mithril.js"></script>
+<script src="/js/chat-service.js"></script>
+<script>
+// start the chat web socket
+initChatService();
+
+// render the application
+
+const root = document.body;
+m.render(root, m("h1", "A Stupid Chat"));
+</script>
+</body>
+</html>
--- a/chat-app/static/js/chat-service.js
+++ b/chat-app/static/js/chat-service.js
@ -0,0 +1,17 @@
+function initChatService() {
+    const ws = new WebSocket("ws://localhost:3000/chat-socket");
+
+    ws.onmessage = function (event) {
+        console.log(event);
+    };
+    ws.onopen = function (event) {
+        console.log("Opening the socket");
+        ws.send(JSON.stringify({ hello: "world" }));
+    };
+    ws.onclose = function (event) {
+        console.log("Closing the socket");
+    };
+    ws.onerror = function (event) {
+        console.log(event);
+    };
+}
--- a/chat-app/tsconfig.json
+++ b/chat-app/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  }
+}
--- a/notes.md
+++ b/notes.md
@ -0,0 +1,67 @@
+# Deploying Dumb Ideas with Dokku
+
+A talk describing how we can easily deploy applications with Dokku using a simple
+VPS and doing some DNS work.
+
+* What is deployment when it comes to the web?
+* Talk about the VPS, how it works
+* Install Dokku the service on the VPS
+* Talk about the DNS setup
+* Do a cost breakdown
+
+Deploy the talk on the blog as well
+
+## The Dumb Idea
+
+Simple application that does something, like a guess the number or tik-tak-toe
+Something with a frontend and backend to talk about deploying multiple applications.
+Or build it with React
+
+A simple twitte clone
+Mesages on a timeline, living in memory.
+
+Multiplayer tic-tac-toe?
+Chat?
+
+
+
+## What is Deployment
+
+What does a node.js application look like?
+Running express.js as a service on the server
+Maybe have a reverse proxy for the web service
+
+Deploying the code in place, take the service down or deploy on another port
+and update the nginx config to point to the new service
+
+DNS, and how DNS plays a role in pointing the domain to the server
+
+show some diagrams
+
+Talk about the SSL cert situation
+Talk about building VM images or containers for deployment
+
+"What about K8s?" I don't know or really care
+
+## What does Dokku do for us?
+
+Reverse proxy
+SSL certificates
+Deploys the containers defined in the `Dockerfile`
+
+Simple `git push` for deploying to Dokku
+
+"Is deploying actually hard? Depends"
+
+## Deploy
+
+* Create the application and domain
+* Deploy the application to Dokku
+* Get everyone to look at it 
+
+
+
+
+
+
+