【Vue3】使用websocket实现前后端实时更新数据

使用websocket实现前后端实时更新数据

WebSocket是一种在单个TCP连接上进行全双工通讯的协议。它允许服务器主动发送消息到客户端。

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
const socket = ref(null) // WebSocket 实例
const wsUrl = 'ws://your-backend-url/data-updates'; // 确保与后端配置的路径一致。
const data = ref(null); // 用于存储从后端接收的数据

onMounted(() => {
	// 创建 WebSocket 连接
   socket.value = new WebSocket(wsUrl)
   // 监听消息
   socket.value.onmessage = (event) => {
     data.value = JSON.parse(event.data) // 假设后端发送的是JSON字符串
   }
   socket.value.onerror = (error) => {
     console.error('WebSocket Error:', error) 
   }
})

onUnmounted(() => {
	// 组件销毁时关闭连接
   if (socket.value) {
     socket.value.close() 
   } 
})
</script>