added ws base code

package.json

@@ -19,8 +19,10 @@
     "i": "^0.3.6",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
+    "node-sass": "^4.12.0",
     "npm": "^6.9.0",
     "popper.js": "^1.15.0",
+    "socket.io-client": "^2.3.0",
     "vee-validate": "^2.2.4",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.4",
@@ -31,6 +33,7 @@
     "vue-moment": "^4.0.0",
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
+    "vue-socket.io-extended": "^4.0.1",
     "vue-spinner": "^1.0.3",
     "vue-sweetalert2": "^1.6.4",
     "vuejs-logger": "^1.5.3",
@@ -48,7 +51,6 @@
     "@vue/test-utils": "^1.0.0-beta.20",
     "bootstrap-sass": "^3.4.1",
     "chai": "^4.1.2",
-    "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
     "typescript": "^3.0.0",
     "vue-template-compiler": "^2.6.10"

src/components/Test.vue

@@ -0,0 +1,80 @@
+<!-- components/Profile.vue -->
+<template>
+    <div>
+       <h1>Toller Test</h1>
+        <span>{{ $socket.connected ? 'Connected' : 'Disconnected' }}</span>
+        <button v-if="$socket.connected" @click="disconnectWebsocket">Disconnect</button>
+        <button v-else="$socket.connected" @click="connectWebsocket">Connect</button>
+        <p>
+            <button v-if="$socket.connected" @click="sendWsMessage('Tolle Test Nachricht')">Send Message</button>
+        </p>
+
+    </div>
+</template>
+
+<script>
+    import {EventBus} from '@/utils';
+
+    export default {
+        data() {
+            return {
+                email: '',
+
+            };
+        },
+        methods: {
+            changeLocale(locale) {
+                this.$i18n.locale = locale;
+                // Vue.$moment.locale(locale);
+            },
+            sendWsMessage(msg){
+                console.log("sending msg: "+ msg);
+                this.$socket.client.emit('my_event', msg, (resp) => {
+                    console.log(resp);
+                });
+            },
+            connectWebsocket(){
+                this.$socket.client.connect();
+            },
+            disconnectWebsocket(){
+                this.$socket.client.disconnect();
+            }
+        },
+        mounted() {
+            this.$socket.client.on('my_event', (msg) => {
+                console.log(msg);
+            });
+            this.$socket.client.on('connect', (msg) => {
+                console.log("connected");
+                console.log(msg);
+            });
+
+            //this.$socket.$unsubscribe('even_name');
+
+        },
+        beforeDestroy() {
+            EventBus.$off('failedLoadingProfile');
+        },
+        computed: {
+            profile() {
+                return this.$store.state.profile;
+            },
+            access_token() {
+                return this.$store.state.access_token;
+            },
+        },
+    };
+</script>
+
+<style lang="scss">
+    .error-msg {
+        color: red;
+        font-weight: bold;
+    }
+    .lang-btn {
+        padding: 15px;
+        border: 2px solid green;
+        font-size: 18px;
+        margin: 15px;
+    }
+</style>

src/main.ts

@@ -8,6 +8,8 @@ import store from './store';
 import VueSweetalert2 from 'vue-sweetalert2';
 import VueCookies from 'vue-cookies';
 import VueLogger from 'vuejs-logger';
+import VueSocketIOExt from 'vue-socket.io-extended';
+import io from 'socket.io-client';
 import i18n from '@/plugins/i18n';
 import VeeValidate from 'vee-validate';
 // @ts-ignore
@@ -70,6 +72,10 @@ Vue.use(VueSweetalert2);
 Vue.use(VeeValidate);
 Vue.use(VueMoment);
 
+const socket = io('ws://localhost:5000');
+
+Vue.use(VueSocketIOExt, socket);
+
 
 // setup fake backend
 // import { configureFakeBackend } from './helpers';

src/router.ts

@@ -12,8 +12,10 @@ import Group from '@/components/Group.vue';
 import Rooms from '@/components/Rooms.vue';
 import Recorders from '@/components/Recorders.vue';
 import Commands from '@/components/Commands.vue';
+import Test from '@/components/Test.vue';
 import store from '@/store';
 
+
 Vue.use(Router);
 
 export const router = new Router({
@@ -26,6 +28,11 @@ export const router = new Router({
             name: 'home',
             component: Home,
         },
+        {
+            path: '/test',
+            name: 'test',
+            component: Test,
+        },
         {
             path: '/login',
             name: 'login',

src/views/Home.vue

@@ -24,7 +24,6 @@
             };
         }
 
-
     }
 </script>