Chat angular websocket，顺序显示元素

Question

我正在与 Angular 和 socket.io 聊天。服务器可以在一段时间内发出许多事件，前端必须一个接一个地处理每个事件。

// My socket service
message: Subject<any> = new Subject<any>();
this.socket.on('messageToServer', (data) => {
  this.message.next(data);
});

// My component
this.socketService.message.subscribe(
  async (msg) => await this.display(msg)
);

async display(msg): Promise<void> {
  try {
    console.log('start speaking');
    await this.botSpeak(msg.message);
    this.displayedMessages.push(msg);
    console.log('stop speaking');
  } catch (e) {

  }
}

这是日志：

start speaking
start speaking
stop speaking
stop speaking

这是正常的，因为套接字发出了两次，但我需要在处理 2 之前等待处理 1 才能获得正确的日志：

start speaking
stop speaking
start speaking
stop speaking

选项 1：使用是否显示布尔值的数组。
选项 2：使用队列？怎么样？
我对最好的方法有点迷茫，感谢您的帮助！

Answer 1

concatMap is the solution here, here's the sample: https://stackblitz.com/edit/angular-ivy-mdk9s7?file=src/app/app.component.ts

双击按钮并查看控制台，输出将按顺序发出。

将 fromEvent 替换为您的服务返回的可观察对象，它将按预期工作。

好吧，如果你懒得打开 link 哈哈，这里是代码：

this.socketService.message.pipe(
    concatMap(msg => from(this.display(msg))) // use from operator to convert a promise to an observable
).subscribe({
    next: _ => {}
});

Chat angular websocket，顺序显示元素

Chat angular websocket, display element sequencially

websocket

angular