advanced code snippet search

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

Expand | Embed | Plain Text 
  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.