chat-app/src/chat-room.ts

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

chat-app/src/index.ts

@@ -14,18 +14,12 @@ const { upgradeWebSocket, websocket } = createBunWebSocket<ServerWebSocket>();
 app.get("/chat-service", upgradeWebSocket((c) => {
   return {
     onOpen(event, ws) {
-      console.log(ws);
+      chatRoom.addListener('message-added', function (e) {
-      console.log(`Connection established ${event}`);
+        ws.send(JSON.stringify({
-
-      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) {
@@ -45,6 +39,19 @@ 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,8 +1,7 @@
 body {
     margin: 0;
     padding: 0;
-    background-color: #134115;
+    height: 100.001vh;
-    font-family: monospace;
 }
 
 div {
@@ -13,19 +12,15 @@ div {
     padding: 1em;
     display: flex;
     flex-direction: column-reverse;
-    height: auto;
+    height: 95vh;
     overflow: auto;
 }
 
 .messages .message {
-    padding: 1em 1.25em;
+    padding: 0.5em;
-    border: 1px solid #020a03;
+    border: 1px solid #aaa;
     border-radius: 5px;
-    margin-bottom: 0.75em;
+    margin-bottom: 0.5em;
-    background-color: #fffefc;
-    font-family: monospace;
-    font-size: 14px;
-    color: #0c0b09;
 }
 
 .chatter {
@@ -37,10 +32,10 @@ div {
     bottom: 0;
     width: 100%;
     box-sizing: border-box;
+    padding: 0.5em;
+    background-color: #fff;
     border-top: 1px solid #ccc;
-    height: auto;
+    height: 5vh;
-    padding: 1em;
-    background-color: #f4efe6;
 }
 .chat-input > form {
     display: flex;
@@ -49,65 +44,12 @@ div {
 }
 .chat-input > form > input,
 .chat-input > form > submit {
-    padding: 1em 1.25em;
+    padding: 0.7em;
-    margin-right: 1em;
+    margin-right: 0.4em;
-}
-.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,11 +79,6 @@ 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))
@@ -152,6 +147,11 @@ 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,7 +187,6 @@ 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 {
@@ -199,6 +198,7 @@ var require_domFor = __commonJS((exports, module) => {
         dom = nextSibling;
       } while (domSize);
   }
+  var delayedRemoval = new WeakMap;
   module.exports = {
     delayedRemoval,
     domFor
@@ -1480,6 +1480,13 @@ 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();
@@ -1488,13 +1495,6 @@ 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,34 +1721,18 @@ var import_mithril = __toESM(require_mithril(), 1);
 
 // frontend/websocket.js
 function createWebSocket() {
-  let appUrl = "chat.freedoom.party";
+  let appUrl = "localhost:3000";
   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 = "";
@@ -1763,6 +1747,22 @@ 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,20 +76,19 @@
             <section>
                 <h2>Doing it Yourself</h2>
                 <ul>
-                    <li class="fragment">A domain</li>
+                    <li>Do not use AWS, its too expensive</li>
-                    <li class="fragment">A server with a public IP address</li>
+                    <li>Your small project is not worth the cost</li>
-                    <li class="fragment">A webserver</li>
+                    <li>Use a small VPS from DigitalOcean or Linode</li>
-                    <li class="fragment">Patience</li>
+                    <li>Get a public IP address and root access</li>
                 </ul>
             </section>
 
-            <!-- Dokku -->
             <section>
-                <h2>Dokku</h2>
+                <h3>Blue/Green Deployment</h3>
-                <p>Self-hosted platform as a service</p>
-                <p>Your very own Heroku</p>
             </section>
 
+            <!-- Dokku -->
+
             <section>
                 <h2>What Dokku Does</h2>
                 <ul>
@@ -104,21 +103,12 @@
             </section>
 
             <section>
-                <h3>Anatomy of the Server</h3>
+                <h3>Create an application.</h3>
-                <ul>
+                <pre>
-                    <li>Linode VPS</li>
+$ dokku apps:create chat.freedoom.party
-                    <li>Debian</li>
+-----> Creating chat.freedoom.party...
-                </ul>
+-----> Creating new app virtual host file...
-            </section>
+                </pre>
-
-            <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 -->