Skip to content

Nest 实现消息推送

什么是 SSE

  • 简单来说就是单向版本的 websocket, 服务器返回的就是个流, 客户端不断接收数据,类似 AI 聊天, 服务器不断返回数据

  • 要是断了他自己会自动连接,不用手动连接

使用场景

  • 站内信, 通知
  • 构建日志展示
  • 实时新闻推送
  • 实时数据统计
  • 实时数据图表
  • 实时数据监控

Nest

控制器

ts
import { Observable } from 'rxjs';

  @Sse('stream')
  stream() {
    return new Observable((observer) => {
      observer.next({ data: { msg: 'aaa' } });

      setInterval(() => {
        observer.next({ data: { msg: 'bbb' } });
      }, 2000);

      setInterval(() => {
        observer.next({ data: { msg: 'ccc' } });
      }, 5000);
    });
  }

前端页面

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单向流</title>
  </head>
  <body>
    <script>
      // 单向流
      const eventSource = new EventSource("http://localhost:5000/user/stream");
      //监听
      eventSource.onmessage = ({ data }) => {
        console.log("New message", JSON.parse(data));
      };
    </script>
  </body>
</html>