Показать данные во время их отправки на сервер

Question

Я пытаюсь решить проблему с пользовательским интерфейсом.

Я создаю приложение для чата с использованием Ionic, Angular и Firebase.

Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь отправляет сообщение, оно появляется только после того, как оно успешно отправлено на сервер.

Итак, это означает, что если у вас медленное соединение, вы не сможете набрать следующее сообщение, пока первое сообщение не будет успешно отправлено.

Вот мой упрощенный HTML:

//For viewing messages
<div *ngFor="let message of messageFeed; let in = index">
  <div class="messageCont">
    <div class="messageBubble"
      [ngClass]="{'fromMe': message.uid == userData.uid, 'fromYou': message.uid != userData.uid}">
        {{message.text}}
      </div>
    </div>

  </div>

//For sending messages
<div>
<ion-item>
  <ion-textarea id="replyTextarea" [(ngModel)]="messageText" autocorrect="on" maxlength="450" (input)='charCount($event.target, false)' placeholder="Write something nice..."></ion-textarea>
  </ion-item>
<button type="button" id="postReplyBtn" (tap)="sendMessage()" class="glowBtn white" ion-button outline>Send</button>
</div>

Вот мой JS:

sendMessage() {
    let date = new Date().getTime();
    let messageKey = firebase.database().ref().push().key;
    let messageData = {
      text: this.msg,
      uid: this.userData.uid,
      recipient: this.recipient,
      created: date,
      messageId: messageKey,
    };
    this.database.list('threads/' + this.threadId + '/messages').set(messageKey, messageData).then(() => {
      console.log("Message Sent!")
      this.messageText = "";
      this.content.scrollToBottom(100);
      this.messageFeed.push(messageData)
    }, function(error) {
      console.log(error)
    });
  }

Итак, как вы видите, messageText сбрасывается при отправке сообщенияуспешно, и messageFeed получает новый элемент только , когда сообщение успешно отправлено.

Но я хочу, чтобы messageFeed получал элемент сразу после нажатия кнопки «Отправить», а затем этот элемент необходимо удалить, когда он фактически отправлен.Потому что в ngOnInit() у меня есть этот код:

getChatMsg() {
    this.getChat = this.database.database.ref('/threads/' + this.threadId + '/messages/')
      .orderByChild('created')
      .limitToLast(25);
      this.getChat.on('child_added', (snapshot) => {
this.messageFeed.push(snapshot.val());

});
}

, который загружает самое новое сообщение.

Имеет ли это смысл?Как я могу показать сообщение в messageFeed, пока оно еще отправляется, чтобы пользователь мог отправлять столько сообщений, сколько он хочет, пока сервер их получает ...

Answer 1

Операция set() уже завершена асинхронно, но ее обратный вызов then() вызывается только после подтверждения завершения с сервера.Поскольку вы хотите быстрее очистить ввод, вы должны убрать этот код из then() обратного вызова.

Так что-то вроде:

this.database.list('threads/' + this.threadId + '/messages').set(messageKey, messageData).then(() => {
  console.log("Message committed on server")
}, function(error) {
  console.log(error)
});
console.log("Message Sent!")
this.messageText = "";
this.content.scrollToBottom(100);
this.messageFeed.push(messageData)

Answer 2

Вы можете отправить это сообщение в messageFeed и использовать webWorkers для работы в низком или автономном режиме.Как только webWorker сможет успешно отправить данные, добавьте значок (двойная проверка), чтобы указать, что сообщение было отправлено.