vue3 SSE实现消息实时推送

要在 Vue 3 中实现基于服务器发送事件（SSE，Server-Sent Events）的消息实时推送，你可以按照以下步骤进行：

1. 配置后端服务

首先，需要一个支持 SSE 的后端服务器。这里假

// server.js
const express = require('express');
const app = express();
const port = 3000;

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 = (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // 模拟每隔2秒发送一个事件
  const intervalId = setInterval(() => {
    sendEvent({ message: 'Hello from server', timestamp: new Date() });
  }, 2000);

  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
});

app.listen(port, () => {
  console.log(`SSE server listening at http://localhost:${port}`);
});

设你使用的是 Node.js 和 Express。

2. 前端配置

在 Vue 3 项目中，你可以通过 Vue Composition API 来处理 SSE。

创建一个组件来处理 SSE

<template>
  <div>
    <h1>实时消息推送</h1>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const messages = ref([]);
    let eventSource = null;

    const initSSE = () => {
      eventSource = new EventSource('http://localhost:3000/events');
      
      eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        messages.value.push(`${data.timestamp}: ${data.message}`);
      };

      eventSource.onerror = (error) => {
        console.error('SSE error:', error);
        eventSource.close();
      };
    };

    onMounted(() => {
      initSSE();
    });

    onUnmounted(() => {
      if (eventSource) {
        eventSource.close();
      }
    });

    return {
      messages
    };
  }
};
</script>

<style scoped>
h1 {
  color: #333;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  background: #eee;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}
</style>

3. 运行项目

• 启动后端服务：确保你的 Node.js 服务器在 localhost:3000 运行。
• 启动 Vue 项目：如果你是通过 Vue CLI 创建的项目，运行 npm run serve 即可。

总结

通过以上步骤，你可以在 Vue 3 项目中实现 SSE 实时消息推送。SSE 是一种简单而有效的方式来处理从服务器到客户端的单向实时消息传递。相对于 WebSocket，SSE 更加轻量，适合用于事件流或通知等场景。