From b5513e4eaee14237b0d3736fde2c608b099e4263 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Tue, 3 Nov 2020 19:26:01 +0100
Subject: [PATCH] WebSocket JSON

---
 api.js                        | 14 ++++--
 src/App.vue                   | 89 +++++++++++++----------------------
 src/components/newMessage.vue | 14 ++++--
 src/main.js                   | 56 ++++++++++++++++++++++
 4 files changed, 108 insertions(+), 65 deletions(-)

diff --git a/api.js b/api.js
index 13ce322..a001add 100644
--- a/api.js
+++ b/api.js
@@ -23,9 +23,15 @@ const wss = new ws.Server({
 //WS handler
 wss.on('connection', (ws, req) => {
     console.log(`${req.socket.remoteAddress} connected`)
-    ws.on('message', msg => {
-        console.log(`${req.socket.remoteAddress} => ${msg}`)
-        if (msg.split(';', 2)[0] === 'message') wss.clients.forEach(clients => clients.send(msg))
+    ws.on('message', msgJSON => {
+        let msg = JSON.parse(msgJSON)
+        console.log(`${req.socket.remoteAddress} => ${msgJSON}`)
+        if (msg.type === 'message') wss.clients.forEach(client => client.send(msgJSON))
     })
-    ws.send('websocket connected')
+    let msg = {
+        type: "info",
+        time: Date.now(),
+        content: "connected"
+    }
+    ws.send(JSON.stringify(msg))
 })
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 800133d..23a4627 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,33 @@
 <template>
   <div id="app">
     <div class="content">
-      <div class="messages">
-        <div class="spacer" style="height: 1rem;"></div>
-        <message msg="Hey :D" />
-        <message msg="Du bist blööööd xD" />
-        <messageReceive msg="Du auch" />
-        <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 class="spacer" style="height: 1rem;"></div>
+      <div class="messagesContainer">
+        <div id="messages" class="messages">
+          <message msg="Hey :D" />
+          <message msg="Du bist blööööd xD" />
+          <messageReceive msg="Du auch" />
+          <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 />
-      <error msg="fehler!"/>
+      <error />
     </div>
   </div>
 </template>
@@ -47,36 +47,6 @@ export default {
     error
   }
 }
-
-const wsurl = 'ws://127.0.0.1:8090'
-const socket = new WebSocket(wsurl)
-function element(id){ return document.getElementById(id)}
-
-socket.onopen = () => {
-  socket.send('new session')
-}
-socket.onerror = (error) => {
-  console.log(`WebSocket error: ${error}`)
-}
-socket.onclose = () => show_error('session timed out (refresh)')
-socket.onmessage = (e) => {
-  console.log(e.data)
-  let msg = e.data.split(";", 2)
-  if (msg[0] === 'error') show_error(msg[1])
-  else if (msg[0] === 'message');
-}
-
-function show_error(msg) {
-  let error_style = element('errorBox').style
-  element('errorMessage').innerText = msg
-  error_style.display = "block"
-  error_style.animation = "slide-from-left alternate 0.2s"
-  setTimeout(() => {error_style.animation = ""}, 200)
-}
-
-/*function sendMessage(msg, user){
-  socket.send(`message;${user};${msg}`)
-}*/
 </script>
 
 <style>
@@ -102,15 +72,20 @@ body{
   background-color: #313131;
   box-shadow: 3px 3px 10px #111;
 }
-.messages{
+.messagesContainer{
   position: absolute;
   margin: 0;
+  padding-bottom: 1rem;
   left: 0;
   top: 0;
-  height: calc(100% - 4rem);
+  height: calc(100% - 5rem);
   width: 100%;
   overflow-y: auto;
 }
+.messages{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 
 @media (max-width: 55rem){
   .content{
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 0e92412..3613a64 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="newMessageBanner">
     <textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
-    <icon onclick="sendMessage()" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
+    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
 <script>
 import icon from './icon.vue';
+import sendMessage from '../main.js';
 
 export default {
   name: "newMessage",
@@ -18,9 +19,14 @@ export default {
   },
   mounted() {
     ResizeListener(document.getElementById("newMessageInput"));
-    /*EventListener.$on('EVENT_NAME', function (){
-
-    });*/
+    document.getElementById("sendMessageBtn").addEventListener("click", () => {
+      sendMessage.methods.callSendMessage(document.getElementById("newMessageInput").value)
+      document.getElementById("newMessageInput").value = ''
+      //sendMessage.methods.callSendMessage(this.data.message)
+    })
+  },
+  data: function () {
+    return { message: this.content}
   }
 }
 
diff --git a/src/main.js b/src/main.js
index 63eb05f..d852562 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,3 +6,59 @@ Vue.config.productionTip = false
 new Vue({
   render: h => h(App),
 }).$mount('#app')
+
+export default {
+  mounted() {
+    sendMessage()
+  },
+  methods: {
+    callSendMessage(data) {
+      sendMessage(data)
+    }
+  }
+}
+
+const wsurl = 'ws://127.0.0.1:8090'
+const socket = new WebSocket(wsurl)
+
+function element(id){ return document.getElementById(id)}
+
+socket.onopen = () => {
+  let msg = {
+    type: "info",
+    time: Date.now(),
+    content: "new session"
+  }
+  socket.send(JSON.stringify(msg))
+}
+socket.onerror = (error) => {
+  console.log(`WebSocket error: ${error}`)
+}
+socket.onclose = () => show_error('session timed out (refresh)')
+socket.onmessage = (e) => {
+  console.log(`data received => ${e.data}`)
+  let msg = JSON.parse(e.data)
+  if (msg.type === 'error') show_error(msg.content)
+  else if (msg.type === 'message'){
+    element('messages').innerHTML += `<messageReceive msg="${msg.content.message}" />`;
+  }
+}
+
+function show_error(msg) {
+  let error_style = element('errorBox').style
+  element('errorMessage').innerText = msg
+  error_style.display = "block"
+  error_style.animation = "slide-from-left alternate 0.2s"
+  setTimeout(() => {error_style.animation = ""}, 200)
+}
+
+function sendMessage(message){
+  let msg = {
+    type: "message",
+    time: Date.now(),
+    content: {
+      message: message
+    }
+  }
+  socket.send(JSON.stringify(msg))
+}
\ No newline at end of file