修改己方消息样式，以及对后端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>
@@ -27,15 +27,17 @@
         <div class="word-my" v-else>
           <div class="outer">
             <div class="information">
-                            <p>{{ message.sendTime }} {{ message.nickname }} </p>
+              <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,66 +64,10 @@ 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:'',
+      myName: '',
-            myPic:'',
+      myPic: '',
 
     };
   },
@@ -131,24 +77,24 @@ export default {
     this.init()
   },
   methods: {
-        send(){
+    send() {
       if (!this.textarea) {
-                this.$message({type: 'warning', message: "请输入内容"})
+        this.$message({ type: 'warning', message: "请输入内容" })
       } else {
-                let SendMessage={
+        let SendMessage = {
           nickname: 'COOL',
           pic: "1",
           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")
+        console.log(this.messageList, "这是send")
       }
     },
 
     init() {
-            const that=this
+      const that = this
       if (typeof (WebSocket) === undefined) {
         console.log("您的浏览器不支持WebSocket");
       } else {
@@ -164,10 +110,10 @@ 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)
+          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;