2022/3/16

minggao/config/index.js

@@ -12,9 +12,9 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        //  target: 'http://192.168.1.17:12345', //翟毅飞
+         target: 'http://192.168.1.17:12345', //翟毅飞
         //  target: 'https://yfznscd.com', //线上
-         target: 'https://www.toreskj.com', //线上
+        //  target: 'https://www.toreskj.com', //线上
         // target: 'http://192.168.1.77:12345', //曹世祥
         // target:"http://114.115.147.140:12345",
         // target: 'https://www.yfznscd.com',
@@ -26,7 +26,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.29', // can be overwritten by process.env.HOST
+    host: 'localhost', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

minggao/src/page/commandCenter/realTime.vue

@@ -64,7 +64,11 @@
             </el-table-column>
             <el-table-column prop="mobile" label="手机号" width="250">
               <template slot-scope="scope">
-                <span>{{ scope.row.mobile || "无" }}</span>
+                <span
+                  >{{ scope.row.mobile || "无" }}--------------{{
+                    scope.row.unread
+                  }}</span
+                >
               </template>
             </el-table-column>
             <el-table-column
@@ -92,11 +96,7 @@
                     top: 11px;
                   "
                 >
-                  <el-badge
-                    v-if="scope.row.unread"
-                    is-dot
-                    class="item"
-                  >
+                  <el-badge v-if="scope.row.unread" is-dot class="item">
                     <img
                       @click="msgAxios(scope.row)"
                       src="../../assets/images/realTime/xiaoxi.png"
@@ -308,6 +308,7 @@
         <li class="list" v-for="(item, index) in msgList.msg_list" :key="index">
           <!-- me -->
           <div class="list_msgBox1" v-if="item.is_right == true">
+            <!-- <div class="el-icon-loading"></div> -->
             <div
               style="
                 background: #60fba5;
@@ -488,6 +489,12 @@ export default {
 
       // 视频通话窗口缩放
       zoomShow: false, // 默认最小化
+
+      // websocket断开加载框
+      fullscreenLoading: null,
+
+      // 消息发送加载
+      msgSetTime: null,
     };
   },
   //监听属性 类似于data概念
@@ -520,7 +527,7 @@ export default {
     dialogVisible(val) {
       if (val == false) {
         this.msgList = [];
-      } 
+      }
     },
 
     // 音视频弹框
@@ -534,13 +541,17 @@ export default {
 
     // 给表格文本消息增加提示，数据从webscoket中获取
     tableData(val) {
-      var that = this
+      var that = this;
       for (var i = 0; i < val.length; i++) {
         let sdhkj = val[i];
         for (var k = 0; k < this.websockMsgList.length; k++) {
           let sdjaks = this.websockMsgList[k];
-          if (sdhkj.real_name == sdjaks.real_name && sdjaks.unread !== 0 && sdjaks.unread) {
-              this.tableData[i]['unread'] = sdjaks.unread
+          if (
+            sdhkj.real_name == sdjaks.real_name &&
+            sdjaks.unread !== 0 &&
+            sdjaks.unread
+          ) {
+            this.tableData[i]["unread"] = sdjaks.unread;
           }
         }
       }
@@ -549,6 +560,10 @@ export default {
 
     // websocket列表变化
     websockMsgList(val) {
+      console.log(
+        "-----------------有变化了啊---------------------------",
+        val
+      );
       // var that = this
       // for (var i = 0; i < this.tableData.length; i++) {
       //   let sdhkj = this.tableData[i];
@@ -657,7 +672,7 @@ export default {
     // 文本消息
     msgAxios(data) {
       this.getUserObj = data;
-      this.redtf = data
+      this.redtf = data;
       this.userName = localStorage.getItem("usernme");
       console.log(this.userName);
       this.tltData = "与" + data.real_name + "的对话";
@@ -799,6 +814,16 @@ export default {
           var v = JSON.stringify(obj);
           this.websock.send(v);
           this.input = "";
+          this.msgSetTime = setTimeout(() => {
+            // 设定十秒内没有接收到服务器返回的list数据就表明消息没有发送成
+            if (document.getElementsByClassName("el-message").length == 0) {
+              this.$message({
+                message: "消息发送失败，请刷新界面重试！",
+                type: "warning",
+                duration: 1500,
+              });
+            }
+          },10000)
         } catch (error) {
           console.log(">>> sendMsg, error: ", error);
         }
@@ -839,8 +864,11 @@ export default {
               msg_info: "",
             },
           };
-          this.websock.send(JSON.stringify(obj1));
           this.start(); //开启心跳
+          if (this.fullscreenLoading !== null) {
+            this.websock.send(JSON.stringify(obj1));
+          }
+          this.fullscreenLoading.close(); // 加载关闭
         };
         this.websock.onmessage = (event) => {
           var data = JSON.parse(event.data);
@@ -865,6 +893,8 @@ export default {
             //   this.msgList = data.data[0];
             // }
           } else if (data.action == "list") {
+            console.log('消息发送成功了----------------------------------')
+            clearTimeout(this.msgSetTime); // 清除发送失败定时器
             // 返回list为发送消息成功后需要再次调用聊天列表
             var obj = {};
             obj = {
@@ -893,6 +923,7 @@ export default {
                 { userUpdate: true }
               )
               .then((result) => {
+                console.log(result)
                 if (result == true) {
                   console.log("0000000000000000000000000000000000000登录成功");
                   this.plugFlow(); //推流
@@ -919,11 +950,14 @@ export default {
           console.log("WebSocket:已关闭");
           console.log(event);
           console.log(that.timeoutnum);
-          setTimeout(() => {
-            // that.websock.close(); // 先关闭
-            clearTimeout(that.timeoutObj); //清除时间
-            that.reconnect(); // 重连
-          }, 5000);
+          if (that.timeoutnum !== null) {
+            this.openFullScreen2();
+            setTimeout(() => {
+              // that.websock.close(); // 先关闭
+              clearTimeout(that.timeoutObj); //清除时间
+              // that.reconnect(); // 重连
+            }, 5000);
+          }
         };
       }
     },
@@ -1046,6 +1080,7 @@ export default {
           var obj1 = {};
           obj1 = {
             action: "keepalive",
+            type: "PC",
             recv_user_id: "",
             data: {
               msg_status: false,
@@ -1100,6 +1135,16 @@ export default {
         this.zoomShow = true;
       }
     },
+
+    // websocket断开加载框
+    openFullScreen2() {
+      this.fullscreenLoading = this.$loading({
+        lock: true,
+        text: "通信异常,连接中...",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -1127,12 +1172,20 @@ export default {
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {
+    // var that = this;
+    // clearTimeout(that.timeoutnum); // 清除重连
+    // clearTimeout(that.timeoutObj); // 清除心跳
+    // that.websock.close(); // 关闭websocket
+  }, //生命周期 - 销毁之前
+  destroyed() {
+    console.log("我进入到销毁里喽");
     var that = this;
     clearTimeout(that.timeoutnum); // 清除重连
     clearTimeout(that.timeoutObj); // 清除心跳
     that.websock.close(); // 关闭websocket
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
+    that.websock = null; //    清空
+    console.log(that.websock);
+  }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>

minggao/src/util/server.js

@@ -32,6 +32,7 @@ if (location.origin.indexOf('https') !== -1) {
 // console.log(wsUrl)
 // wsUrl = 'wss://yfznscd.com'
 // wsUrl = 'wss://www.toreskj.com'
+// wsUrl = 'ws:192.168.1.17:12345'
 export {
   DOMIN,
   mapJson,