Javascript 仅在Firebase中显示带有RoomID的邮件_Javascript_Firebase

Javascript 仅在Firebase中显示带有RoomID的邮件

javascript firebase

Javascript 仅在Firebase中显示带有RoomID的邮件,javascript,firebase,Javascript,Firebase,我正在尝试创建具有单独房间的FireBase聊天室，并且仅显示来自该房间的消息。如何仅显示带有roomid=somenumber（当前设置为4）的邮件数据可能如下所示：这是firebase文档后面的代码 <body>  <div class="example-chat l-demo-container"> <header>Firebase Chat Demo</header> &

我正在尝试创建具有单独房间的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聊天演示
用户名：

//创建对FIREBASE的引用
var messagesRef=new Firebase（'https://blistering-fire-1740.firebaseio.com/');
//注册DOM元素
var messageField=$（“#messageInput”）；
var nameField=$（“#nameInput”）；
var messageList=$（“#示例消息”）；
//监听按键事件
messageField.keypress（功能（e）{
如果（e.keyCode==13）{
//字段值
var username=nameField.val（）；
var message=messageField.val（）；
//将数据保存到FIREBASE并清空字段
messagesRef.push（{name:username，text:message，roomid:4}）；
messageField.val（“”）；
}
});
//添加为每条聊天信息触发的回调。
messagesRef.limitToLast（10）.on（'child_added'，函数（快照）{
//获取数据
var data=snapshot.val（）；
var username=data.name | |“匿名”；
var message=data.text；
//创建元素消息并清理文本
var messageElement=$（“”）；
var namelement=$（“”）
namelement.text（用户名）；
messageElement.text（message）.prepend（namelement）；
//添加消息
messageList.append（messageElement）
//滚动到消息列表的底部
messageList[0]。scrollTop=messageList[0]。scrollHeight；
});

将不属于该文件室的消息添加到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;

  // ...
});

您可能不想将室友硬编码到代码中。将当前房间ID存储在某个变量中，然后对照该变量进行检查是有意义的

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

将不属于该文件室的消息添加到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;

  // ...
});

您可能不想将室友硬编码到代码中。将当前房间ID存储在某个变量中，然后对照该变量进行检查是有意义的

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

丹的回答会起作用，但这意味着你正在下载所有的聊天信息。如果您不下载不需要的数据，较小数据计划的用户将非常感激：

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

如前所述，您需要一个关于

roomid

的索引。

丹的回答可以，但这意味着您正在下载所有聊天信息。如果您不下载不需要的数据，较小数据计划的用户将非常感激：

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

如前所述，您需要在

roomid

上建立索引