basic 2-way communication

public/js/chat.js

@@ -10,8 +10,22 @@ $(document).ready(() => {
     //dev
     const socket = new WebSocket('ws://localhost:3000');
 
+    const appendMessageToChat = (author, content) => {
+        const messageDiv = document.createElement('div')//`<div class="chat-message" ><${message.author}> ${message.content}</div><br/>`
+        messageDiv.className = "chat-message"
+        messageDiv.textContent = `<${author}> ${content}`
+        document.getElementsByClassName("messages-container")[0].appendChild(messageDiv)
+    }
+
     socket.onmessage = message => {
-        console.log(message)
+
+        try {
+            message = JSON.parse(message.data)
+        } catch(e) {
+            console.log(e)
+            return;
+        }
+        appendMessageToChat(message.author, message.content)
     }
 
     const sendData = async () => {
@@ -24,6 +38,8 @@ $(document).ready(() => {
         };
 
         socket.send(JSON.stringify(message));
+        appendMessageToChat(message.author, message.content)
+        $("#chat-input").val("")
     }
 
     $("#send-message-button").click(sendData);