websocket connection and error messages

api.js

@@ -2,10 +2,9 @@ const ws = require('ws')
 
 //WS server
 const wss = new ws.Server({
-    port: 8081,
+    port: 8090,
     perMessageDeflate: {
         zlibDeflateOptions: {
-            // See zlib defaults.
             chunkSize: 1024,
             memLevel: 7,
             level: 3
@@ -13,21 +12,20 @@ const wss = new ws.Server({
         zlibInflateOptions: {
             chunkSize: 10 * 1024
         },
-        // Other options settable:
+        clientNoContextTakeover: true,
-        clientNoContextTakeover: true, // Defaults to negotiated value.
+        serverNoContextTakeover: true,
-        serverNoContextTakeover: true, // Defaults to negotiated value.
+        serverMaxWindowBits: 10,
-        serverMaxWindowBits: 10, // Defaults to negotiated value.
+        concurrencyLimit: 10,
-        // Below options specified as default values.
+        threshold: 1024
-        concurrencyLimit: 10, // Limits zlib concurrency for perf.
-        threshold: 1024 // Size (in bytes) below which messages
-        // should not be compressed.
     }
 });
 
 //WS handler
-wss.on('connection', ws => {
+wss.on('connection', (ws, req) => {
-    ws.on('message', message => {
+    console.log(`${req.socket.remoteAddress} connected`)
-        if (message.split(';', 2)[0] === 'message') wss.clients.forEach(clients => clients.send(message))
+    ws.on('message', msg => {
+        console.log(`${req.socket.remoteAddress} => ${msg}`)
+        if (msg.split(';', 2)[0] === 'message') wss.clients.forEach(clients => clients.send(msg))
     })
     ws.send('websocket connected')
 })

package-lock.json

@@ -1744,16 +1744,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1780,34 +1770,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "find-cache-dir": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1829,25 +1791,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1912,16 +1855,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1938,18 +1871,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.9",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
-          "integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -11019,6 +10940,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
+      "integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -11268,6 +11270,15 @@
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
+        },
+        "ws": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
         }
       }
     },
@@ -11579,6 +11590,15 @@
             }
           }
         },
+        "ws": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        },
         "yargs": {
           "version": "13.3.2",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
@@ -11744,13 +11764,9 @@
       }
     },
     "ws": {
-      "version": "6.2.1",
+      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
-      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA=="
-      "dev": true,
-      "requires": {
-        "async-limiter": "~1.0.0"
-      }
     },
     "xtend": {
       "version": "4.0.2",

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "ws": "^7.3.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

public/sym/ic_close_white_24px.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

src/App.vue

@@ -27,6 +27,7 @@
         <div class="spacer" style="height: 1rem;"></div>
       </div>
       <newMessage />
+      <error msg="fehler!"/>
     </div>
   </div>
 </template>
@@ -35,18 +36,21 @@
 import message from './components/message.vue';
 import messageReceive from './components/messageReceive.vue';
 import newMessage from './components/newMessage.vue';
+import error from "@/components/error.vue";
 
 export default {
   name: 'App',
   components: {
     message,
     messageReceive,
-    newMessage
+    newMessage,
+    error
   }
 }
 
-const wsurl = 'ws://127.0.0.1:8081'
+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')
@@ -54,15 +58,24 @@ socket.onopen = () => {
 socket.onerror = (error) => {
   console.log(`WebSocket error: ${error}`)
 }
-//socket.onclose = () => show_error('session timed out (refresh)')
+socket.onclose = () => show_error('session timed out (refresh)')
-/*socket.onmessage = (e) => {
+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] === 'surl') {
+  else if (msg[0] === 'message');
-    document.getElementById('surl-input').value = msg[1]
-    document.getElementById('surl-popup').style.display = 'block'
 }
+
+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>
 

src/components/error.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="errorBox" class="errorBox">
+    <icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="/sym/ic_close_white_24px.svg" />
+    <div id="errorMessage" class="btnText">
+      {{msg}}
+    </div>
+  </div>
+</template>
+
+<script>
+import icon from './icon.vue';
+
+export default {
+name: "error",
+  components: {
+    icon
+  },
+  props:{
+    msg: String
+  }
+}
+</script>
+
+<style scoped>
+  .errorBox{
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+    height: 10rem;
+    width: 16rem;
+    background-color: #E53935;
+    border-radius: 15px;
+  }
+  #errorBox{
+    display: none;
+  }
+  .btnText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 1.4rem;
+    color: #fff;
+    font-family:Arial, "lucida console", sans-serif;
+  }
+  .errorBtn{
+    position: absolute;
+    top: 0rem;
+    right: 0rem;
+    background-color: #0000;
+    box-shadow: none;
+  }
+
+  @keyframes slide-from-left{
+    from{left:-30rem;opacity: 0}
+    to{left:1rem;opacity: 1}
+  }
+
+  @media (max-width: 35rem) {
+    .errorBox {
+      bottom: 1rem;
+      left: 1rem;
+      height: 8rem;
+      width: calc(100% - 2rem);
+    }
+  }
+</style>

src/components/icon.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="iconContainer" >
-    <img class="icon" :src="ic" alt="" />
+    <img class="icon" v-bind:src=ic alt="" />
   </div>
 </template>
 

src/components/newMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="newMessageBanner">
-    <textarea name="input" id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
+    <textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." type="text" v-model="content" />
-    <icon style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
+    <icon onclick="sendMessage()" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
@@ -18,10 +18,13 @@ export default {
   },
   mounted() {
     ResizeListener(document.getElementById("newMessageInput"));
+    /*EventListener.$on('EVENT_NAME', function (){
+
+    });*/
   }
 }
 
-export const ResizeListener = (id) => {
+export const ResizeListener = id => {
   id.addEventListener("input", resize);
 }
 function resize() {