Skip to content

Instantly share code, notes, and snippets.

@jjobes

jjobes/gist:fe53216aa19570f09ef0

Created March 29, 2015 21:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jjobes/fe53216aa19570f09ef0 to your computer and use it in GitHub Desktop.
Save jjobes/fe53216aa19570f09ef0 to your computer and use it in GitHub Desktop.
Download ZIP
FirebaseChatExample
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://wdcw9z07x8s.firebaseio-demo.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>
@jjobes
Copy link
Author

jjobes commented Mar 29, 2015

This shows how easy it is to create real-time apps using Firebase.

Check out the tutorial here: https://www.firebase.com/tutorial/#gettingstarted

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment