mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-18 10:28:36 +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 { config } from '../config';
import { CommandMessage } from '../message-types/command-message'; import { CommandMessage } from '../message-types/command-message';
import { MessageQueueMessage } from '../message-types/message-queue-message'; import { MessageQueueMessage } from '../message-types/message-queue-message';
import { Subject, Observer } from 'rxjs'; import { Subject, Observer, BehaviorSubject } from 'rxjs';
@Component({ @Component({
selector: 'app-messages', selector: 'app-messages',
@ -39,6 +39,9 @@ export class MessagesComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.newMessage.subscribe(this.handleMessage.bind(this)); this.newMessage.subscribe(this.handleMessage.bind(this));
this.messageQueueAttender.messageInQueue.subscribe(
(value) => this.messageInQueue = value
);
this.websocketService.connect(); this.websocketService.connect();
this.websocketService.observeKey<MessagesMessage>('message').subscribe( this.websocketService.observeKey<MessagesMessage>('message').subscribe(
@ -77,6 +80,8 @@ export class MessagesComponent implements OnInit {
class MessageQueueAttender { class MessageQueueAttender {
public messageInQueue = new BehaviorSubject<boolean>(false);
private readonly charPerSecond: number; private readonly charPerSecond: number;
private lastMessageLength = 0; private lastMessageLength = 0;
private queue: MessagesMessage[] = []; private queue: MessagesMessage[] = [];
@ -99,11 +104,13 @@ class MessageQueueAttender {
} }
if (this.queue.length === 0) { if (this.queue.length === 0) {
this.lastMessageLength = 0; this.lastMessageLength = 0;
this.messageInQueue.next(false);
} }
} }
private attendQueue() { private attendQueue() {
if (this.queue.length > 0) { if (this.queue.length > 0) {
this.messageInQueue.next(true);
const timeoutSeconds = this.lastMessageLength / this.charPerSecond; const timeoutSeconds = this.lastMessageLength / this.charPerSecond;
setTimeout( setTimeout(
() => { () => {