Vue3中的WebSocket通讯实现

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连接，并添加了基本的消息发送和接收功能。

总结

综上所述，Vue3与WebSocket结合能够很好地满足实时通讯的需求。在实际开发中，还可以根据具体业务需求对WebSocket通讯做更深入的定制和优化。