uniapp使用sse进行消息通知

在 UniApp 中使用 Server-Sent Events (SSE) 实现消息通知是一个常见的需求。SSE 是一种服务器向客户端推送实时消息的技术，适用于需要实时更新的场景（如通知、聊天、数据监控等）。

1. 服务端代码示例（Node.js）

首先，我们需要一个支持 SSE 的服务器。

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/sse') {
    // 设置 SSE 相关的响应头
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*', // 允许跨域
    });

    // 定时向客户端发送消息
    let id = 0;
    setInterval(() => {
      const data = JSON.stringify({ message: `Hello, this is message ${++id}` });
      res.write(`id: ${id}\n`); // 消息 ID（可选）
      res.write(`data: ${data}\n\n`); // 消息内容
    }, 3000); // 每 3 秒发送一次消息
  } else {
    res.writeHead(404);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('SSE server is running on http://localhost:3000');
});

2. UniApp 客户端代码示例

在 UniApp 中，我们可以使用 uni.request 或 EventSource 来接收 SSE 消息。

2.1 创建 SSE 连接

在页面的 onLoad 生命周期中创建 SSE 连接：

export default {
  data() {
    return {
      messages: [], // 存储接收到的消息
      eventSource: null, // SSE 连接对象
    };
  },
  onLoad() {
    this.connectSSE();
  },
  onUnload() {
    this.closeSSE();
  },
  methods: {
    // 创建 SSE 连接
    connectSSE() {
      // 初始化 EventSource
      this.eventSource = new EventSource('http://localhost:3000/sse');

      // 监听消息事件
      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data); // 解析消息内容
        this.messages.push(data.message); // 将消息存储到数组中
      };

      // 监听错误事件
      this.eventSource.onerror = (error) => {
        console.error('SSE error:', error);
        this.closeSSE(); // 关闭连接
      };
    },

    // 关闭 SSE 连接
    closeSSE() {
      if (this.eventSource) {
        this.eventSource.close(); // 关闭连接
        this.eventSource = null;
      }
    },
  },
};