重生之我在NestJS中使用EventStream

262 阅读1分钟

有一个需求是需要长连接等待后台的返回,我们使用的EventStream,在NestJS中使用很简单,框架基本上已经封装好了

0. 如果没有创建项目的,可以先创建一个项目,创建项目的直接跳转到下一个步骤去

  • 全局安装 nest: npm install @nestjs/cli global
  • 创建项目: nest new nest-demo-app

1. 在NestJS中的代码

app.constroller.ts 中新建一个方法,如下:

import { Observable } from 'rxjs';
import { Controller, Sse } from '@nestjs/common';

@Controller()
class AppController {

  @Sse('test/event-stream') // 这个是访问的链接地址 http://localhost:3000/test/event-stream
  testEventStream() {
    let count = 0;
    return new Observable(observer => {
      // 调用 observer.next() 这个方法向前端推送消息
      setInterval(() => {
        count++;
        observer.next({ data: new Date().toLocalTimeString() });
      }, 3000);

      // 调用 observer.complete() 这个方法,表示结束本次推送
      if (count > 5) {
        observer.complete();
        // 或者调用 observer.unsubscribe() 也可以结束推送
      }
    });
  }
}

2. 在前端调用这个接口

const stream = new EventSource('http://localhost:3000/test/event-stream')
let count = 0
stream.onopen = () => {
  console.log('连接打开');
}
stream.onmessage = e => {
  console.log(e.data); // 打印获取到的数据,也就是 NestJS 中 observer.next() 中发送的数据
  if (count++ >= 5) {
    stream.close(); // 主动关闭连接
  }
}
stream.onerror = e => {
  console.error(e); // 打印错误日志
}
stream.onclose = () => {
  console.log('连接关闭'); // 关闭连接 
}

注意:

  1. 前端在一个长连接完成之后,如果没有主动关闭连接,会一直发这个连接,所以在 message 中需要根据条件判断一下,主动关闭连接