前后端合作实现SSE服务器主动推送

SSE是基于WebSocket协议的一种技术，它和websocket一样也是HTML5出现的一种新技术，它允许服务器向客户端发送事件和数据，可实现单向通讯。与WebSocket相比,SSE的使用更为简单,对服务器端的改动也较小,因为它主要利用现有的HTTP/HTTPS协议进行数据传输。SSE的出现使得客户端监听服务端数据状态的变化多了一种比轮询更高效，比websocket更方便的一种方式。

它的实现方式很简单，下面我用nodejs+js来演示一下：

nodejs服务端

const http = require('http');
const server = http.createServer((req, res) => {
  if (req.url === '/stream') {
    // 设置Content-Type头部和Cache-Control头部
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    });
 
    // 定时发送事件
    setInterval(() => {
      const date = new Date();
      const data = `data: The current date and time are: ${date.toString()}\n\n`;
      res.write(data);
    }, 1000);
 
    // 处理客户端关闭连接
    req.on('close', () => {
      console.log('Connection closed');
    });
  } else {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello, World!');
  }
});
 
server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端

function getData() {
        const eventSource = new EventSource(`stream?t=${Date.now()}`, {
            headers: {
                // 'Authorization': 'Bearer your_token'
                // 请求头其他信息
            },
            // withCredentials: true // 是否发送凭据（比如Cookie）
        });


        eventSource.onopen = (event) => {
            // 连接建立时的操作
            // console.log(event.data)
        };

        eventSource.onerror = (error) => {
            // 错误处理
            console.log(error)

        };

        eventSource.onmessage = (event) => {
            // 处理接收到的消息 event.data
            try {
                let   list = JSON.parse(event.data)
            } catch (err) {

            }

        };
    }