Vue 如何使用WebSocket与服务器建立链接 持续保持通信

WebSocket

浏览器通过JavaScript向服务器发出建立WebSocket链接的请求，链接建立后，客户端和服务器端就可以通过TCP链接直接交互数据。WebSocket链接后可以通过send()方法来向服务器发送数据，并通过onnessage事件来接受服务器返回的数据。

创建WebSocket对象

let ws = new WebSocket(server);

WebSocket参考

WebSocket - Web API 接口参考 | MDN

代码

<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>