Xiaopei's DokuWiki

These are the good times in your life,
so put on a smile and it'll be alright

User Tools

Site Tools


it:firebase

Firebase

A powerful API to store and sync data in realtime.

  • every piece of data has its own URL. You can use this URL to access your data in several ways:
    • From any Firebase client library
    • From REST API
    • Open in browser

getting start

<!doctype html>
<html>
  <head>
    <!-- add the firebase client lib -->
    <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
  </head>
  <body>
    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
 
    <script>
      // Use YOUR Firebase URL
      var myDataRef = new Firebase('https://<hehe>.firebaseio-demo.com/');
 
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
 
          // set the data
          // fb.set({ name: "Alex Wolfe" });
 
          // or use as an array
          myDataRef.push({name: name, text: text});
 
          $('#messageInput').val('');
        }
      });
 
      // Update in realtime.
      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>
it/firebase.txt · Last modified: 2014/10/09 11:08 by admin