聊天角websocket，按顺序显示元素答案

【问题标题】：Chat angular websocket, display element sequencially聊天角websocket，按顺序显示元素
【发布时间】：2021-08-07 08:53:22
【问题描述】：

我正在与 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：使用队列？怎么样？
我对最好的方法有点迷茫，谢谢你的帮助！

【问题讨论】：

标签： angular websocket

【解决方案1】：

concatMap 是这里的解决方案，这里是示例：https://stackblitz.com/edit/angular-ivy-mdk9s7?file=src/app/app.component.ts

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

将 fromEvent 替换为您的服务返回的 observable，它将按预期工作。

如果你懒得打开链接哈哈，这里是代码：

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

【讨论】：