Real-time chatroom in 50 lines

Still don't believe me? See the below HTML snippet, copy & paste it into a new HTML file and open in your browser. All the magic comes from Firebase. They make it ridiculously easy to create real-time applications. If you took a sneak peek at the code below you may notice that there is no reference to any real-time JavaScript framework, no sockets or polling code, just Firebase & jQuery. jQuery is irrelevant though, it can be replaced with you're favorite JS framework, and the creators of Firebase have even created some very helpful libraries to make it easier.

Firebase is not just another cloud JSON datastore provider. Their infrastructure is totally different. The Firebase client-side library creates a socket connection with the datastore. When an object is added / updated / deleted from the store, the UI is automatically updated to reflect the changes. This removes massive amounts of code needed to support this kind of feature, and all out of the box with Firebox.

It's not just another web framework either. Firebase have full support for Android and iOS. Firebase were acquired by Google back in 2014 and have since added some major players as clients such as Shazam, Skyscanner, Asus, Viber, and Booking.com.

The below example is taken directly from Firebase's examples and there are more to be found here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
  <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
  <link rel="stylesheet" type="text/css" href="/resources/tutorial/css/example.css">
</head>
<body>
<div class="example-chat l-demo-container">
  <header>Firebase Chat Demo</header>
  <div class='example-chat-toolbar'>
    <label for="nameInput">Username:</label>
    <input type='text' id='nameInput' placeholder='enter a username...'>
  </div>
  <ul id='example-messages' class="example-chat-messages"></ul>
  <footer>
    <input type='text' id='messageInput'  placeholder='Type a message...'>
  </footer>
</div>
<script>
  // CREATE A REFERENCE TO FIREBASE
  var messagesRef = new Firebase('https://z1w2m86ay4t.firebaseio-demo.com/');
  var messageField = $('#messageInput');
  var nameField = $('#nameInput');
  var messageList = $('#example-messages');
  // LISTEN FOR KEYPRESS EVENT
  messageField.keypress(function (e) {
    if (e.keyCode == 13) {
      var username = nameField.val();
      var message = messageField.val();
      //SAVE DATA TO FIREBASE AND EMPTY FIELD
      messagesRef.push({name:username, text:message});
      messageField.val('');
    }
  });
  // Add a callback that is triggered for each chat message.
  messagesRef.limitToLast(10).on('child_added', function (snapshot) {
    var data = snapshot.val(); //GET DATA
    var username = data.name || "anonymous";
    var message = data.text;
    //CREATE ELEMENTS MESSAGE & SANITIZE TEXT
    var messageElement = $("<li>");
    var nameElement = $("<strong class='example-chat-username'></strong>")
    nameElement.text(username);
    messageElement.text(message).prepend(nameElement);
    messageList.append(messageElement) //ADD MESSAGE
    messageList[0].scrollTop = messageList[0].scrollHeight; //SCROLL TO BOTTOM OF MESSAGE LIST
  });
</script>
</body>
</html>