Implement first version of message queueing

src/app/message-types/message-metadata.ts

@@ -0,0 +1,7 @@
+// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
+// All Rights Reserved. See LICENSE file for details.
+
+export class MessageMetadata {
+    originator: string;
+    timestamp: Date;
+}

src/app/message-types/message-queue-message.ts

@@ -0,0 +1,8 @@
+// Copyright (C) 2018 Avatao.com Innovative Learning Kft.
+// All Rights Reserved. See LICENSE file for details.
+
+import { MessagesMessage } from './messages-message';
+
+export class MessageQueueMessage {
+    messages: Array<MessagesMessage>;
+}

src/app/message-types/messages-message.ts

@@ -1,8 +1,8 @@
 // Copyright (C) 2018 Avatao.com Innovative Learning Kft.
 // All Rights Reserved. See LICENSE file for details.
 
-export class MessagesMessage {
-  originator: string;
-  timestamp: Date;
+import { MessageMetadata } from './message-metadata';
+
+export class MessagesMessage extends MessageMetadata {
   message: string;
 }

src/app/messages/messages.component.ts

@@ -9,6 +9,7 @@ import { MessagesMessage } from '../message-types/messages-message';
 import { MessagesControlCommand } from '../message-types/messages-control-command';
 import { config } from '../config';
 import { CommandMessage } from '../message-types/command-message';
+import { MessageQueueMessage } from '../message-types/message-queue-message';
 
 @Component({
   selector: 'app-messages',
@@ -17,6 +18,7 @@ import { CommandMessage } from '../message-types/command-message';
 })
 export class MessagesComponent implements OnInit {
   messages: MessagesMessage[] = [];
+  messageQueueAttender: MessageQueueAttender;
   showNextButton: boolean = config.messages.showNextButton;
 
   command_handlers = {
@@ -27,13 +29,18 @@ export class MessagesComponent implements OnInit {
     private markdownService: MarkdownService,
     private websocketService: WebSocketService,
     private changeDetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    this.messageQueueAttender = new MessageQueueAttender(this.messages);
+  }
 
   ngOnInit() {
     this.websocketService.connect();
     this.websocketService.observeKey<MessagesMessage>('message').subscribe(
       (event) => this.handleMessage(event.data)
     );
+    this.websocketService.observeKey<MessageQueueMessage>('queueMessages').subscribe(
+      (event) => this.handleQueueMessage(event.data)
+    );
     this.websocketService.observeKey<CommandMessage>('messagecontrol').subscribe(
       (event) => this.command_handlers[event.data.command](event.data)
     );
@@ -45,6 +52,10 @@ export class MessagesComponent implements OnInit {
     this.changeDetectorRef.detectChanges();
   }
 
+  handleQueueMessage(data: MessageQueueMessage) {
+    this.messageQueueAttender.queueMessages(data.messages);
+  }
+
   convert(text: string) {
     return this.markdownService.convertToHtml(text);
   }
@@ -57,3 +68,45 @@ export class MessagesComponent implements OnInit {
     this.websocketService.sendJSON({key: '', trigger: 'step_next'});
   }
 }
+
+
+class MessageQueueAttender {
+  private readonly charPerSecond: number;
+  private lastMessageLength = 0;
+  private queue: MessagesMessage[] = [];
+
+  constructor(private destArray: Array<MessagesMessage>, wordPerMinute: number = 150) {
+    const charPerMinute = wordPerMinute * 5;
+    this.charPerSecond = charPerMinute / 60;
+  }
+
+  queueMessages(messages: Array<MessagesMessage>) {
+    this.queue = this.queue.concat(messages);
+    this.attendQueue();
+  }
+
+  private processMessage() {
+    if (this.queue.length > 0) {
+      const lastMessage = this.queue.shift();
+      this.lastMessageLength = lastMessage.message.length;
+      this.destArray.push(lastMessage);
+    }
+    if (this.queue.length === 0) {
+      this.lastMessageLength = 0;
+    }
+  }
+
+  private attendQueue() {
+    if (this.queue.length > 0) {
+      const timeoutSeconds = this.lastMessageLength / this.charPerSecond;
+      setTimeout(
+        () => {
+          this.processMessage();
+          this.attendQueue();
+          console.log(timeoutSeconds);
+        },
+        timeoutSeconds * 1000
+      );
+    }
+  }
+}