This is a series of examples of implementing Firebase, a realtime database, to prototype realtime / shared experiences in the browser.
Security/privacy note: In these examples, Firebase is used entirely on the browser-side. This means that the api key for Firebase access is exposed to everyone; anyone who has access to this page (and, thus its source code) can view, add, or delete any records!
Consider these examples as for learning/rapid prototyping, where security/privacy matters less than rapidly iterating on proof-of-concepts and demos.
Database Setup
For information on how to set up the database, see: this guide.
Code Examples
Editing a single value
(This is an example of a single text value, SET with the database.) See $("#setName").click in script.js.
This public space is called:
Incrementing/decrementing a single value
(This is an example of a single number, incremented with mathematical operations, then SETting the database.) See $("#addAge").click in script.js, which calls a function called addAge.
It is
years old.
Adding messages to a list, or: a chat
(This is an example of a list of messages, PUSHed to as an ever-growing list. Each message is composed out of multiple values: in this case, two text values: 'username' and 'message'.) See $("#submitMessage").click in script.js.
Messages:
Username:
Message:
Triggering an 'alert'
(You can also send an 'event')
Code Challenges
Mouse coordinates:
Challenge 1: Set the x value of your mouse movement to the 'age', every time you double-click
Challenge 2: Send your mouse movement as a chat message, when you double-click. (Use a separate database key (e.g. 'mousecoords' instead of 'ourchat'))
Challenge 3: Show other mouse pointers on the screen. (use the "mousepointers") div below.
GPS coordinates:
Extra-Challenge 4: Include the GPS coordinates of the person chatting into each text message.
Extra-Challenge 5: Using setInterval, continuously send the GPS coordinates into the browser, and use it to control something else (the location of a mouse pointer, the color of the text, etc).