修改己方消息样式，以及对后端json字符串解析

src/views/main/Chat.vue

@@ -8,7 +8,7 @@
       <div v-for="(message, index) in messageList" :key="index">
 
 
-                <div class="word" v-if="!message.isMine">
+        <div class="word" v-if="!(message.nickname == 'COOL')">
           <div class="information">
             <p>{{ message.nickname }} {{ message.sendTime }}</p>
           </div>
@@ -29,13 +29,15 @@
             <div class="information">
               <p> {{ message.sendTime }}  {{ message.nickname }}   </p>
             </div>
+
             <div class="info">
+              <el-avatar :src="message.pic" class="head"></el-avatar>
+
               <div class="message">
                 <div class="detail">
                   {{ message.message }}
                 </div>
               </div>
-                            <el-avatar :src="message.pic" class="head"></el-avatar>
 
             </div>
           </div>
@@ -62,63 +64,7 @@ export default {
 
   data() {
     return {
-            messageList: [
+      messageList: [],
-
-                {
-                    nickname: 'Cool',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 15:23:18',
-                    message: '我怎么把文件放在服务器上，然后在公网对他进行访问?',
-                    isMine: false,
-                },
-
-                {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: true,
-                },
-                {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: true,
-                },
-                {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: true,
-                }, {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: true,
-                }, {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: true,
-                },
-                {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: true,
-                }, {
-                    nickname: 'COOL',
-                    pic: require("@/assets/img/cool.jpg"),
-                    sendTime: '2023/11/20 18:23:18',
-                    message: '先xx后xx再xx',
-                    isMine: false,
-                },
-            ],
       textarea: "",
       myName: '',
       myPic: '',
@@ -141,7 +87,7 @@ export default {
           sendTime: '2023/11/20 18:23:18',
           message: this.textarea,
         }
-                socket.send(SendMessage);
+        socket.send(JSON.stringify(SendMessage));
         this.textarea = "";
         console.log(this.messageList, "这是send")
       }
@@ -164,9 +110,9 @@ export default {
           console.log("websocket已打开");
         };
         socket.onmessage = function (msg) {
-                    console.log(msg.data,1)
+          var data = JSON.parse(msg.data);
-                    console.log(that.messageList,3)
+          that.messageList = data
-                    that.messageList = msg.data
+          console.log(that.messageList[1].message, "nickname")
           console.log(that.messageList, 2)
 
         }
@@ -273,7 +219,8 @@ export default {
     .word-my {
       //水平居右
       display: flex;
-            justify-content: flex-end;
+      // justify-content: flex-end;
+      direction: rtl;
 
 
 
@@ -293,16 +240,21 @@ export default {
           margin-top: 10px;
           font-size: 16px;
           display: flex;
+          position: relative;
+          right: 10px;
 
           .head {
+
             margin-top: 10px;
-                        margin-right: 10px;
+            position: relative;
+            right: 10px;
           }
 
           .message {
+
             padding-right: 7px;
             padding-left: 7px;
-                        margin-right: 18px;
+            margin-right: 28px;
             margin-top: 10px;
             position: relative;
             font-size: 16px;