added vision chat from server in client

luckydiamond/package-lock.json

@@ -11,6 +11,7 @@
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
         "core-js": "^3.8.3",
+        "mitt": "^3.0.1",
         "vue": "^3.2.13",
         "vue-recaptcha": "^3.0.0-alpha.6",
         "vue-router": "^4.2.5",
@@ -8268,6 +8269,11 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",

luckydiamond/package.json

@@ -12,6 +12,7 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
     "core-js": "^3.8.3",
+    "mitt": "^3.0.1",
     "vue": "^3.2.13",
     "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5",

luckydiamond/src/assets/js/chat/ChatLogic.js

@@ -1,9 +1,8 @@
 import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+import { eventBus } from "@/main";
 import {
     GetCookie
 } from "@/assets/js/storage/CookieStorage.js";
-import WritechatComponent from "@/components/WritechatComponent.vue";
-
 
 let webSocket;
 
@@ -18,7 +17,7 @@ export function ConnectToChat() {
 
         webSocket.onmessage = function (event) {
 
-            WritechatComponent.ClaimDatamsg(event.data);
+            eventBus.emit('dataChat', event.data)
             console.log('Message from Server:', event.data);
         };
 

luckydiamond/src/components/ChatComponent.vue

@@ -33,11 +33,14 @@
 
 <script>
 import '@/assets/css/ComponentsStyles/chat.css'
+
 import WritechatComponent from "@/components/WritechatComponent.vue";
 import { SendMessageToChat } from "@/assets/js/chat/ChatLogic.js";
+import {eventBus} from "@/main";
 
 export default {
   components: { WritechatComponent },
+  inject: [ 'eventBus' ],
   data() {
     return {
       array: [],
@@ -54,13 +57,26 @@ export default {
       }
 
       this.array.push(MsgUser)
-      
+
       SendMessageToChat(msg[0]);
 
       if(this.array.length > 7) {
         this.array.shift()
       }
     }
+  },
+  mounted() {
+    eventBus.on('dataChat', (dataFromServer) => {
+      const MsgUser = {
+        id: this.id + 1,
+        msg: dataFromServer,
+        username: dataFromServer,
+        icon: dataFromServer
+      }
+
+      this.array.push(MsgUser)
+      console.log(dataFromServer)
+    })
   }
 }
 </script>

luckydiamond/src/main.js

@@ -2,18 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import router from "@/router/router";
+import mitt from 'mitt'
 import { Mixins } from "@/mixins/mixin";
 import {
     ConnectToChat
 } from "@/assets/js/chat/ChatLogic.js";
 import '@/assets/css/global.css'
 
+export const eventBus = mitt()
+
 const app = createApp(App)
 
 app.use(router)
 app.mixin(Mixins)
 
 app.mount('#app')
-
+app.provide(eventBus)
 
 ConnectToChat();