SSE

概述

前端向后端请求数据常规来说都是使用 http 连接，除非是实时性非常高的项目，例如IM系统等需要使用到WebSocket。

但是项目中有时候存在尴尬的场景：

1. 库存信息
2. 已读未读消息
3. 实时同步数据
4. ......

这种实时性比较高，但是数据量比较小的内容，使用 http 轮询会让系统增加非常多的资源损耗，而使用 WebSocket 则显得非常没必要。

所以 SSE 应运而生。(事实上SSE技术产生的时间非常早)

原理

• 基于HTTP：SSE是基于HTTP的，这意味着它可以利用现有的HTTP基础设施，如缓存、代理等。
• 单向通信：SSE是一种单向通信协议，意味着数据只能从服务器流向客户端。这与WebSocket不同，后者支持双向通信。

其实说白了还是 http 连接，不同的是这是一个长连接，并且返回数据的格式不太一样，仅此而已。

SSE采用事件流格式数据，每条消息由一行或多行组成，每一行都包含字段名和值，用冒号分隔。

并且 SSE 内置的自动重连机制。如果由于任何原因连接断开，浏览器会自动尝试重新建立连接。

开发

服务端

服务端主要是需要修改请求头，其他的就是修改一下推送信息机制。

// app/controller/sse.js
const Controller = require('egg').Controller;

class SseController extends Controller {
  async stream() {
    const { ctx } = this;
    
    // 设置响应头
    ctx.set('Content-Type', 'text/event-stream');
    ctx.set('Cache-Control', 'no-cache');
    ctx.set('Connection', 'keep-alive');

    // 发送初始连接确认消息
    ctx.body = `data: Connected\n\n`;

    // 可以在这里设置定时器或者其他机制来定期发送更新
    const timer = setInterval(() => {
      ctx.body += `data: ${new Date().toLocaleTimeString()}\n\n`;
    }, 2000);

    // 清理资源
    ctx.res.on('close', () => {
      clearInterval(timer);
    });
  }
}

module.exports = SseController;

客户端

通过 EventSource 类访问接口，实现一下数据回传以后的逻辑。

if ('EventSource' in window) {
  var eventSource = new EventSource('/api/getMessage');

  // 响应数据连接
  eventSource.onmessage = function(event) {
    console.log('New message:', event.data);
  };

  // 连接异常
  eventSource.onerror = function(event) {
    console.error('Error occurred:', event);
    eventSource.close();
  };
} else {
  console.log('Your browser does not support SSE.');
}

结论

其实在项目中使用 SSE 要比 WebSocket 快很多，这里说的是开发效率。

由于 SSE 是单向通信，一般来说要比 WebSocket 占用的资源更少。目前 SSE 我使用过的场景只有一个，就是已读未读消息的更新。

当然，有人说使用 SSE 只是将客户端的轮询换到了服务端，但其实并非如此。一个最根本的区别在于，轮询即使空数据客户端也要请求，而SSE则是有数据的时候向客户端推送(例子不是)。