Add some logging to the event handlers for the chat room, add styles provided by my wife

chat-app/src/chat-room.ts

@@ -47,4 +47,5 @@ export class ChatRoom extends EventEmitter {
   }
 }
 
-export const chatRoom = new ChatRoom();
+const chatRoom = new ChatRoom();
+export { chatRoom }

chat-app/src/index.ts

@@ -14,12 +14,18 @@ const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
 app.get("/chat-service", upgradeWebSocket((c) => {
   return {
     onOpen(event, ws) {
-      chatRoom.addListener('message-added', function (e) {
+      console.log(ws);
-        ws.send(JSON.stringify({
+      console.log(`Connection established ${event}`);
+
+      chatRoom.addListener('message-added', async function (e) {
+        const message = JSON.stringify({
           message: e.message.message,
           chatter: e.message.chatter,
           timestamp: e.message.timestamp
-        }));
+        });
+
+        console.log(message);
+        ws.send(message);
       });
     },
     onMessage(event, ws) {
@@ -39,19 +45,6 @@ app.get("/chat-service", 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" }));

chat-app/static/css/main.css

@@ -1,7 +1,8 @@
 body {
     margin: 0;
     padding: 0;
-    height: 100.001vh;
+    background-color: #134115;
+    font-family: monospace;
 }
 
 div {
@@ -12,15 +13,19 @@ div {
     padding: 1em;
     display: flex;
     flex-direction: column-reverse;
-    height: 95vh;
+    height: auto;
     overflow: auto;
 }
 
 .messages .message {
-    padding: 0.5em;
+    padding: 1em 1.25em;
-    border: 1px solid #aaa;
+    border: 1px solid #020a03;
     border-radius: 5px;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.75em;
+    background-color: #fffefc;
+    font-family: monospace;
+    font-size: 14px;
+    color: #0c0b09;
 }
 
 .chatter {
@@ -32,10 +37,10 @@ div {
     bottom: 0;
     width: 100%;
     box-sizing: border-box;
-    padding: 0.5em;
-    background-color: #fff;
     border-top: 1px solid #ccc;
-    height: 5vh;
+    height: auto;
+    padding: 1em;
+    background-color: #f4efe6;
 }
 .chat-input > form {
     display: flex;
@@ -44,12 +49,65 @@ div {
 }
 .chat-input > form > input,
 .chat-input > form > submit {
-    padding: 0.7em;
+    padding: 1em 1.25em;
-    margin-right: 0.4em;
+    margin-right: 1em;
+}
+.chat-input > form > submit {
+    background-color: #020a03;
+    border: none;
+    border-radius: 5px;
+    color: #fffbf6;
+    font-weight: bold;
+    font-family: monospace !important;
+    padding: 0.75em 1em;
+    margin-right: 0;
 }
 .chat-input > form > input[name="chatter"] {
     width: 20%;
+    border: 1px solid #020a03;
+    border-radius: 5px;
+    color: #0c0b09;
+    font-family: monospace;
 }
 .chat-input > form > input[name="message"] {
     width: 75%;
+    border: 1px solid #020a03;
+    border-radius: 5px;
+    color: #0c0b09;
+    font-family: monospace;
+}
+
+@media only screen and (max-width: 600px) {
+    .chat-input {
+        padding: 2.5em;
+    }
+
+    .chat-input > form {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        flex-direction: column;
+    }
+
+    .chat-input > form > input[name="chatter"] {
+        width: 100%;
+        font-size: 3.5em;
+        margin-bottom: 0.5em;
+        box-sizing: border-box;
+    }
+
+    .chat-input > form > input[name="message"] {
+        width: 100%;
+        font-size: 3.5em;
+        margin-bottom: 0.5em;
+        box-sizing: border-box;
+    }
+
+
+    .chat-input > form > input, .chat-input > form > submit {
+        padding: 0.75em 1em;
+        border-radius: 0.25em;
+        width: 100%;
+        font-size: 3.5em;
+    }
 }

chat-app/static/js/index.js

@@ -79,6 +79,11 @@ var require_hasOwn = __commonJS((exports, module) => {
 
 // node_modules/mithril/render/hyperscript.js
 var require_hyperscript = __commonJS((exports, module) => {
+  var Vnode = require_vnode();
+  var hyperscriptVnode = require_hyperscriptVnode();
+  var hasOwn = require_hasOwn();
+  var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g;
+  var selectorCache = {};
   function isEmpty(object) {
     for (var key in object)
       if (hasOwn.call(object, key))
@@ -147,11 +152,6 @@ var require_hyperscript = __commonJS((exports, module) => {
     vnode.tag = selector;
     return vnode;
   }
-  var Vnode = require_vnode();
-  var hyperscriptVnode = require_hyperscriptVnode();
-  var hasOwn = require_hasOwn();
-  var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g;
-  var selectorCache = {};
   module.exports = hyperscript;
 });
 
@@ -187,6 +187,7 @@ var require_hyperscript2 = __commonJS((exports, module) => {
 
 // node_modules/mithril/render/domFor.js
 var require_domFor = __commonJS((exports, module) => {
+  var delayedRemoval = new WeakMap;
   function* domFor({ dom, domSize }, { generation } = {}) {
     if (dom != null)
       do {
@@ -198,7 +199,6 @@ var require_domFor = __commonJS((exports, module) => {
         dom = nextSibling;
       } while (domSize);
   }
-  var delayedRemoval = new WeakMap;
   module.exports = {
     delayedRemoval,
     domFor
@@ -1480,13 +1480,6 @@ var require_censor = __commonJS((exports, module) => {
 
 // node_modules/mithril/api/router.js
 var require_router = __commonJS((exports, module) => {
-  function decodeURIComponentSave(component) {
-    try {
-      return decodeURIComponent(component);
-    } catch (e) {
-      return component;
-    }
-  }
   var Vnode = require_vnode();
   var m = require_hyperscript();
   var buildPathname = require_build2();
@@ -1495,6 +1488,13 @@ var require_router = __commonJS((exports, module) => {
   var assign = require_assign();
   var censor = require_censor();
   var sentinel = {};
+  function decodeURIComponentSave(component) {
+    try {
+      return decodeURIComponent(component);
+    } catch (e) {
+      return component;
+    }
+  }
   module.exports = function($window, mountRedraw) {
     var callAsync = $window == null ? null : typeof $window.setImmediate === "function" ? $window.setImmediate : $window.setTimeout;
     var p = Promise.resolve();
@@ -1721,18 +1721,34 @@ var import_mithril = __toESM(require_mithril(), 1);
 
 // frontend/websocket.js
 function createWebSocket() {
-  let appUrl = "localhost:3000";
+  let appUrl = "chat.freedoom.party";
   appUrl = `//${appUrl}/chat-service`;
   return new WebSocket(appUrl);
 }
 
 // frontend/index.js
+var messages = [];
+var socket = createWebSocket();
+socket.onmessage = function(event) {
+  if (event.type === "message") {
+    const message = JSON.parse(event.data);
+    messages.push(message);
+    import_mithril.default.redraw();
+  }
+};
 function newMessageText(name, message) {
   return [
     import_mithril.default("span.chatter", name + ": "),
     import_mithril.default("span.chatter-message", message)
   ];
 }
+var MessageBox = {
+  view: function() {
+    return import_mithril.default(".messages", { id: "message-box" }, messages.reverse().map(function(message) {
+      return import_mithril.default(".message", newMessageText(message.chatter, message.message));
+    }), import_mithril.default("#anchor"));
+  }
+};
 function clearMessageInputBox() {
   const messageBox = document.getElementById("message");
   messageBox.value = "";
@@ -1747,22 +1763,6 @@ function sendMessage(e) {
   socket.send(JSON.stringify(message));
   clearMessageInputBox();
 }
-var messages = [];
-var socket = createWebSocket();
-socket.onmessage = function(event) {
-  if (event.type === "message") {
-    const message = JSON.parse(event.data);
-    messages.push(message);
-    import_mithril.default.redraw();
-  }
-};
-var MessageBox = {
-  view: function() {
-    return import_mithril.default(".messages", { id: "message-box" }, messages.reverse().map(function(message) {
-      return import_mithril.default(".message", newMessageText(message.chatter, message.message));
-    }), import_mithril.default("#anchor"));
-  }
-};
 var MessageInput = {
   view: function() {
     return import_mithril.default("div.chat-input", [

slides/deployment.html

@@ -76,18 +76,19 @@
             <section>
                 <h2>Doing it Yourself</h2>
                 <ul>
-                    <li>Do not use AWS, its too expensive</li>
+                    <li class="fragment">A domain</li>
-                    <li>Your small project is not worth the cost</li>
+                    <li class="fragment">A server with a public IP address</li>
-                    <li>Use a small VPS from DigitalOcean or Linode</li>
+                    <li class="fragment">A webserver</li>
-                    <li>Get a public IP address and root access</li>
+                    <li class="fragment">Patience</li>
                 </ul>
             </section>
 
-            <section>
-                <h3>Blue/Green Deployment</h3>
-            </section>
-
             <!-- Dokku -->
+            <section>
+                <h2>Dokku</h2>
+                <p>Self-hosted platform as a service</p>
+                <p>Your very own Heroku</p>
+            </section>
 
             <section>
                 <h2>What Dokku Does</h2>
@@ -103,12 +104,21 @@
             </section>
 
             <section>
-                <h3>Create an application.</h3>
+                <h3>Anatomy of the Server</h3>
-                <pre>
+                <ul>
-$ dokku apps:create chat.freedoom.party
+                    <li>Linode VPS</li>
------> Creating chat.freedoom.party...
+                    <li>Debian</li>
------> Creating new app virtual host file...
+                </ul>
-                </pre>
+            </section>
+
+            <section>
+                <h3>Anatomy of the Application</h3>
+                <ul>
+                    <li>Hono Web Server Application</li>
+                    <li>Mithril.js Frontend Application</li>
+                    <li>Dockerized</li>
+                </ul>
+            </section>
 
             <!-- Deployment Example -->