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

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

使用 Server-Sent Events (SSE)

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

实现步骤

1. 后端：确保你的后端能够支持 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();
     });
   });
   

2. 前端：在 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>

关键点解释

• EventSource: 这是浏览器提供的用于处理 SSE 的接口。它允许你监听来自服务器的消息。
• onmessage: 当接收到消息时触发此事件处理函数。在这个例子中，我们将每个接收到的消息添加到了 messages 数组中，以便显示在页面上。
• onerror: 错误发生时触发。这里我们简单地关闭了连接，但在实际应用中，你可能还需要考虑重连逻辑。
• beforeDestroy: 在组件被销毁之前关闭 SSE 连接是非常重要的，以避免内存泄漏和其他潜在问题。

这种方法使得前端无需主动轮询服务器来获取数据，而是通过 SSE 被动接收后端定时推送的数据，非常适用于需要实时更新但又不需要双向通信的场景。如果你的应用场景对实时性要求更高，或者需要更复杂的交互模式，则可能需要考虑 WebSocket。