1. Messaging

A quick way to try the code below, stick it into into Thimble.

In this example there are two web pages, a sender and receiver page (put each page’s code into a different Thimble window):

Here’s the sender page:

<!DOCTYPE html>
<html>
 <head>
 <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
 </head>
 <body>

 <input type='text' id='tempInput' placeholder='Temperature'>
 <button type="button" onclick="doButtonAction()">Send temperature data</button>

 <script>
 // Initialize Firebase
 var config = {
 apiKey: "xxxxxxxxx",
 authDomain: "xxxxxxxxx.firebaseapp.com",
 databaseURL: "https://xxxxxxxxx.firebaseio.com",
 storageBucket: "",
 };
 firebase.initializeApp(config);

 var temperatureDataRef = firebase.database().ref("temperature");

 function doButtonAction(){
 var temp = $('#tempInput').val();
 temperatureDataRef.set({temperature: temp});
 }

 </script>
 </body>
</html>

Here’s the receiver page:

<!DOCTYPE html>
<html>
 <head>
 <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
 </head>
 <body>
 <div id="tempOutput"></div>
 <script>
 // Initialize Firebase
 var config = {
 apiKey: "xxxxxxxx",
 authDomain: "xxxxxxxxx.firebaseapp.com",
 databaseURL: "https://xxxxxxxxx.firebaseio.com",
 storageBucket: "",
 };
 firebase.initializeApp(config);
 var temperatureDataRef = firebase.database().ref("temperature");
 
 temperatureDataRef.on('value', function(snapshot) {
 var output = snapshot.val();
 $('#tempOutput').html("<b>Temperature</b>:"+output.temperature);
 });
 </script>
 </body>
</html>

Get your personal passwords: Go to firebase.google.com. Sign up. Then choose Go to console > Create new project > Add Firebase to your web app where you will find all the passwords. Copy them instead of the dummy passwords I’ve put in the two pages that look like this.

apiKey: "xxxxxxxx",
authDomain: "xxxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxx.firebaseio.com",
storageBucket: "",

Unlock the database: Now click on database on the far left of the page. Then click on RULES which is under the title, Realtime Database. Replace the rules code with the following.

{
 "rules": {
 ".read": true,
 ".write": true
 }
}

Try it out. Put a number into the temperature field and press the button. It’ll send that number to Firebase and the receiver page will automatically pick it up.

Let me explain each bit of the code above.

In both pages, the following line accesses special code that talks to Firebase:

<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>

Also in both pages, the following makes the page dynamic (using ajax, jQuery in particular):

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

Then this makes an object called temperature in Firebase:

var temperatureDataRef = firebase.database().ref("temperature");

That’s what’s common to both sender and receiver pages.

Here’s an explanation of the sender page.

The following just makes an input field for temperature and a button to send that data:

<input type='text' id='tempInput' placeholder='Temperature'>
 <button type="button" onclick="doButtonAction()">Send temperature data</button>

The following code does what happens when you press the button. The code takes whatever is in the input field with ID tempInput and sets the temp object in the firebase database to that value:

function doButtonAction(){
 var temp = $('#tempInput').val();
 temperatureDataRef.set({temperature: temp});
 }

Now the data has been sent to Firebase, the sender page has done its job.

So let’s move on the receiver page.

The following is a placeholder for the temperature data when it comes from the sender page.

<div id="tempOutput"></div>

The following code automatically gets called the value of the temperature object we made in Firebase is changed. It gets the new value and sticks into the placeholder above.

temperatureDataRef.on('value', function(snapshot) {
var output = snapshot.val();
$('#tempOutput').html("<b>Temperature</b>:"+output.temperature);
});

If you want to learn more about the bits of code like

$('#tempOutput')

Then check out this tutorial on jQuery.

var adlinkfly_advert = 2;
var adlinkfly_exclude_domains = [‘example.com’, ‘yoursite.com’];

//