Firebase 网络应用聊天重复聊天输入
Posted
技术标签:
【中文标题】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,因为数据非常不同以上是关于Firebase 网络应用聊天重复聊天输入的主要内容,如果未能解决你的问题,请参考以下文章
Firebase 聊天应用 setValue 在公共数据库中失败?