WebSocket

src/api/socket.js

@@ -0,0 +1,73 @@
+import Cookies from 'js-cookie'
+var websock = null;
+var global_callback = null;
+var serverPort = '10012';	//webSocket连接端口
+
+
+
+function getWebIP(){
+  var curIP = '192.168.31.138'//window.location.hostname;
+  return curIP;
+}
+
+function initWebSocket(){ //初始化weosocket
+  //ws地址
+  var wsuri = 'ws://' + getWebIP() + ':' + serverPort + '/websocket/' + Cookies.get('username')
+  if ("WebSocket" in window) {
+    websock = new WebSocket(wsuri);
+    websock.onmessage = function(e) {
+      websocketonmessage(e);
+    }
+    websock.onclose = function(e) {
+      websocketclose(e);
+    }
+    websock.onopen = function() {
+      websocketOpen();
+    }
+  }
+  //连接发生错误的回调方法
+  websock.onerror = function () {
+    console.log("WebSocket连接发生错误");
+  }
+}
+
+// 实际调用的方法
+function sendSock(agentData,callback){
+  global_callback = callback;
+  if (websock.readyState === websock.OPEN) {
+    //若是ws开启状态
+    websocketsend(agentData)
+  }else if (websock.readyState === websock.CONNECTING) {
+    // 若是 正在开启状态，则等待1s后重新调用
+    setTimeout(function () {
+      sendSock(agentData,callback);
+    }, 1000);
+  }else {
+    // 若未开启 ，则等待1s后重新调用
+    setTimeout(function () {
+      sendSock(agentData,callback);
+    }, 1000);
+  }
+}
+
+//数据接收
+function websocketonmessage(e){
+  console.log(e.data);
+}
+
+//数据发送
+function websocketsend(agentData){
+  websock.send(JSON.stringify(agentData));
+}
+
+//关闭
+function websocketclose(e){
+  console.log("connection closed (" + e.code + ")");
+}
+
+function websocketOpen(e){
+  console.log("连接成功");
+}
+
+
+export{sendSock,initWebSocket}

src/main.js

@@ -25,6 +25,10 @@ import DictData from '@/components/DictData'
 import './assets/icons' // icon
 import './permission' // permission control
 
+// //WebSocket封装方法
+// import * as socketApi from '@/api/socket'
+// Vue.prototype.socketApi = socketApi
+
 Vue.prototype.$axios = axios
 Vue.config.productionTip = false
 Vue.prototype.selectDictLabel = selectDictLabel

src/views/forest.vue

@@ -447,6 +447,10 @@
 </template>
 
 <script>
+  /** ----------------------------------weosocket开始------------------------------------- */
+  import Cookies from 'js-cookie'
+  /** ----------------------------------weosocket结束------------------------------------- */
+
   import {
     getTodayEvent,getEventStatusList,getEventSourceList,getEventListByDeptIdList,updateCentereventTForestfireStatus,getForest
   } from '@/api/event'
@@ -464,9 +468,8 @@
   /** ----------------------------------摄像头预览开始------------------------------------- */
   import {getDahuaVideoServer} from "@/api/dahua/dahua";
   import DHWs from '@/dahua/lib/DHWs'
-
   /** ----------------------------------摄像头预览结束------------------------------------- */
-	// import echarts from 'echarts'
+
 	let echarts = require('echarts')
 	export default {
     dicts: ['event_source'],
@@ -490,9 +493,17 @@
       this.getBaseInfo()
       this.getTodayEvent()
 			this.personnelChart()
+
+      /** ----------------------------------weosocket开始------------------------------------- */
+      this.initWebSocket();
+      /** ----------------------------------weosocket结束------------------------------------- */
 		},
 		data() {
 			return {
+        /** ----------------------------------weosocket开始------------------------------------- */
+        websock : null,
+        /** ----------------------------------weosocket结束------------------------------------- */
+
         /** ----------------------------------摄像头预览开始------------------------------------- */
         activePanel: 'key1',
         isLogin: false,
@@ -658,9 +669,39 @@
 				indentdisabled:false
 			}
 		},
-
+    /** ----------------------------------weosocket开始------------------------------------- */
+    destroyed() { //离开页面关闭Socket连接
+      if(this.websock) {
+        this.websock.close()
+        this.websock = null
+      }
+    },
+    /** ----------------------------------weosocket结束------------------------------------- */
 		methods: {
-      //弹出事件定位页面
+      /** ----------------------------------weosocket开始------------------------------------- */
+      initWebSocket() { //初始化weosocket
+        var wsuri = 'ws://192.168.31.138:10012/websocket/' + Cookies.get('username')
+        if ("WebSocket" in window) {
+          this.websock = new WebSocket(wsuri);
+          //数据接收
+          this.websock.onmessage = function(e) {
+            console.log(e.data);
+          }
+          //关闭
+          this.websock.onclose = function(e) {
+            console.log("connection closed (" + e.code + ")");
+          }
+          this.websock.onopen = function() {
+            console.log("WebSocket连接成功");
+          }
+        }
+        //连接发生错误的回调方法
+        this.websock.onerror = function() {
+          console.log("WebSocket连接发生错误");
+        }
+      },
+      /** ----------------------------------weosocket结束------------------------------------- */
+  //弹出事件定位页面
       showDialog(click){
         if(click=="eventLocation"){
           this.$refs.eventLocation.showEventLocation()