Vue3 + WebSocket

Vue3与WebSocket结合能够很好地满足实时通讯的需求。通过合理设计和管理WebSocket连接的生命周期，以及实现必要的重连逻辑和心跳检测机制，可以构建出响应迅速且稳定的实时应用。

WebSocket

WebSocket允许服务端主动向客户端发送数据，无需客户端发起请求，从而实现了低延迟、高效率的数据交换。它通过HTTP升级协议握手来建立持久性的连接，并使用帧（frame）的形式传输数据。

Vue3中实现WebSocket通讯

创建WebSocket实例

首先，在Vue3组件中创建一个WebSocket实例，并监听其生命周期事件：

<template><!-- 省略其他UI元素 --><button @click="sendMessage">发送消息</button><ul><li v-for="(message, index) in messages" :key="index">{{ message }}</li></ul>
</template><script setup>
import { ref } from 'vue';// 创建WebSocket实例，替换为你的实际服务器地址
const ws = new WebSocket('ws://your-websocket-server-url/webSocket');// 初始化消息数组
const messages = ref([]);// 监听WebSocket打开事件
ws.addEventListener('open', () => {console.log('WebSocket已连接');
});// 监听接收到消息的事件
ws.addEventListener('message', (event) => {const data = JSON.parse(event.data);messages.value.push(data.message);
});// 发送消息至服务器的方法
function sendMessage() {const message = 'Hello, Server!';ws.send(JSON.stringify({ message }));
}// 监听WebSocket关闭事件
ws.addEventListener('close', () => {console.log('WebSocket连接已关闭');
});// 监听错误事件
ws.addEventListener('error', (error) => {console.error('WebSocket发生错误:', error);
});
</script>

上述代码展示了如何在Vue3组件内初始化WebSocket连接，并添加了基本的消息发送和接收功能。

管理WebSocket连接的生命周期

在真实项目中，你需要考虑在组件挂载时建立连接，在卸载时关闭连接，以确保资源的有效管理和回收：

<script setup>
import { onMounted, onUnmounted } from 'vue';let ws;onMounted(() => {ws = new WebSocket('ws://your-websocket-server-url/webSocket');// ... 添加其他生命周期事件监听器
});onUnmounted(() => {if (ws.readyState !== WebSocket.CLOSED) {ws.close();}
});
</script>

webSocket.readyState

readyState属性返回实例对象的当前状态，共有四种。

• CONNECTING：值为0，表示正在连接。
• OPEN：值为1，表示连接成功，可以通信了。
• CLOSING：值为2，表示连接正在关闭。
• CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

处理重连逻辑和心跳检测

为了保证WebSocket连接的稳定性和可靠性，通常还需要实现重连逻辑以及心跳检测机制。当连接断开时，可以尝试重新连接；同时，定期发送心跳包维持长连接，防止因网络波动导致的意外断开。

<script setup>
import { ref, watchEffect } from 'vue';// ... 其他变量定义和初始化// 用于控制重连的计数器
const reconnectAttempts = ref(0);// 在断开连接后尝试重新连接
function handleReconnect() {setTimeout(() => {reconnectAttempts.value++;if (reconnectAttempts.value <= MAX_RECONNECT_ATTEMPTS) {connectWebSocket();} else {console.log('超过最大重试次数，停止重连');}}, RECONNECT_DELAY);
}// 心跳检测函数
function sendHeartbeat() {// 定期发送心跳包给服务器ws.send(JSON.stringify({ type: 'heartbeat' }));
}// 在连接成功后启动心跳检测
function startHeartbeat() {setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
}// 连接WebSocket的方法
function connectWebSocket() {ws = new WebSocket('ws://your-websocket-server-url/webSocket');// 添加事件监听器...// ...ws.addEventListener('close', handleReconnect);ws.addEventListener('open', startHeartbeat);
}onMounted(connectWebSocket);
// ... 其他生命周期处理
</script>

实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

ws.onmessage = function(event) {var data = event.data;// 处理数据
};ws.addEventListener("message", function(event) {var data = event.data;// 处理数据
});

注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。

ws.onmessage = function(event){if(typeof event.data === String) {console.log("Received data string");}if(event.data instanceof ArrayBuffer){var buffer = event.data;console.log("Received arraybuffer");}
}

除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。

// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {console.log(e.data.size);
};// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {console.log(e.data.byteLength);
};

webSocket.send()

实例对象的send()方法用于向服务器发送数据。

发送文本的例子。

ws.send('your message');

发送 Blob 对象的例子。

var file = document.querySelector('input[type="file"]').files[0];
ws.send(file);

发送 ArrayBuffer 对象的例子。

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {binary[i] = img.data[i];
}
ws.send(binary.buffer);

webSocket.bufferedAmount

实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

var data = new ArrayBuffer(10000000);
socket.send(data);if (socket.bufferedAmount === 0) {// 发送完毕
} else {// 发送还没结束
}

总结

综上所述，Vue3与WebSocket结合能够很好地满足实时通讯的需求。通过合理设计和管理WebSocket连接的生命周期，以及实现必要的重连逻辑和心跳检测机制，可以构建出响应迅速且稳定的实时应用。在实际开发中，还可以根据具体业务需求对WebSocket通讯做更深入的定制和优化。