typescript NestJS中的SSE和EventEmitter-如何使用可观察对象

ubof19bj  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(511)

我想忽略一个发生在后端的事件,并在前端显示它。我这里不需要套接字,因为这是一个单向通信。所以我想尝试使用nestjs中的SSE(服务器发送事件)将忽略的事件推到前端。现在,根据docs,设置非常简单:

@Sse('sse')
sse(): Observable<MessageEvent> {
  return interval(1000).pipe(map((_) => ({ data: { hello: 'world' } })));
}

这一切都很好,而且很有效。但是,现在应该只推动后端发生的“事件”,而不是使用interval等。
以下是我的当前设置:

@Injectable()
export class StocksService {
  public stocks: Stock[] = [
    {
      id: 1,
      symbol: 'Stock #1',
      bid: 500,
      ask: 500,
    }
  ];

  constructor(private eventEmitter: EventEmitter2) {}

  create(createStockDto: CreateStockDto) {
    const stock = {
      id: this.stocks.length + 1,
      ...createStockDto,
    };
    this.stocks.push(stock);

    const stockCreatedEvent = new StockCreatedEvent();
    stockCreatedEvent.symbol = stock.symbol;
    stockCreatedEvent.ask = stock.ask;
    stockCreatedEvent.bid = stock.bid;

    this.eventEmitter.emit('stock.created', stockCreatedEvent);

    return stock;
  }
}

现在this.eventEmitter.emit('stock.created', stockCreatedEvent);发出事件,我可以使用一个小侦听器控制台记录它,并很好地查看它:

@Injectable()
export class StockCreatedListener {
  @OnEvent('stock.created')
  handleStockCreatedEvent(event: StockCreatedEvent) {
    console.log(event);
  }
}

所以现在,每当我用Postman点击服务并创建一个Stock条目时,它都会控制台记录该事件,这太棒了!现在我希望使用SSE将这些数据推送到前端。
但是,在深入研究了RxJS文档之后,我不确定我是否理解应该如何将这两个文档连接起来。我知道我需要创建一个Observable,我尝试了一下:

@Sse('sse')
  @OnEvent('stock.created')
  sse(event: StockCreatedEvent): Observable<MessageEvent> {
    const obj = of(event);
    return obj.pipe(map((_) => ({ data: event})));
  }

然而,即使我转到url http://localhost:3000/sse,它也不会做任何事情,甚至不会控制台日志记录或返回任何流。
请帮助一个兄弟。Here也是回购协议,如果你需要更具体地看它一点

2uluyalo

2uluyalo1#

我刚刚在第6行的React App.tsx中更改了http://localhost:3000/sse
对我有用。

客户端

起始日期

const eventSource = new EventSource('http://0.0.0.0:3000/sse');

结束日期

const eventSource = new EventSource('http://localhost:3000/sse');

服务器端

它显示同样消息,我只是在服务器端更改了当前时间在app.controller.ts中,
起始日期

sse(event: StockCreatedEvent): Observable<MessageEvent> {
    return interval(1000).pipe(map((_) => ({ data: { hello: 'world' } })));
  }

结束日期

sse(event: StockCreatedEvent): Observable<MessageEvent> {
    return interval(1000).pipe(map((_) => ({ data: { hello: 'world, time = ' +  new Date().toUTCString() } })));
  }

测试结果
server side-后端(嵌套)

client side-客户端(React)

相关问题