Vue3中的WebSocket通讯实现

ops/2024/10/18 14:18:14/

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

在现代Web应用中，实时数据交互和推送是一个非常关键的功能。WebSocket作为一种在单个TCP连接上进行全双工通信的协议，使得服务器与客户端之间的数据传输更加高效、实时。本文将详细介绍如何在Vue3框架下利用WebSocket实现双向实时通讯。

WebSocket简介

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

Vue3中实现WebSocket通讯

<template><div><button @click="connect">Connect</button><button @click="sendMessage" :disabled="!connected">Send Message</button><button @click="disconnect" :disabled="!connected">Disconnect</button></div>
</template><script setup>
import { ref,onMounted,onUnmounted } from 'vue';const ws = ref(null);
const connected = ref(false);onMounted(() => {connect();
});
onUnmounted(() => {disconnect();
})
const connect = () => {ws.value = new WebSocket('ws://192.168.16.90:8080/websocket/test');ws.value.onopen = () => {connected.value = true;};ws.value.onclose = () => {connected.value = false;};ws.value.onmessage = (event) => {// 处理收到的消息数据console.log('收到消息:', event.data);}ws.value.onerror = (error) => {console.error('Error:', error);};
};const sendMessage = () => {if (ws.value && ws.value.readyState === WebSocket.OPEN) {ws.value.send('123');}
};const disconnect = () => {if (ws.value) {ws.value.close();ws.value = null;}
};
</script>

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