在 Firebase 中仅显示带有 RoomID 的消息

Question

我正在尝试创建与单独房间的 FireBase 聊天，并且只显示来自该房间的消息。如何只显示 roomid = somenumber（当前设置为 4）

的消息

数据可能如下所示：

这是 firebase 文档之后的代码。

<body>

<!-- CHAT MARKUP -->
<div class="example-chat l-demo-container">
  <header>Firebase Chat Demo</header>

  <div class='example-chat-toolbar'>
    <label for="nameInput">Username:</label>
    <input type='text' id='nameInput' placeholder='enter a username...'>
  </div>

  <ul id='example-messages' class="example-chat-messages"></ul>

  <footer>
    <input type='text' id='messageInput'  placeholder='Type a message...'>
  </footer>
</div>

<!-- CHAT JAVACRIPT -->
<script>
  // CREATE A REFERENCE TO FIREBASE
  var messagesRef = new Firebase('https://blistering-fire-1740.firebaseio.com/');

  // REGISTER DOM ELEMENTS
  var messageField = $('#messageInput');
  var nameField = $('#nameInput');
  var messageList = $('#example-messages');

  // LISTEN FOR KEYPRESS EVENT
  messageField.keypress(function (e) {
    if (e.keyCode == 13) {
      //FIELD VALUES
      var username = nameField.val();
      var message = messageField.val();

      //SAVE DATA TO FIREBASE AND EMPTY FIELD
      messagesRef.push({name:username, text:message, roomid:4});
      messageField.val('');
    }
  });

  // Add a callback that is triggered for each chat message.
  messagesRef.limitToLast(10).on('child_added', function (snapshot) {
    //GET DATA
    var data = snapshot.val();
    var username = data.name || "anonymous";
    var message = data.text;

    //CREATE ELEMENTS MESSAGE & SANITIZE TEXT
    var messageElement = $("<li>");
    var nameElement = $("<strong class='example-chat-username'></strong>")
    nameElement.text(username);
    messageElement.text(message).prepend(nameElement);

    //ADD MESSAGE
    messageList.append(messageElement)

    //SCROLL TO BOTTOM OF MESSAGE LIST
    messageList[0].scrollTop = messageList[0].scrollHeight;
  });
</script>
</body>

firebase doc

Answer 1

将不属于该房间的消息添加到 DOM。

// Add a callback that is triggered for each chat message.
messagesRef.limitToLast(10).on('child_added', function (snapshot) {
  var data = snapshot.val();

  // break out of the function early if this message does not
  // belong in this room.
  if(data.roomId !== 4) return;

  var username = data.name || "anonymous";
  var message = data.text;

  // ...
});

您可能不想将 roomID 硬编码到您的代码中。将当前房间 ID 存储在某个变量中是有意义的，然后检查它。

  var currentRoomId = getRoomId(); // get from URL, or from Firebase
  // ...
  if(data.roomId !== currentRoomId) return;

Answer 2

Dan 的回答可以，但这意味着您正在下载所有聊天消息。如果您不下载不需要的数据，使用较小数据计划的用户会很感激：

var roomMessages = messagesRef.orderByChild('roomid').equalTo(4);
roomMessages.limitToLast(10).on('child_added', function (snapshot) {
    //GET DATA
    var data = snapshot.val();

您需要 roomid 上的索引，如 here 所述。

在 Firebase 中仅显示带有 RoomID 的消息

Only Show Messages with RoomID in Firebase

javascript

firebase