当前位置：首页 > news >正文

前端vue2每三十秒被动接受后端服务器发送过来得数据

news 来源：原创 2025/6/25 13:18:55

要在 Vue 2 中实现每三十秒被动接收后端服务器发送的数据，而不是前端主动发起请求获取数据，可以考虑使用 Server-Sent Events (SSE) 或者 WebSocket。由于你提到的是“被动”接收，并且有固定的时间间隔（30秒），Server-Sent Events (SSE) 更加适合这种单向、定时的数据推送需求。

使用 Server-Sent Events (SSE)

SSE 是一种允许服务器向浏览器推送更新的技术，非常适合于需要从服务器接收实时更新的场景。与 WebSocket 不同，SSE 只支持单向通信（服务器到客户端），但它的实现更为简单，特别适用于像定时数据推送这样的场景。

实现步骤

后端：确保你的后端能够支持 SSE。通常情况下，这意味着你需要在后端设置一个特殊的路由或端点，该端点会保持连接打开并定期发送数据。

示例（Node.js/Express）：

app.get('/events', (req, res) => {res.setHeader('Content-Type', 'text/event-stream');res.setHeader('Cache-Control', 'no-cache');res.setHeader('Connection', 'keep-alive');const sendEvent = () => {res.write(`data: ${JSON.stringify({content: 'Hello at ' + new Date().toISOString()})}\n\n`);};// 每30秒发送一次数据const intervalId = setInterval(sendEvent, 30000);// 当客户端断开连接时清除定时器req.on('close', () => {clearInterval(intervalId);res.end();});
});

前端：在 Vue 组件中使用 SSE 接收数据。

前端代码示例

<template><div><ul><li v-for="(message, index) in messages" :key="index">{{ message }}</li></ul></div>
</template><script>
export default {data() {return {eventSource: null,messages: []};},mounted() {this.connectToSSE();},methods: {connectToSSE() {if ('EventSource' in window) {this.eventSource = new EventSource('/events'); // 确保这里的URL指向你的SSE端点this.eventSource.onmessage = (event) => {const message = JSON.parse(event.data).content;this.messages.push(message); // 添加新消息到列表};this.eventSource.onerror = (error) => {console.error('SSE error occurred:', error);if (this.eventSource) {this.eventSource.close(); // 遇到错误时关闭连接}};} else {console.warn('Your browser does not support Server-Sent Events.');}}},beforeDestroy() {if (this.eventSource) {this.eventSource.close(); // 确保组件销毁前关闭SSE连接}}
};
</script>