Posted By

chrisaiv on 07/22/12


Tagged

javascript firebase


Versions (?)

Firebase: Chat


 / Published in: JavaScript
 

URL: http://www.firebase.com/tutorial/#8

Dead simple way to provide chat to your apps using Javascript

  1. <html>
  2. <head>
  3. <title>guest&#39;s Firebase Project</title>
  4. <script type='text/javascript' src='http://static.firebase.com/demo/firebase.js'></script>
  5. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
  6. <link rel='stylesheet' type='text/css' href='http://www.firebase.com/css/example.css'>
  7. </head>
  8. <body>
  9. <div id='messagesDiv'></div>
  10. <input type='text' id='nameInput' placeholder='Name'>
  11. <input type='text' id='messageInput' placeholder='Message'>
  12. <script type='text/javascript'>
  13. var myDataRef = new Firebase('http://demo.firebase.com/guest253197899');
  14. $('#messageInput').keypress(function (e) {
  15. if (e.keyCode == 13) {
  16. var name = $('#nameInput').val();
  17. var text = $('#messageInput').val();
  18. myDataRef.push({name: name, text: text});
  19. $('#messageInput').val('');
  20. }
  21. });
  22. function printChatMessage(name, text) {
  23. $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
  24. $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
  25. };
  26. myDataRef.on('child_added', function(snapshot) {
  27. var message = snapshot.val();
  28. printChatMessage(message.name, message.text);
  29. });
  30. </script>
  31. </body>
  32. </html>

Report this snippet  

You need to login to post a comment.