我正在尝试解决用户体验问题。
我正在使用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
仍在发送时如何显示消息,以便用户可以在服务器接收消息时发送任意数量的消息...
答案 0 :(得分: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)
答案 1 :(得分:0)
您可以将该msg推送到messageFeed,并使用webWorkers来处理低级或脱机模式。一旦webWorker可以成功发送数据,然后附加一些图标(仔细检查)以指示已发送消息。