文章/答案/技术大牛

发布

问实时聊天室
EN

Code Review用户

提问于 2014-11-03 18:56:40

回答 1查看 4K关注 0票数 6

这是一个非常简单的聊天室，我已经做了使用Firebase。在我把它提升到下一个水平之前，我想知道我现在是否有什么可以改进的。因为我刚开始使用Firebase，所以我对它不太了解，所以非常感谢你提供的任何指点。

var myDataRef = new Firebase('https://insertnamehere.firebaseio.com/');

//Set a max limit of entries to 100
dataAddQuery = myDataRef.limit(100);

dataAddQuery.on('child_added', function(snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
});

//Adds a scrollbar when 26 messages have been written so that it stays within the container
dataRemoveQuery = myDataRef.endAt().limit(26);

dataRemoveQuery.on('child_removed', function(snapshot) {
    var message = snapshot.val();
    removeChatMessage(message.name, message.text);
});

document.getElementById("messageInput").addEventListener("keypress",(function (e) {

    //When ENTER is pressed
    if (e.keyCode == 13) {
        var name = document.getElementById('nameInput').value;

        if (name.length > 18) {
            alert('Please enter a shorter name'); //The alert is temporary
        }
        else {
            var text = document.getElementById('messageInput').value;

            if (text.length > 450) {
                alert('Your message is too long'); //The alert is temporary
            }
            else {
                myDataRef.push({name: name, text: text});
                document.getElementById('messageInput').value = "";
            }
        }
    }
}))

function displayChatMessage(name, text) {

  var newMessage = document.createElement("div");
  newMessage.innerHTML = "<b>" + name + "</b> : " + text;
  document.getElementById("messagesDiv").appendChild(newMessage);
}

function removeChatMessage(name, text) {
  document.getElementById("messagesDiv").removeChild(document.getElementById("messagesDiv").firstChild)

}

HTML：

<body>

<div id='container'>
    <div id='header'>Have a chat</div> 
    <div id='messagesDiv'></div>

    <div id='inputs-holder'>
        <label for='nameInput'>Name:</label>
        <input type='text' id='nameInput'>
        <!--<span>Press enter to send your message</span> Excluded for this review -->
        <!--<button id='questionmark'>?</button> Excluded for this review -->
        <textarea type='text' id='messageInput' placeholder='Write your message here...'></textarea>   
    </div>
</div>

<!--<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>-->
<script src="chatroom.js"></script>
</body>

javascript

beginner

html

firebase

chat

回答 1

Code Review用户

回答已采纳

发布于 2014-11-05 16:37:23

奇怪的是，您在这里创建了两个不同的Firebase引用来监视相同的数据(一个监视100个元素，另一个监视20个元素)。您可能希望重用相同的引用，以便它们是一致的。否则，当项目从窗口移出child_added列表时，它们将不会触发child_removed调用。

var myDataRef = new Firebase('https://insertnamehere.firebaseio.com/');

// Set a max limit of entries to 100
dataQuery = myDataRef.endAt().limit(100);

// Listen for items moving into our out of the display window
dataQuery.on('child_added', /* display */);
dataQuery.on('child_removed', /* remove */);

看起来，您的remove方法也不像预期的那样工作。它试图将messagesDiv放在messagesDiv内部，这似乎是不正确的。

一种更简单的方法是给每个聊天消息一个唯一的id。对于像jQuery这样的库，我会使用类似于data-id="<name>"的东西，但是在vanilla JavaScript中，我可能只需要使用id属性来保持简单。

function displayChatMessage(name, text) {
  var newMessage = document.createElement("div");
  newMessage.innerHTML = "<b>" + name + "</b> : " + text;
  // add the id!
  newMessage.id = "message-" + name;
  document.getElementById("messagesDiv").appendChild(newMessage);
}

function removeChatMessage(name, text) {
  // remove using the id attribute
 var child = document.getElementById("message-"+name);
 document.getElementById("messagesDiv").removeChild(child);
}

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/68775

复制

相似问题

问实时聊天室
EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实时聊天室EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实时聊天室
EN