关键词：
【中文标题】Firebase 网络应用聊天重复聊天输入【英文标题】：Firebase web app Chat duplicates chat input 【发布时间】：2014-08-26 06:36:41 【问题描述】：您好，我是 firebase 的新手，正在尝试开发一个聊天应用程序，对于聊天消息的处理，一切看起来都不错，只是它会在用户切换到 pm 另一个用户时立即复制发件人面板上的数据，并且在他/她回到前一个用户之后，它也复制了那个人的聊天..虽然它没有存储在 Firebase 数据库中，这也很奇怪.. 重复从 1 开始，然后如果用户增加，它会增加再次切换到其他用户
这是聊天应用程序的整个 firebase 代码，这是状态和聊天教程的组合
// Reference for tbl message
var messagesRef = new Firebase('https://url-for-tablemessage');
// Reference for tbl userprofile
var userListRef = new Firebase("https://url-for-userprofile");
var myUser = userListRef.child(idf);
// Get a reference to my own presence status.
var connectedRef = new Firebase("https://url-for-userprofile//.info/connected");
function getmsg()
// Loads Previous Message with the selected user/s.
messageList.html("");
messagesRef.limit(10).on('child_added', function (snapshot)
//GET DATA
var data = snapshot.val(), username = data.name, message = data.text,
sendr = data.sender, recievr = data.reciever, ui = $('#chat-avatar').attr("data-ui"),
style_c = "";
if (username != nameField) style_c = "message chat";
else style_c = "message user";
var messageElement = $('<div class="'+style_c+'"><div class="message-info">'+
'<img src="temp/user/'+username+'.jpg">' +
'<div class="message-timestamp">' +
' <time datetime="" class="timeago uk-text-small">09:22 am</time>' +
'</div></div>' +
' <div class="message-data">' +
' <div class="bubble"></div></div></div>');
if (((idf == sendr) && (ui == recievr) )||((idf == recievr) && (ui == sendr) ))
messageElement.find('.bubble').html(message).emoji();
//ADD MESSAGE
messageList.append(messageElement);
//SCROLL TO BOTTOM OF MESSAGE LIST
messageList[0].scrollTop = messageList[0].scrollHeight;
);
// A helper function to let us set our own state.
function setUserStatus(status)
// Set our status in the list of online users.
currentStatus = status;
myUser.set( id:idf, names: name, firstname:fname, lastname:lname, status: status );
function getMessageId(snapshot)
return snapshot.name().replace(/[^a-z0-9\-\_]/gi,'');
// Update our GUI to show someone"s online status.
userListRef.on("child_added", function(snapshot)
var user = snapshot.val();
if (user.names != name)
$("<a />")
.attr("id": getMessageId(snapshot),"data-username":user.names,"data-fname":user.firstname,"data-lname":user.lastname)
.html(user.names + "<br />")
.appendTo("#presenceDiv")
.click(function()
var dt = $(this).attr("data-username"),df=$(this).attr("data-fname"),dl=$(this).attr("data-lname"),
src="temp/user/"+dt+".jpg";
$('#chat-avatar').show();
$('#chat-avatar').attr('src':src,"data-os":user.status,"data-ui":user.id)
$('#chat-name').html(df + " " + dl);
console.log(dt);
messageList.html("");
getmsg();
);
$("<li />")
.attr("id": getMessageId(snapshot),"data-username":user.names,"class":"offcanvas-chat-avatar","data-fname":user.firstname,"data-lname":user.lastname)
.html("<small id='ofstat' data-os="+user.status+" data-ui="+user.id+" ></small><img width='40' height='40' src='temp/user/"+user.names+".jpg'>"+ user.names )
.appendTo("#clist")
.click(function()
var dt = $(this).attr("data-username"),df=$(this).attr("data-fname"),dl=$(this).attr("data-lname"),
src="temp/user/"+dt+".jpg";
$('#chat-avatar').show();
$('#chat-avatar').attr('src':src,"data-os":user.status,"data-ui":user.id);
$('#chat-name').html(df + " " + dl);
console.log(dt);
messageList.html("");
getmsg();
);
);
// LISTEN FOR KEYPRESS EVENT
messageField.keypress(function (e)
if (e.keyCode == 13)
//FIELD VALUES
//messageList.html("");
var username = nameField;
var message = messageField.val();
var ui = $('#chat-avatar').attr("data-ui");
if(message != "")
//SAVE DATA TO FIREBASE AND EMPTY FIELD
messagesRef.push(name:username, text:message, sender:idf, reciever:ui);
else
alert("Text Field Empty");
//getmsg();
messageField.val('');
e.preventDefault();
// return false;
);
我真的需要这个才能继续工作.. 被困在这里将近 3 周了，因此我不确定我所做的是否真的正确，但我可以说的是我认为错误在于getmsg() 函数虽然不确定...请帮助我:(
【问题讨论】：
您好！我在这里没有看到很多尽职调查。您能否尝试隔离问题并清理您的示例？例如：userListRef 和 messagesRef 指向同一个 URL；大部分代码看起来都是多余的；将其减少到有问题的算法可能会解决问题。你是调试代码的最佳人选；生成minimum, complete, and verifiable example，您将获得最准确、最有见地的答案。 嗨 @Kato 我将 userListRef 和 messagesRef 的 url 更改为 url 的原因是因为它背后的真实 url 包含对我的 firebase 帐户的实际访问权限，这就是我使用“url”的原因，尽管我必须同意您的观点，仅含糊地使用 url 是错误的，我只需要更新它并清理 cmets 删除可能涉及此评论后我当前问题的不必要代码.. 【参考方案1】：当消息来自当前经过身份验证的用户时，您是否尝试以不同的方式格式化消息？这就是调用 getMsg() 的原因吗？
我将为您提供另一种思考方式，因为这是我设法做到的，而且我没有这个错误。我认为你的错误来自这样一个事实，即无论你是否调用 getMsg()，都可能调用 .on('child_added')。
我的解决方案涉及以下内容
messagesRef.limit(msgLimit).on('child_added', function (snapshot)
var message = snapshot.val();
//format timestamp from linux epoch to readable format
var ts = getTimestamp(message.timestamp);
//gets the image from the user who sent the message
var userImg = userSnapshot.child(message.userID).child('img').val();
//variables for message layout
var chatMsgImg = $('<img>',class:'avatar', src:userImg);
var chatMsgDiv = $('<div/>',class:'message');
var chatMsgArrow = $('<span/>', class:'arrow');
var chatMsgName = $('<span/>', class:'name').text(message.from);
var chatMsgTimestamp = $('<span/>', class:'datetime').text(' '+ts);
var chatMsgContent = $('<span/>', class:'body').text(message.text);
//if the message is from the currently signed in user, then align right and use class out
if((message.userID) == userID)
var msg = $('<li/>', class:'out');
msg.append(chatMsgImg);
chatMsgDiv.append(chatMsgArrow);
chatMsgDiv.append(chatMsgName);
chatMsgDiv.append(chatMsgTimestamp);
chatMsgDiv.append(chatMsgContent);
msg.append(chatMsgDiv);
msg.appendTo($('#chatDiv'));
//otherwise align left and use class in
else
var msg = $('<li/>', class:'in');
msg.append(chatMsgImg);
chatMsgDiv.append(chatMsgArrow);
chatMsgDiv.append(chatMsgName);
chatMsgDiv.append(chatMsgTimestamp);
chatMsgDiv.append(chatMsgContent);
msg.append(chatMsgDiv);
msg.appendTo($('#chatDiv'));
$('#chatDiv')[0].scrollTop = $('#chatDiv')[0].scrollHeight;
);
通过这种方式，我仍然可以获得相同的消息详细信息，但我将格式留给 CSS，只使用输入和输出或传入和传出消息（分别来自其他用户和来自当前用户）
【讨论】：
调用 getmsg() 的原因是根据发件人选择的用户加载 msg。 .on('child_added') 怎么可能被调用，其中在我的脚本中它只在 getmsg() 函数上？？ 对不起，你的代码试过了，结果还是一样 嗯，好的。所以你想要一些方法来过滤数据结果？ 是的，我只是想在向另一个用户发送给另一个用户后摆脱重复问题；( 如果是这种情况，您可能需要考虑更改数据结构：/ 如果您习惯于传统的数据库架构，那么您应该以非常不同的方式看待 Firebase，因为数据非常不同Swift 3 Firebase 聊天应用程序重复消息
】Swift3Firebase聊天应用程序重复消息【英文标题】：Swift3Firebasechatapplicationduplicatemessages【发布时间】：2017-05-0909:05:10【问题描述】：我希望得到一些建议/帮助。我在正在运行的聊天应用程序中遇到了一个巧妙的小错误，该应用... 查看详情
Firebase Android 聊天示例：无法弹回输入
】FirebaseAndroid聊天示例：无法弹回输入【英文标题】：Firebase\'sAndroidChatexample:Failedtobouncetotype【发布时间】：2014-03-0900:54:17【问题描述】：这个问题也在试图找出我几天前发布的这个question的答案。AndroidChat应用程序的奇怪之处在... 查看详情
Firebase 聊天应用 setValue 在公共数据库中失败？
】Firebase聊天应用setValue在公共数据库中失败？【英文标题】：FirebasechatappsetValuefailederrorwithapublicdatabase?【发布时间】：2019-02-0703:38:00【问题描述】：我有一个使用Firebase的聊天应用，它一直在使用setValueatx失败：DatabaseError:权限... 查看详情
Firebase 聊天用户正在输入指示单元格
】Firebase聊天用户正在输入指示单元格【英文标题】：FirebaseChatuseristypingindicatorcell【发布时间】：2018-10-3019:46:53【问题描述】：我有一个Firebase实时数据库，允许用户相互发送直接消息，如下所示：chats--fromUserID----toUserID----newMess... 查看详情
Firebase 聊天应用图片上传 [关闭]
】Firebase聊天应用图片上传[关闭]【英文标题】：FirebaseChatAppImageUpload[closed]【发布时间】：2018-12-1800:49:11【问题描述】：我和我的团队正在尝试使用firebase在messagr应用程序中创建一个带有图像上传功能的消息应用程序。您对我们... 查看详情
android firebase 一对一聊天应用
】androidfirebase一对一聊天应用【英文标题】：androidfirebaseonetoonechatapplication【发布时间】：2017-08-2307:39:34【问题描述】：我尝试使用mvp开发一对一的聊天应用程序当应用程序第一次运行时，聊天正常工作并将消息发送给用户。问... 查看详情
如何使用 Firebase 数据库和 Firebase 通知为聊天应用构建通知系统
】如何使用Firebase数据库和Firebase通知为聊天应用构建通知系统【英文标题】：HowtostructureanotificationsystemforachatappusingFirebaseDatabaseandFirebaseNotification【发布时间】：2017-02-2616:30:06【问题描述】：我正在使用Android中的Firebase数据库开... 查看详情
在 Firebase 中构建聊天应用程序的数据
】在Firebase中构建聊天应用程序的数据【英文标题】：StructuringdataforchatappinFirebase【发布时间】：2016-09-2715:16:33【问题描述】：我正在关注structuringdata的Firebase指南以获取聊天应用程序。他们提出了如下所示的结构。//Chatscontainsonl... 查看详情
使用 Angularjs 和 Firebase 构建聊天应用程序
】使用Angularjs和Firebase构建聊天应用程序【英文标题】：BuildingChatAppwithAngularjsandFirebase【发布时间】：2015-07-0213:07:48【问题描述】：使用angularfire种子我想知道是否有任何教程关于在facebook中进行用户之间的私人聊天之类的。你pic... 查看详情
Firebase 网络将聊天存储为实时数据库中的数组
】Firebase网络将聊天存储为实时数据库中的数组【英文标题】：Firebasewebstoringchatsasaarrayinrealtimedatabase【发布时间】：2019-08-1307:24:58【问题描述】：我正在尝试使用firebase实时数据库制作聊天应用程序。我将2个用户之间的聊天作为... 查看详情
聊天应用程序的 Firebase 推送通知
】聊天应用程序的Firebase推送通知【英文标题】：FirebasePushNotificationforchatapp【发布时间】：2018-11-1404:38:36【问题描述】：我正在使用Firebase实时数据库开发一个聊天应用。我已经能够正确发送和接收消息。现在，我想在收到新消... 查看详情
如何使用 Flutter 和 Firebase 为聊天应用制定规则
】如何使用Flutter和Firebase为聊天应用制定规则【英文标题】：Howtomakerulesforchatappusingflutterandfirebase【发布时间】：2021-10-2602:46:54【问题描述】：我正在用颤振编写聊天应用程序，我不知道如何在firebase上设置规则，这样只有群聊... 查看详情
用于聊天应用的 Firebase 实时数据库或 Firestore？ [关闭]
】用于聊天应用的Firebase实时数据库或Firestore？[关闭]【英文标题】：FirebaseRealtimeDatabaseorFirestoreforchattingapp?[closed]【发布时间】：2019-12-0920:38:16【问题描述】：我们正在构建一个聊天应用程序，一对一聊天是该应用程序的主要目... 查看详情
Flutter 聊天应用中的 NoSuchMethodError: 'dart.global.firebase.auth'
】Flutter聊天应用中的NoSuchMethodError:\\\'dart.global.firebase.auth\\\'【英文标题】：NoSuchMethodError:\'dart.global.firebase.auth\'intheFlutterChatAppFlutter聊天应用中的NoSuchMethodError:\'dart.global.firebase.auth\'【发布时间】：2021-01-2603:13 查看详情
使用 Firebase 的 Android 聊天应用程序，但未在 firebase 中存储数据
】使用Firebase的Android聊天应用程序，但未在firebase中存储数据【英文标题】：ChatapplicationforAndroidusingFirebasebutwithoutstoringdatainfirebase【发布时间】：2019-04-2418:44:14【问题描述】：我们正在使用谷歌课堂API开发一个应用程序，用于建... 查看详情
Angular2 Firebase，聊天应用程序
】Angular2Firebase，聊天应用程序【英文标题】：Angular2Firebase,ChatApplication【发布时间】：2017-09-3020:55:53【问题描述】：我目前正在尝试在我的Angular2应用程序中实现私人聊天消息。目前我正在使用AngularFire2与火力基地一起工作。我... 查看详情
使用 Firebase 和 Flutter 构建聊天应用程序的最简单方法是啥
】使用Firebase和Flutter构建聊天应用程序的最简单方法是啥【英文标题】：WhatissimplestwaytobuildchatapplicationusingFirebaseandFlutter使用Firebase和Flutter构建聊天应用程序的最简单方法是什么【发布时间】：2020-06-2011:40:02【问题描述】：如何... 查看详情
使用 Firebase 在 android/iOS 应用程序与网络之间聊天
】使用Firebase在android/iOS应用程序与网络之间聊天【英文标题】：chattingbetweenandroid/iOSapptowebusingfirebase【发布时间】：2018-08-0306:18:14【问题描述】：我遇到了一些查询，我想实现聊天系统，用户将从Android/iOS应用程序发布他们的查... 查看详情