[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 @   Zhentiw  阅读(335)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae