WebSocket JSON

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 => {
+    ws.on('message', msgJSON => {
-        console.log(`${req.socket.remoteAddress} => ${msg}`)
+        let msg = JSON.parse(msgJSON)
-        if (msg.split(';', 2)[0] === 'message') wss.clients.forEach(clients => clients.send(msg))
+        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))
 })

src/App.vue

@@ -1,33 +1,33 @@
 <template>
   <div id="app">
     <div class="content">
-      <div class="messages">
+      <div class="messagesContainer">
-        <div class="spacer" style="height: 1rem;"></div>
+        <div id="messages" class="messages">
-        <message msg="Hey :D" />
+          <message msg="Hey :D" />
-        <message msg="Du bist blööööd xD" />
+          <message msg="Du bist blööööd xD" />
-        <messageReceive msg="Du auch" />
+          <messageReceive msg="Du auch" />
-        <message msg="lol" />
+          <message msg="lol" />
-        <messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
+          <messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
-        <message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          <message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
+                        Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
-                      Fusce scelerisque pellentesque erat quis sollicitudin.
+                        Fusce scelerisque pellentesque erat quis sollicitudin.
-                      Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
+                        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.
+                        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.
+                        Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
-                      Nullam non turpis consequat, placerat lectus nec, ornare orci.
+                        Nullam non turpis consequat, placerat lectus nec, ornare orci.
-                      Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
+                        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. "
+                        Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
-        />
+          />
-        <messageReceive msg="Du hast Pizza!" />
+          <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" />
+          <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>
       </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{

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}
   }
 }
 

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))
+}