Don't like this style? Click here to change it! blue.css

Welcome .... Click here to logout

Firebase: Real-Time Database

Alright, the goal for today is to read and write data from a firebase RTDB.


Make an account at (I think a non-udel account is best but I don't remember why).

Create a new project, navigate your way to the real-time database, make it and put some data in there by clicking the plus button. Select "test" security rules.

Grab the URL just above your database and add .json to the back then go to that URL. For instance for me it's:

OK some insights before we get too deep. This database is a giant key/value tree (a big JSON object).

Every branch in the tree can be accessed by way of a URL by taking the DB URL adding /paths/to/the/tree and .json to the leaf.

When you put that URL into a browser it is a "GET" request which "reads" the data. There are other verbs you can do: PUT, POST, DELETE and PATCH are other "methods" you can "do" to a URL.

The essence of all web-apps is CRUD: Create, Read, Update, Destroy. More on that dimension laters (it's an arbitrary REST API).

OK, now connect a website to the DB: find the gear, click Project Settings, and add a web project (the </> icon)

This will give you some config data, select CDN and copy paste the javascript they provide, it looks like this:

Make a pen at Codepen, copy the config stuff into the javascript window (without the script wrapper).

There is a line you pasted that looks like: import { initializeApp } from ""; make another line just beneath it that looks like: import * as rtdb from "";

Finally add this: let db = rtdb.getDatabase(app); let titleRef = rtdb.ref(db, "/"); rtdb.onValue(titleRef, function(ss){ alert(JSON.stringify(ss.val())); }); (also in snippet below)

Once you've got a pop-up that matches the data you put in the database, close the pop-up, then change the data (via the web interface) and see it pop-up again.

OK so let's pause and show-and-tell. Firebase version 9 was a breaking change. It also uses a new style of javascript importing. It breaks all of my old code. So if I'm not as fast as normal forgive me.

onValue set's up a callback function that consumes a "snapshot" of the data at that key every time any data at that key or below changes.

If you only want to get the data once you can replace onValue with get, but now use the Promise notation like:


If you want to setup your DB listener at a different child/key you can use rtdb.child

Edit the database to look like this: {"name":"Andy","status":"awesome"} then use child to point directly to the name ref and read it using onValue

set, push, and update

OK to write to the database we've got 3 ways:

Take the above name example and add a line that sets it when the script runs: rtdb.set(theRef, newValue) and see the new value in the DB

Pick a key and give it an object with 3 keys then do an update changing just two of them.

Now pick a key and push several objects to it.

Let's make a chat app

Alright, let's make a chat "app":

Make an input box, a button, and an unorder list tag. When then button is clicked push the value from the input box to your database under the key "/chats". Use onValue on a chats ref then add list items to the unordered list for each chat message you push. Exchange your URL with someone else and chat with each other via the RTDB.

Ask lots of questions, here are some sticky points I imagine you'll face: clear the innerText of the unordered list, make a new child element for each message, loop through the messages properly. If you start with just display JSON.stringify(ss.val()) you'll confirm the back-and-forth. Then slowly make it prettier.

Some things that would be nice: "onChildAdded","onChildChanged","onChildMoved","onChildRemoved" and jQuery would be useful.