we have a nominally working, albeit ugly, chat application! Now I just need to write a talk about deploying shit, and test deploying.

chat-app/frontend/index.js

@@ -14,7 +14,10 @@ socket.onmessage = function (event) {
 }
 
 function newMessageText(name, message) {
-  return `${name}: ${message}`;
+  return [
+    m("span.chatter", name + ": "),
+    m("span.chatter-message", message)
+  ];
 }
 
 const MessageBox = {
@@ -25,10 +28,15 @@ const MessageBox = {
   }
 };
 
+function clearMessageBox() {
+  const messageBox = document.getElementById("message");
+  messageBox.value = "";
+}
+
 function sendMessage(e) {
   e.preventDefault();
-  const form = new FormData(e.target);
 
+  const form = new FormData(e.target);
   const message = {};
 
   for (const [key, value] of form.entries()) {
@@ -36,14 +44,15 @@ function sendMessage(e) {
   }
 
   socket.send(JSON.stringify(message));
+  clearMessageBox();
 }
 
 const MessageInput = {
   view: function () {
-    return m("div", [
+    return m("div.chat-input", [
       m("form", { method: "post", onsubmit: sendMessage }, [
         m("input", { name: "chatter", placeholder: "Name" }),
-        m("input", { name: "message", placeholder: "Message" }),
+        m("input", { name: "message", placeholder: "Message", id: "message", required: true }),
         m("input", { type: "submit", value: "Send" })
       ])
     ]);

chat-app/src/chat-room.ts

@@ -40,6 +40,11 @@ export class ChatRoom extends EventEmitter {
   public getNewestMessage(): Message {
     const message = this.messages[this.messages - 1];
   }
+
+  // set up the lifetime to clear messages in memory
+  protected pruneMessages(lifetime: number): void {
+
+  }
 }
 
 export const chatRoom = new ChatRoom();

chat-app/src/index.ts

@@ -32,8 +32,9 @@ app.get("/chat-service", upgradeWebSocket((c) => {
     onClose() {
       console.log("Connection closed.");
     },
-    onError(event) {
+    onError(event, ws) {
       console.error(event);
+      ws.close();
     }
   }
 }));

chat-app/static/css/main.css

@@ -1,4 +1,23 @@
-input, label {
-    display: block;
-    margin-top: 0.5em;
+.messages .message {
+    padding: 0.5em;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    margin-bottom: 0.5em;
+}
+.chatter {
+    font-weight: bold;
+}
+
+.chat-input > form {
+    display: flex;
+    width: 100%;
+}
+.chat-input > form > input {
+    padding: 0.7em;
+}
+.chat-input > form > input[name="chatter"] {
+    width: 20%;
+}
+.chat-input > form > input[name="message"] {
+    width: 75%;
 }

chat-app/static/js/index.js

@@ -1726,7 +1726,14 @@ function createWebSocket() {
 
 // frontend/index.js
 function newMessageText(name, message) {
-  return `${name}: ${message}`;
+  return [
+    import_mithril.default("span.chatter", name + ": "),
+    import_mithril.default("span.chatter-message", message)
+  ];
+}
+function clearMessageBox() {
+  const messageBox = document.getElementById("message");
+  messageBox.value = "";
 }
 function sendMessage(e) {
   e.preventDefault();
@@ -1736,6 +1743,7 @@ function sendMessage(e) {
     message[key] = value;
   }
   socket.send(JSON.stringify(message));
+  clearMessageBox();
 }
 var messages = [];
 var socket = createWebSocket();
@@ -1755,10 +1763,10 @@ var MessageBox = {
 };
 var MessageInput = {
   view: function() {
-    return import_mithril.default("div", [
+    return import_mithril.default("div.chat-input", [
       import_mithril.default("form", { method: "post", onsubmit: sendMessage }, [
         import_mithril.default("input", { name: "chatter", placeholder: "Name" }),
-        import_mithril.default("input", { name: "message", placeholder: "Message" }),
+        import_mithril.default("input", { name: "message", placeholder: "Message", id: "message", required: true }),
         import_mithril.default("input", { type: "submit", value: "Send" })
       ])
     ]);