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

Server-Sent Events

news 来源：原创 2025/6/18 4:17:15

Server-Sent Events (SSE) 是一种允许服务器向客户端推送实时更新的技术。

1. 创建 SSE 连接
export default {
  data() {
    return {
      eventSource: null,
    };
  },
  onLoad() {
    this.initSSE();
  },
  methods: {
    initSSE() {
      // 创建 SSE 连接
      this.eventSource = new EventSource('https://api/xxxxx');

      // 监听 message 事件
      this.eventSource.onmessage = (event) => {
        console.log('SSE Message:', event.data);
        // 在这里处理接收到的数据，比如更新页面状态
      };

      // 监听 open 事件（可选）
      this.eventSource.onopen = (event) => {
        console.log('SSE Connection Opened:', event);
      };

      // 监听 error 事件（可选）
      this.eventSource.onerror = (event) => {
        console.error('SSE Error:', event);
        if (this.eventSource.readyState === EventSource.CLOSED) {
          console.log('SSE Connection Closed.');
          // 在这里处理连接关闭的情况，比如尝试重新连接
        }
      };
    },
    beforeDestroy() {
      // 在页面销毁前关闭 SSE 连接
      if (this.eventSource) {
        this.eventSource.close();
      }
    },
  },
};

2. 配置服务器
确保你的服务器端正确配置了 SSE。以下是一个简单的 Node.js 示例

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/sse-endpoint' && req.method === 'GET') {
    // 设置响应头
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive',
    });

    // 发送数据
    const sendData = () => {
      res.write(`data: ${JSON.stringify({ message: 'Hello, SSE!' })}\n\n`);
      // 每5秒发送一次数据
      setTimeout(sendData, 5000);
    };

    sendData();

    // 监听客户端断开连接
    req.on('close', () => {
      res.end();
    });
  } else {
    res.writeHead(404);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is listening on port 3000');
});