first working chat version

api.js

@@ -36,6 +36,7 @@ wss.on('connection', (ws, req) => {
                 ws.send(JSON.stringify({type: "error", content: "your message was empty"}))
             else{
                 msg.content.user = thisuser
+                msg.content.text = msg.content.text.replace(/</g, "&lt").replace(/>/g, "&gt").replace(/\n/g, "<br>")
                 wss.clients.forEach(client => {
                     if (client !== ws) client.send(JSON.stringify(msg))})
             }

src/components/newMessage.vue

@@ -22,8 +22,21 @@ export default {
       if (this.msg.content.text !== "") {
         this.msg.time = Date.now()
         main.methods.sendWebSocket(this.msg)
+        //just for now, ik it's dirty
+        document.getElementById('messages').innerHTML +=
+            `<div class="messageContainer" data-v-032da2b2="">
+            <div class="message" data-v-032da2b2="">
+                ${this.msg.content.text
+                .replace(/</g, "&lt")
+                .replace(/>/g, "&gt")
+                .replace(/\n/g, "<br>")}
+            </div>
+        </div>`;
         this.msg.content.text = ""
-        this.resizeMessageBanner()
+        document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
+        document.getElementById("newMessageInput").style.height = "1.25rem"
+        let msgContainer = document.getElementById("messagesContainer")
+        msgContainer.scrollTo(0, msgContainer.scrollHeight)
       }
     },
     resizeMessageBanner(){
@@ -33,7 +46,6 @@ export default {
       let msgContainer = document.getElementById("messagesContainer")
       msgContainer.style.height
           = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
-      //msgContainer.scrollTo(0, msgContainer.scrollHeight)
     }
   },
   data(){
@@ -67,7 +79,7 @@ export default {
     margin-bottom: 1rem;
     left: 2rem;
     min-height: 1.25rem;
-    max-height: 14rem;
+    max-height: 10rem;
     width: calc(100% - 7rem);
     height: 1.25rem;
     background-color: #fff0;

src/main.js

@@ -91,11 +91,13 @@ socket.onmessage = (e) => {
   else if (msg.type === 'message'){
     //just for now, ik it's dirty
     element('messages').innerHTML +=
-        `<div class="messageContainer" data-v-032da2b2="">
+        `<div class="messageContainer" data-v-a1576e28="">
-            <div class="message" data-v-032da2b2="">
+            <div class="message" data-v-a1576e28="">
                 ${msg.content.text}
             </div>
         </div>`;
+    let msgContainer = document.getElementById("messagesContainer")
+    if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight)
   }
 }
 

src/views/chat.vue

@@ -2,27 +2,9 @@
   <div>
     <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
       <div id="messages" class="messages">
-        <message msg="Hey :D" />
+        <p style="margin-left: 1rem; font-style: italic;">You entered the chat</p>
-        <message msg="Du bist blööööd xD" />
+        <message style="display: none;" />
-        <messageReceive msg="Du auch" />
+        <messageReceive style="display: none;" />
-        <message msg="lol" />
-        <messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
-        <message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
-                      Fusce scelerisque pellentesque erat quis sollicitudin.
-                      Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
-                      Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
-                      Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
-                      Nullam non turpis consequat, placerat lectus nec, ornare orci.
-                      Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
-                      Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
-        />
-        <messageReceive msg="Du hast Pizza!" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
-        <message msg="und Kuchen :P" />
       </div>
     </div>
     <newMessage />