Implement chat logic in vue

luckydiamond/src/components/ChatComponent.vue

@@ -49,14 +49,6 @@ export default {
   },
   methods: {
     ClaimDatamsg(msg) {
-      const MsgUser = {
-        id: this.id + 1,
-        msg: msg[0],
-        username: msg[1],
-        icon: msg[2]
-      }
-
-      this.array.push(MsgUser)
 
       SendMessageToChat(msg[0]);
 
@@ -67,15 +59,22 @@ export default {
   },
   mounted() {
     eventBus.on('dataChat', (dataFromServer) => {
+      try {
+      // Attempt to parse the JSON string
+      const dataObject = JSON.parse(dataFromServer);
+      let imageUrl = "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
+
       const MsgUser = {
         id: this.id + 1,
-        msg: dataFromServer,
-        username: dataFromServer,
-        icon: dataFromServer
-      }
+        msg: dataObject.Message,
+        username: dataObject.SpUserName,
+        icon: imageUrl
+      };
 
-      this.array.push(MsgUser)
-      console.log(dataFromServer)
+      this.array.push(MsgUser);
+    } catch (error) {
+      console.error('Error parsing JSON data:', error);
+    }
     })
   }
 }