[Firebase] Tutorial

1. Installing Firebase

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
  </head>
  <body>
  </body>
</html>

 

2. Accessing Data

You'll need a reference to access data inside your Firebase.

A core concept of Firebase is that 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 our REST API
  • By entering it in any browser (Try clicking the link above).
<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
  </head>
  <body>
    <script>
      var myDataRef = new Firebase('https://eme2dv8gn1l.firebaseio-demo.com/');
    </script>
  </body>
</html>

 

3. Writing Data

Let's send a chat message

You can use the Firebase reference you just created to write data to Firebase using the set() function.

Firebase can support number, boolean, and string data types — the same as a normal JavaScript object.

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
  </head>
  <body>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://eme2dv8gn1l.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.set('User ' + name + ' says' + text);
          $('#messageInput').val('');
        }
      });
    </script>
  </body>
</html>

 

4. Writing Objects

The set() function can also be used to write objects.

myDataRef.set({name: name, text: text});

 

5. Writing Lists

Firebase supports lists of data.

You've already learned how to write data to specific, named locations in Firebase, but your chat application will require a list of messages. Firebase provides a helper function called push() that makes creating lists easy.

myDataRef.push({name: name, text: text});

 

6. Reading Data

Now let's receive chat messages.

We need to tell Firebase to notify us when chat messages arrive. We do this by adding a callback to the list of chat messages using the on() method, as shown below:

myDataRef.on('child_added', function(snapshot) {
  //We'll fill this in later.
});

This method takes two arguments: the event type and the callback function. We'll use the 'child_added' event so that we are notified of the arrival of individual messages.

      myDataRef.on('child_added', function(snapshot){
          
      });

There are 4 child type: https://www.firebase.com/docs/web/guide/retrieving-data.html

child_added, child_changed, child_move, child_removed

 

7. Using Snapshots

Now we need to display the chat messages on the page.

For each chat message, Firebase will call your callback with a snapshotcontaining the message's data.

Extract the message data from the snapshot by calling the val() function and assign it to a variable. Then, call the displayChatMessage() function to display the message as shown:

var message = snapshot.val();
displayChatMessage(message.name, message.text);
<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
  </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://eme2dv8gn1l.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>

 

posted @ 2014-09-17 05:01  Zhentiw  阅读(334)  评论(0)  编辑  收藏  举报