<template>
|
<div class="app-container home">
|
<!-- <data-view></data-view> -->
|
<data-wrapper></data-wrapper>
|
</div>
|
</template>
|
|
<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",
|
components: {
|
DataView,
|
DataWrapper
|
},
|
data() {
|
return {
|
|
};
|
},
|
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>
|
|
<style scoped lang="scss">
|
.home {
|
blockquote {
|
padding: 10px 20px;
|
margin: 0 0 20px;
|
font-size: 17.5px;
|
border-left: 5px solid #eee;
|
}
|
|
hr {
|
margin-top: 20px;
|
margin-bottom: 20px;
|
border: 0;
|
border-top: 1px solid #eee;
|
}
|
|
.col-item {
|
margin-bottom: 20px;
|
}
|
|
ul {
|
padding: 0;
|
margin: 0;
|
}
|
|
font-family: "open sans",
|
"Helvetica Neue",
|
Helvetica,
|
Arial,
|
sans-serif;
|
font-size: 13px;
|
color: #676a6c;
|
overflow-x: hidden;
|
|
ul {
|
list-style-type: none;
|
}
|
|
h4 {
|
margin-top: 0px;
|
}
|
|
h2 {
|
margin-top: 10px;
|
font-size: 26px;
|
font-weight: 100;
|
}
|
|
p {
|
margin-top: 10px;
|
|
b {
|
font-weight: 700;
|
}
|
}
|
|
.update-log {
|
ol {
|
display: block;
|
list-style-type: decimal;
|
margin-block-start: 1em;
|
margin-block-end: 1em;
|
margin-inline-start: 0;
|
margin-inline-end: 0;
|
padding-inline-start: 40px;
|
}
|
}
|
}
|
</style>
|
