问题描述
我正在与 Angular 和 socket.io 进行聊天.服务器可以在短时间内发出许多事件,前端必须一个接一个地处理每个事件.
I'm working on a chat with Angular and socket.io.Server can emit many events in a few time, front has to treat every event one after the other.
// 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 才能获得正确的日志:
it's normal because the socket was emitted twice, but i need to wait treatment one before treatment 2 to get this correct log :
start speaking
stop speaking
start speaking
stop speaking
选项 1:使用显示或不显示布尔值的数组.
选项 2:使用队列?怎么样?
我对做到这一点的最佳方法有点迷茫,感谢您的帮助!
Option 1 : use an array with a boolean displayed or not.
Option 2 : use a queue ? how ?
I'm a bit lost about the best way to do that, thanks for your help !
推荐答案
concatMap 是这里的解决方案,这里是示例:https://stackblitz.com/edit/angular-ivy-mdk9s7?file=src/app/app.component.ts
concatMap is the solution here, here's the sample: https://stackblitz.com/edit/angular-ivy-mdk9s7?file=src/app/app.component.ts
双击按钮并查看控制台,输出将按顺序发出.
double click on the button and look at the console, output will emit in order.
将 fromEvent 替换为您的服务返回的 observable,它将按预期工作.
replace that fromEvent with the observable returned by your service and it'll work as expected.
好吧,如果你懒得打开链接哈哈,这里是代码:
and well if you're feeling too lazy to open the link lol, here's the code:
this.socketService.message.pipe(
concatMap(msg => from(this.display(msg))) // use from operator to convert a promise to an observable
).subscribe({
next: _ => {}
});
这篇关于聊天 angular websocket,按顺序显示元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!