如何使用AngularJS从Firebase读取Object

时间:2015-03-17 13:22:19

标签: javascript angularjs firebase angularfire

我正在开发我的应用程序,其中一项功能将是应用程序内的消息传递。我做了什么,是我开发了“发送消息”窗口,用户可以在其中向其他用户发送消息。其背后的逻辑如下:
1.用户A向用户B发送消息 2. Firebase在“消息传递”中创建以下节点:
“消息” - >“用户A” - >“用户B” - >“日期&时间” - >“用户A:消息”
“消息” - >“用户B” - >“用户A” - >“日期&时间” - >“用户A:消息”

以下是我用于发送消息的代码:

  sendMsg: function(receiver, content) {
    var user = Auth.getUser();
    var sender = user.facebook.id;
    var receiverId = receiver;
    var receiverRef = $firebase(XXX.firebase.child("Messaging").child(receiverId).child(sender).child(Date()));
    var senderRef = $firebase(XXX.firebase.child("Messaging").child(sender).child(receiverId).child(Date()));
    receiverRef.$set(sender,content);
    senderRef.$set(sender,content);
  },

(imgur专辑中的图片1)

目前,我正在尝试从数据库中读取消息,并根据日期对其进行排序。到目前为止,我所做的是,我以“对象”的形式存储了“Messaging / UserA /”的内容。这个物体可以在我附上的图片中看到(图2)。

http://imgur.com/a/3zQ0o

数据接收代码:

getMsgs: function () {
    var user = Auth.getUser();
    var userId = user.facebook.id;
    var messagesPath = new Firebase("https://xxx.firebaseio.com/Messaging/");
    var Messages = messagesPath.child(userId);
    Messages.on("value", function (snapshot) {
      var messagesObj = snapshot.val();
      return messagesObj;
    }, function (errorObject) {
      console.log("Error code: " + errorObject.code);
    });
  }

我的问题是:如何阅读对象的消息?我想根据日期排序,获取消息并获取已发送消息的用户的ID。

非常感谢你!

1 个答案:

答案 0 :(得分:2)

当您阅读邮件时,您似乎正在陷入异步加载陷阱:

getMsgs: function () {
    var user = Auth.getUser();
    var userId = user.facebook.id;
    var messagesPath = new Firebase("https://xxx.firebaseio.com/Messaging/");
    var Messages = messagesPath.child(userId);
    Messages.on("value", function (snapshot) {
      var messagesObj = snapshot.val();
      return messagesObj;
    }, function (errorObject) {
      console.log("Error code: " + errorObject.code);
    });
  }

return回调中的Messages.on("value"语句不会将该值返回给任何人。

如果我们将回调拆分为单独的函数,通常会更容易看到发生了什么:

onMessagesChanged(snapshot) {
    // when we get here, either the messages have initially loaded 
    // OR there has been a change in the messages
    console.log('Inside on-value listener');
    var messagesObj = snapshot.val();
    return messagesObj;
},
getMsgs: function () {
    var user = Auth.getUser();
    var userId = user.facebook.id;
    var messagesPath = new Firebase("https://xxx.firebaseio.com/Messaging/");
    var Messages = messagesPath.child(userId);
    console.log('Before adding on-value listener');
    Messages.on("value", onMessagesChanged);
    console.log('After adding on-value listener');
  }

如果你运行这样的代码片段,你会看到控制台记录:

Before adding on-value listener
After adding on-value listener
Inside on-value listener

这可能不是您所期望的,并且是Firebase必须从其服务器检索消息的事实,这可能需要很长时间。浏览器不再让用户等待,而是在数据可用时继续执行代码并调用所谓的回调函数。

对于Firebase,只要用户更改或添加消息,您的功能实际上可能会被多次调用。所以输出更可能是:

Before adding on-value listener
After adding on-value listener
Inside on-value listener
Inside on-value listener
Inside on-value listener
...

由于回调函数是异步触发的,因此不能从中返回原始函数的值。解决此问题的最简单方法是在回调中执行屏幕更新。所以说你要记录消息,你会这样做:

onMessagesChanged(snapshot) {
    // when we get here, either the messages have initially loaded 
    // OR there has been a change in the messages
    console.log('Inside on-value listener');
    var i = 0;
    snapshot.forEach(function(messageSnapshot) {
        console.log((i++)+': '+messageSnapshot.val());
    });
},

请注意,无论您使用哪种API访问Firebase,此问题都是相同的。但是不同的库以不同的方式处理它。例如:AngularFire通过在返回时通知AngularJS数据更改来保护您免受许多这些复杂性的影响。

另见:Asynchronous access to an array in Firebase