mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:21:31 +00:00
Code Issues Releases Wiki Activity

Implement chat like "xy is writing..." bubble when messages are queued

Browse Source
This commit is contained in:
Kristóf Tóth 2018-06-25 17:16:56 +02:00
parent ee448a32c9
commit 9908965a07
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/messages/messages.component.ts
View File

@ -10,7 +10,7 @@ import { MessagesControlCommand } from '../message-types/messages-control-comman
import { config } from '../config';
import { CommandMessage } from '../message-types/command-message';
import { MessageQueueMessage } from '../message-types/message-queue-message';
import { Subject, Observer } from 'rxjs';
import { Subject, Observer, BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-messages',
@ -39,6 +39,9 @@ export class MessagesComponent implements OnInit {
ngOnInit() {
this.newMessage.subscribe(this.handleMessage.bind(this));
this.messageQueueAttender.messageInQueue.subscribe(
(value) => this.messageInQueue = value
);
this.websocketService.connect();
this.websocketService.observeKey<MessagesMessage>('message').subscribe(
@ -77,6 +80,8 @@ export class MessagesComponent implements OnInit {
class MessageQueueAttender {
public messageInQueue = new BehaviorSubject<boolean>(false);
private readonly charPerSecond: number;
private lastMessageLength = 0;
private queue: MessagesMessage[] = [];
@ -99,11 +104,13 @@ class MessageQueueAttender {
}
if (this.queue.length === 0) {
this.lastMessageLength = 0;
this.messageInQueue.next(false);
}
}
private attendQueue() {
if (this.queue.length > 0) {
this.messageInQueue.next(true);
const timeoutSeconds = this.lastMessageLength / this.charPerSecond;
setTimeout(
() => {