如何使用Spring Boot Server Sent Events更新Angular仪表板？

可行性结论 #

完全可以通过SSE实现该需求。SSE是基于HTTP协议的服务端单向推送技术，相比客户端定时轮询资源开销更低，相比全双工的WebSocket更轻量，完美适配这种仅需要服务端向客户端推送数据更新的单向同步场景。

具体开发步骤 #

后端开发部分 #

• 实现数据库变更感知
  两种可选方案，根据实际场景选择：
  1. 若新增数据的独立API为己方可控，直接在API的数据库插入逻辑执行完成后，直接触发数据更新事件，无需额外引入中间件，实现成本最低
  2. 若新增数据API不可控，可通过监听数据库binlog实现变更感知，MySQL可使用Canal组件，PostgreSQL可使用wal2json插件
• 开发SSE服务端点
  接口响应头需固定设置三个核心参数：
  Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
  同时维护当前连接的客户端列表，出现数据更新时向所有有效连接推送消息
• 封装状态统计逻辑
  每次接收到数据变更事件后，统计各状态对应的记录数量，将统计结果序列化为JSON字符串，按照SSE标准格式（data: {JSON数据}\n\n）推送至前端。数据量大的场景建议提前在Redis中缓存各状态计数，变更时直接更新缓存取值，避免每次统计查询全库降低性能

前端开发部分 #

• 初始化SSE连接
  原生JS直接调用内置API创建连接：

  const eventSource = new EventSource('/your-api-path/dashboard/stat-stream')
  

• 实现图表更新逻辑
  监听SSE的message事件，拿到服务端推送的最新统计数据后，直接更新柱状图实例的数据源，调用图表刷新方法即可，以ECharts为例：

  eventSource.onmessage = function(event) {
    const statData = JSON.parse(event.data)
    // 替换图表数据源并刷新
    chartInstance.setOption({
      xAxis: { data: statData.statusList },
      series: [{ data: statData.countList }]
    })
  }
  

注意事项 #

• 浏览器原生EventSource默认会在连接断开后自动重连，无需额外开发基础重连逻辑，特殊场景可自定义重连间隔参数
• 同一域名下HTTP 1.1协议的SSE默认最大并发连接数为6，若需要更多连接可升级为HTTP/2协议解决限制
• 服务端需要监听客户端断开连接事件，及时清理失效的客户端连接，避免内存泄漏

内容的提问来源于stack exchange，提问作者Dasun