A Dumb Chat Application

commit eb696faae074462bec633bb35c4848ce1bc59e89 Author: Dave Smith-Hayes Date: Sun Sep 29 21:49:30 2024 -0400 Add the Chat Rooms. Start working on the frontend app. diff --git a/chat-app/.editorconfig b/chat-app/.editorconfig new file mode 100644 index 0000000..5a61863 --- /dev/null +++ b/chat-app/.editorconfig @@ -0,0 +1,3 @@ +[*.{js,ts,jsx,tsx,json,yaml}] +indent_size = 2 +indent_tye = "space" diff --git a/chat-app/.gitignore b/chat-app/.gitignore new file mode 100644 index 0000000..506e4c3 --- /dev/null +++ b/chat-app/.gitignore @@ -0,0 +1,2 @@ +# deps +node_modules/ diff --git a/chat-app/README.md b/chat-app/README.md new file mode 100644 index 0000000..6dd13e7 --- /dev/null +++ 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 diff --git a/chat-app/bun.lockb b/chat-app/bun.lockb new file mode 100755 index 0000000..96e7108 Binary files /dev/null and b/chat-app/bun.lockb differ diff --git a/chat-app/package.json b/chat-app/package.json new file mode 100644 index 0000000..d785c84 --- /dev/null +++ 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" + } +} \ No newline at end of file diff --git a/chat-app/src/chat-room.ts b/chat-app/src/chat-room.ts new file mode 100644 index 0000000..9386055 --- /dev/null +++ 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(); + +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(); + } + + 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(); diff --git a/chat-app/src/index.ts b/chat-app/src/index.ts new file mode 100644 index 0000000..f241dd1 --- /dev/null +++ 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(); +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 +}); diff --git a/chat-app/static/index.html b/chat-app/static/index.html new file mode 100644 index 0000000..3e38662 --- /dev/null +++ b/chat-app/static/index.html @@ -0,0 +1,20 @@ + + + + A Dumb Chat Application + + + + + + + + diff --git a/chat-app/static/js/chat-service.js b/chat-app/static/js/chat-service.js new file mode 100644 index 0000000..e8ddd0d --- /dev/null +++ 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); + }; +} diff --git a/chat-app/tsconfig.json b/chat-app/tsconfig.json new file mode 100644 index 0000000..c442b33 --- /dev/null +++ b/chat-app/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "strict": true, + "jsx": "react-jsx", + "jsxImportSource": "hono/jsx" + } +} \ No newline at end of file diff --git a/notes.md b/notes.md new file mode 100644 index 0000000..52e6934 --- /dev/null +++ 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 + + + + + + +