websocket

src/views/forest.vue

@@ -526,15 +526,13 @@
 			/** ----------------------------------底部按钮公用组件结束------------------------------------- */
 		},
 		mounted() {
-
 			this.getBaseInfo()
 			this.getTodayEvent()
-			/** ----------------------------------weosocket开始------------------------------------- */
-			this.initWebSocket();
-			/** ----------------------------------weosocket结束------------------------------------- */
 
+      /** ----------------------------------weosocket开始------------------------------------- */
+      this.initWebSocket();
+      /** ----------------------------------weosocket结束------------------------------------- */
 		},
-		/** ----------------------------------weosocket结束------------------------------------- */
 		data() {
 			return {
 				iconCurrentIndex0: '',
@@ -543,7 +541,8 @@
 				listCurrentIndex: '',
 				showChild: false,
 				/** ----------------------------------weosocket开始------------------------------------- */
-				websock: null,
+				websock: '',
+        setIntervalWesocketPush: null,
 				/** ----------------------------------weosocket结束------------------------------------- */
 
 				/** ----------------------------------摄像头预览开始------------------------------------- */
@@ -714,27 +713,43 @@
 		/** ----------------------------------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连接发生错误");
-				}
-			},
+      initWebSocket(){ //初始化weosocket
+        const wsuri = "wss://192.168.1.103:10012/websocket/admin";
+        this.websock = new WebSocket(wsuri);
+        console.log('建立websocket连接')
+        this.websock.onopen = this.websocketonopen;
+        this.websock.onmessage = this.websocketonmessage;
+        this.websock.onerror = this.websocketonerror;
+        this.websock.onclose = this.websocketclose;
+      },
+      websocketonopen(){ //连接建立之后执行send方法发送数据
+        this.sendPing()
+        alert("链接成功")
+      },
+      websocketonerror(){//连接建立失败重连
+        this.initWebSocket();
+      },
+      websocketonmessage(e){ //数据接收
+        const redata = JSON.parse(e.data);
+        console.log("接收数据",redata)
+      },
+      websocketsend(Data){//数据发送
+        this.websock.send(Data);
+      },
+      websocketclose(e){  //关闭
+        console.log('断开连接',e);
+      },
+      /**发送心跳
+       * @param {number} time 心跳间隔毫秒 默认5000
+       * @param {string} ping 心跳名称 默认字符串ping
+       */
+      sendPing(time = 5000, ping = 'ping'){
+        this.setIntervalWesocketPush=null
+        this.websock.send(ping)
+        this.setIntervalWesocketPush = setInterval(() => {
+          this.websock.send(ping)
+        }, time)
+      },
 			/** ----------------------------------weosocket结束------------------------------------- */
 
 			/** ----------------------------------底部按钮公用组件开始------------------------------------- */