WebSocket
浏览器通过JavaScript向服务器发出建立WebSocket链接的请求,链接建立后,客户端和服务器端就可以通过TCP链接直接交互数据。WebSocket链接后可以通过send()
方法来向服务器发送数据,并通过onnessage
事件来接受服务器返回的数据。
创建WebSocket对象
let ws = new WebSocket(server);
WebSocket参考
WebSocket - Web API 接口参考 | MDN
代码
javascript
<template>
<el-row class="app-container">
<el-button type="primary" @click="testSend">主要按钮</el-button>
</el-row>
</template>
<script>
export default {
name: 'Monitoring',
data() {
return {
websocket: null, // WebSocket对象
reconnectInterval: 3000, // 重连间隔时间(毫秒)
restartWebsocket: null , // 重启定时器
heartbeatInterval: null, // 心跳定时器
};
},
created() {
if (typeof WebSocket == "undefined") {
console.log("您的浏览器不支持WebSocket");
} else {
this.setupWebSocket(); // 创建WebSocket连接
}
},
methods: {
testSend() { // 测试
const send = {
"keywords": "xxx",
}
this.sendMessage(JSON.stringify(send));
},
// websocket初始化
setupWebSocket() {
this.websocket = new WebSocket("ws://xxx"); // 创建WebSocket连接
this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
},
closeWebSocket() { // 关闭
if (this.websocket) {
this.websocket.close(); // 关闭WebSocket连接
}
},
// 开启 WebSocket;启动心跳检测
onWebSocketOpen() {
console.log("WebSocket connection is open");
this.startHeartbeat();
},
// 处理从服务器接收的消息
onWebSocketMessage(event) {
if (event.data) {
const message = JSON.parse(event.data);
// 根据业务来处理数据
console.log("Message from server ", message);
}
},
// 关闭 WebSocket;停止心跳检测
onWebSocketClose() {
console.log("WebSocket connection is closed");
this.stopHeartbeat(); // WebSocket连接关闭时,停止心跳检测
this.restartWebsocket = setTimeout(this.setupWebSocket, this.reconnectInterval); // 在一定时间后重连WebSocket
},
// 向服务器发送消息
sendMessage(message) {
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
this.websocket.send(message); // 发送消息到WebSocket服务器
}
},
// 开启心跳检测
startHeartbeat() {
this.heartbeatInterval = setInterval(() => {
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
this.websocket.send(); // 发送心跳消息
}
}, 1000); // 每1秒发送一次心跳
},
// 停止心跳检测
stopHeartbeat() {
if (this.heartbeatInterval) {
clearInterval(this.heartbeatInterval); // 停止心跳检测定时器
}
},
// 停止重启检测
stopRestartWebsocket() {
if (this.restartWebsocket) {
clearInterval(this.restartWebsocket); // 停止心跳检测定时器
}
},
},
beforeDestroy() {
this.stopHeartbeat() // 停止心跳
this.stopRestartWebsocket() // 停止重启
this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接
},
}
</script>
<style scoped>
</style>