Skip to content

Instantly share code, notes, and snippets.

@nashibao

nashibao/firebase_chat.html

Created May 3, 2012 14:06
Show Gist options
  • Save nashibao/2585876 to your computer and use it in GitHub Desktop.
Save nashibao/2585876 to your computer and use it in GitHub Desktop.
Download ZIP
firebase sample
Raw
firebase_chat.html
<html>
<head>
<title>guest&#39;s Firebase Project</title>
<script type='text/javascript' src='http://static.firebase.com/demo/firebase.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='http://www.firebase.com/css/example.css'>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script type='text/javascript'>
var myDataRef = new Firebase('http://demo.firebase.com/guest698807106');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
function printChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
printChatMessage(message.name, message.text);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment