From c19a9466b3221f9a8eb28e84a09b1406949497dd Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 23 四月 2024 17:42:02 +0800
Subject: [PATCH] websocket
---
src/views/index.vue | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 54 insertions(+), 0 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 9821ea7..324df60 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -8,6 +8,7 @@
<script>
import DataView from './home/data-view/index.vue';
import DataWrapper from './home/data-wrapper/index.vue';
+import { getToken } from '@/utils/auth'
export default {
name: "Index",
@@ -20,6 +21,59 @@
};
},
+ methods: {
+ senMsg(msg) {
+ // 鍙戦�佹枃鏈秷鎭�
+ this.$websocket.send(msg);
+ },
+ // 鍙戦�佸績璺虫秷鎭�
+ sendHeartbeat() {
+ if (this.$websocket.readyState === WebSocket.OPEN) {
+ // 鍙戦�佸績璺虫秷鎭紝鍙互鏄换鎰忔牸寮忕殑瀛楃涓诧紝鐢ㄤ簬琛ㄧず蹇冭烦
+ this.senMsg('ping');
+ }
+ },
+ // 寮�濮嬪績璺冲畾鏃跺櫒
+ startHeartbeat() {
+ this.heartbeatInterval = setInterval(() => {
+ this.sendHeartbeat();
+ }, 10000); // 姣� 10 绉掑彂閫佷竴娆″績璺�
+ },
+ // 鍋滄蹇冭烦瀹氭椂鍣�
+ stopHeartbeat() {
+ clearInterval(this.heartbeatInterval);
+ },
+ initWebsocket() {
+ this.$websocket = new WebSocket(process.env.VUE_APP_WEB_SOCKET_URL)
+ // 鐩戝惉 WebSocket 杩炴帴鎴愬姛浜嬩欢
+ this.$websocket.onopen = event => {
+ console.log('WebSocket 杩炴帴鎴愬姛', event);
+ let msg = {
+ "token": getToken()
+ }
+ // 鍙戦�佽韩浠借璇�
+ this.senMsg(JSON.stringify(msg))
+ // 璁剧疆蹇冭烦瀹氭椂鍣紝瀹氭湡鍙戦�佸績璺虫秷鎭�
+ this.startHeartbeat();
+ };
+
+ // 鐩戝惉 WebSocket 鎺ユ敹娑堟伅浜嬩欢
+ this.$websocket.onmessage = event => {
+ const message = event.data;
+ console.log('鎺ユ敹鍒版秷鎭�:', message);
+ };
+
+ // 鐩戝惉 WebSocket 杩炴帴鍏抽棴浜嬩欢
+ this.$websocket.onclose = event => {
+ console.log('WebSocket 杩炴帴鍏抽棴', event);
+ // 娓呴櫎蹇冭烦瀹氭椂鍣�
+ this.stopHeartbeat();
+ };
+ },
+ },
+ mounted() {
+ this.initWebsocket();
+ }
};
</script>
--
Gitblit v1.8.0