如何使用AngularJS从Firebase读取Object

How to read Object from Firebase using AngularJS

本文关键字：读取 Object Firebase 何使用 AngularJS      更新时间：2023-09-26

我正在开发我的应用程序，其中一个功能是在应用程序中发送消息。我所做的是，我开发了"发送消息"窗口，用户可以在其中向其他用户发送消息。其背后的逻辑如下：
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）。

https://i.stack.imgur.com/Fl6BC.jpg

数据接收代码：

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。

非常感谢！

当您阅读消息时，您似乎陷入了异步加载陷阱：

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);
    });
  }

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

如果我们将回调拆分为一个单独的函数：，通常会更容易了解发生了什么

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返回时通知您数据更改，使您免受这些复杂性的影响。

另请参阅：对Firebase 中阵列的异步访问

相关文章：