|
@@ -0,0 +1,88 @@
|
|
|
+<template>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ <a-textarea v-model:value="msg" :disabled="true" style="height: 500px" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {defineComponent, onMounted, reactive, toRefs} from "vue";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ setup(){
|
|
|
+
|
|
|
+ const status = reactive({
|
|
|
+ websocket : undefined,
|
|
|
+ msg: "",
|
|
|
+ })
|
|
|
+
|
|
|
+ const heartCheck = {
|
|
|
+ timeout: 360000, // 5分钟发一次心跳,比server端设置的连接时间稍微小一点,在接近断开的情况下以通信的方式去重置连接时间。
|
|
|
+ timeoutObj: null,
|
|
|
+ serverTimeoutObj: null,
|
|
|
+ reset: function () {
|
|
|
+ clearTimeout(this.timeoutObj)
|
|
|
+ clearTimeout(this.serverTimeoutObj)
|
|
|
+ return this
|
|
|
+ },
|
|
|
+ start: function () {
|
|
|
+ this.serverTimeoutObj = setInterval(function () {
|
|
|
+ if (status.websocket.readyState === 1) {
|
|
|
+ console.log('连接状态,发送消息保持连接')
|
|
|
+ status.websocket.send('{"e":"ping","d":""}}') // 连接成功将消息传给服务端
|
|
|
+ heartCheck.reset().start() // 如果获得消息 说明连接正常 重置心跳检测
|
|
|
+ } else {
|
|
|
+ console.log('断开连接, 尝试重连')
|
|
|
+ newWebsocket()
|
|
|
+ }
|
|
|
+ }, this.timeout)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const newWebsocket = ()=> {
|
|
|
+ status.websocket = new WebSocket("ws://api.163jsd.xyz/api/v1/ws/socket");
|
|
|
+ status.websocket.onopen = function() {
|
|
|
+ // webSocket 已连接上,使用 send() 方法发送数据
|
|
|
+ status.websocket.send("发送数据");
|
|
|
+ console.log("数据发送中...");
|
|
|
+ };
|
|
|
+
|
|
|
+ status.websocket.onmessage = function (evt) {
|
|
|
+ // 接收到的数据
|
|
|
+ let data = JSON.parse(evt.data)
|
|
|
+ if (data.e == "sys_log"){
|
|
|
+ status.msg = data.d["msg"];
|
|
|
+ } else if(data.e === "ping"){
|
|
|
+ status.msg = data.e;
|
|
|
+ } else if(data.e === "connected"){
|
|
|
+ status.msg = data.d["ID"];
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ status.websocket.onerror = function () {
|
|
|
+ // 连接报错
|
|
|
+ console.log('连接报错...');
|
|
|
+ }
|
|
|
+
|
|
|
+ status.websocket.onclose = function() {
|
|
|
+ // 关闭 webSocket
|
|
|
+ console.log("连接已关闭...");
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(()=>{
|
|
|
+ heartCheck.reset().start()
|
|
|
+ newWebsocket()
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...toRefs(status)
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|