修复websocket作用域的故障

public/config.js

@@ -1,4 +1,6 @@
 window.publicConfig = {
     // 请求地址
     BASE_API:'http://10.97.121.2/api/',
+    // socket url
+    WS_URL: 'ws://10.97.121.2/ws'
 }

src/utils/comm.js

@@ -37,11 +37,15 @@ export function ecMaxVal(arr){
 // websoket
 // 查询的参数封装成json
 export function rtsocket(param){
-  ws = new WebSocket("ws://10.97.121.2/ws");
+  const ws = new WebSocket("ws://10.97.121.2/ws");
+  const rtdata={};
   ws.onopen = function() {
     ws.send(JSON.stringify(param))
   };
   ws.onmessage = function(e) {
-    return e.data;
+    return JSON.parse(e.data);
+    // rtdata = e.data
+    
   };
+
 }

src/utils/socket.js

@@ -0,0 +1,161 @@
+// 导出socket对象
+export {
+    socket
+  }
+// export default socket
+
+
+const publicConfig = window.publicConfig
+// socket主要对象
+var socket = {
+  websock: null,
+  // 此处是从env文件中读取socket地址，
+  ws_url: publicConfig.WS_URL,
+  // 开启标识
+  socket_open: false,
+  // 心跳timer
+  hearbeat_timer: 600,
+  // 心跳发送频率
+  hearbeat_interval: 5000,
+
+  // 是否自动重连
+  is_reonnect: true,
+  // 重连次数
+  reconnect_count: 3,
+  // 已发起重连次数
+  reconnect_current: 1,
+  // 重连timer
+  reconnect_timer: 900,
+  // 重连频率
+  reconnect_interval: 3000,
+
+  /**
+   * 初始化连接
+   */
+  init: () => {
+    if (!("WebSocket" in window)) {
+      console.log('浏览器不支持WebSocket')
+      return null
+    }
+
+    // 已经创建过连接不再重复创建
+    if (socket.websock) {
+      return socket.websock
+    }
+
+    socket.websock = new WebSocket(socket.ws_url)
+    socket.websock.onmessage = function (e) {
+      socket.receive(e)
+    }
+
+    // 关闭连接
+    socket.websock.onclose = function (e) {
+      console.log('连接已断开')
+      console.log('connection closed (' + e.code + ')')
+      clearInterval(socket.hearbeat_interval)
+      socket.socket_open = false
+
+      // 需要重新连接
+      if (socket.is_reonnect) {
+        socket.reconnect_timer = setTimeout(() => {
+          // 超过重连次数
+          if (socket.reconnect_current > socket.reconnect_count) {
+            clearTimeout(socket.reconnect_timer)
+            return
+          }
+
+          // 记录重连次数
+          socket.reconnect_current++
+          socket.reconnect()
+        }, socket.reconnect_interval)
+      }
+    }
+
+    // 连接成功
+    socket.websock.onopen = function () {
+      console.log('连接成功')
+      socket.socket_open = true
+      socket.is_reonnect = true
+      // 开启心跳
+      socket.heartbeat()
+    }
+
+    // 连接发生错误
+    socket.websock.onerror = function () {
+      console.log('WebSocket连接发生错误')
+    }
+  },
+
+  /**
+   * 发送消息
+   * @param {*} data 发送数据
+   * @param {*} callback 发送后的自定义回调函数
+   */
+  send: (data, callback = null) => {
+    // 开启状态直接发送
+    if (socket.websock.readyState === socket.websock.OPEN) {
+      socket.websock.send(JSON.stringify(data))
+
+      if (callback) {
+        callback()
+      }
+
+      // 正在开启状态，则等待1s后重新调用
+    } else if (socket.websock.readyState === socket.websock.CONNECTING) {
+      setTimeout(function () {
+        socket.send(data, callback)
+      }, 1000)
+
+      // 未开启，则等待1s后重新调用
+    } else {
+      socket.init()
+      setTimeout(function () {
+        socket.send(data, callback)
+      }, 3000)
+    }
+  },
+
+  /**
+   * 接收消息
+   * @param {*} message 接收到的消息
+   */
+  receive: (message) => {
+    return message
+    // var params = JSON.parse(message.data)
+    // return params;
+  },
+
+  /**
+   * 心跳
+   */
+  heartbeat: () => {
+    console.log('socket', 'ping')
+    if (socket.hearbeat_timer) {
+      clearInterval(socket.hearbeat_timer)
+    }
+
+  },
+
+  /**
+   * 主动关闭连接
+   */
+  close: () => {
+    console.log('主动断开连接')
+    clearInterval(socket.hearbeat_interval)
+    socket.is_reonnect = false
+    socket.websock.close()
+  },
+
+  /**
+   * 重新连接
+   */
+  reconnect: () => {
+    console.log('发起重新连接', socket.reconnect_current)
+
+    if (socket.websock && socket.socket_open) {
+      socket.websock.close()
+    }
+
+    socket.init()
+  },
+}

src/views/HomeView.vue

@@ -125,7 +125,7 @@ import * as echarts from 'echarts';
 import * as btApi from '../api/home'
 
 // 数字变化效果
-import { numGrow,ecMaxVal } from '@/utils/comm';
+import { numGrow,ecMaxVal ,rtsocket} from '@/utils/comm';
 
 // 引入api
 import * as homeApi from '@/api/home'
@@ -165,13 +165,19 @@ export default {
       zxliddata:[],
       // 折线名称
       zxlindata:[],
+
+      //websocket 
+      wsobj:null,
+      // 心跳
+      wsheart:false,
+      // reconect time
+      reconntime:0,
     }
   },
-  // created() {
+  created() {
-  //   this.$nextTick(() => {
+    //  初始化ws 链接
-  //     this.cgchart()
+    
-  //   });
+  },
-  // },
   mounted() {
     // 客流趋势
     this.btgetdata(this.klselt)
@@ -663,13 +669,42 @@ export default {
     },
 
     // 获取实时数据
-    getInfoDatas() {
+   async getInfoDatas() {
-      homeApi.allInfoDatas().then(res => {
+      // interface
+      // homeApi.allInfoDatas().then(res => {
         // get allTimeData
-        this.ssjgNumDatas = res.data.returnData
+        // console.log("from api")
-      });
+        // console.log(res.data.returnData)
+        // this.ssjgNumDatas = res.data.returnData
+      // });
+      // websocket 
+      const param ={
+        type:'realTimeData',
+      }
+      
+      const ws = new WebSocket("ws://10.97.121.2/ws");
+      ws.onopen = function() {
+        ws.send(JSON.stringify(param))
+      };
+      ws.onmessage = function(e) {
+        var jstr = JSON.parse(e.data)
+        func1(jstr)
+      };
+
+      let func2=function(jstr){
+        const darr = jstr.data;
+        this.ssjgNumDatas = darr.data
+        console.log("ws_out")
+        console.log(this.ssjgNumDatas)
+      }
+
+      let func1 = func2.bind(this)
+
     },
 
+
+
+
     // 各个场馆的人流
     getGcgNumDatas() {
       homeApi.allGcgNumDatas().then(res => {