Stream.io 聊天 API - 在 Angular 中使用 Observables / RxJS 进行流式聊天

Question

Stream 聊天文档的节点版本 API 使用 async/await 通过 JS 客户端连接到 Stream Chat 服务。 I have read the RxJS docs 关于连接到 Websockets，据我所知，Stream Chat 客户端正在做的事情。我的问题是如何从流聊天事件中生成 Observables？例如，从这样的事件对象：

channel.on('message.deleted', event => {
    console.log('event', event);
    console.log('channel.state', channel.state);
});

感谢您的任何见解。

Answer 1

您需要创建一个Subject并订阅如下

chat.service.ts

private chatEventListener = new Subject<any>();

bindEvents(){
   channel.on('message.deleted', event => {
    const eventObj = {
       event : event,
       state : channel.state
    };
    this.chatEventListener.next(eventObj );
  });
}

subscribeToNotifications(){
  this.chatEventListener.asObservable();
}

在component.ts

this.chatService.subscribeToNotifications().subscribe(event => {
   console.log(event);
})

Answer 2

如果你有一个类似连接的套接字，你可以像这样用一个 Observable 包装它

function channelObs(channel) {
    return new Observable<any>(
        (subscriber: Observer<any>) => {
            channel.on('eventId', 
                event => {
                    subscriber.next(event);
                }
            );
            return () => {// tearDownLogic, i.e. code executed when this Observable is unsubscribed
        }
    );
}

函数channelObs返回的Observable可以用RxJS提供的所有运算符处理

Stream.io 聊天 API - 在 Angular 中使用 Observables / RxJS 进行流式聊天

Stream.io Chat API - Using Stream Chat with Observables / RxJS in Angular

javascript

rxjs

typescript

getstream-io

angular