[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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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工具