Free & Easy HTML5 chat with Firebase, jQuery.& g+

by +Cesar Anton 

@reicek

Chatting has always been a very popular use for the internet, since the days of the the dial-up were mIRC was an extremely popular way to meet people , now you can see chats everywhere, they are very convenient on corporate (or even personal) web sites for dealing with customer service, sales, technical assistance, etc.

There are so many ways to create an HTML5 chat today, but I like this one for it's extremely flexible, easy to set up, works great and even though it's completely free, it can be scaled up later in complexity and user support to best suit your needs.

Firebase provides a Real-Time, Non-SQL cloud backend for our applications with very little effort but it can scale as your needs grows without any additional coding. the best part is that each Firebase DB gets a 50 connections Free quota and g+ can take care of the user's profile information.


So let's start by creating a new Firebase DataBase (or creating a new Firebase account), once you click "create" you will see the new DB in added to your list, the URL you see it's the one you will be using to work with the data stored in that DB.

To make log-in convenient for the user, we will be using the g+ sign-in button, so let's start by registering a new project in the Google Cloud Console.

After creating a new project, go to the active APIs list.

And turn ON the g+ API:

Now we need to create a new Client ID for Web Applications.

And we need to register the URL(s) of the site(s) we want to use this feature, if you don't register any site, anyone could easily steal you Client ID and use it in any page. Go to "Client ID for web application" and register your URL(s) in the "JAVASCRIPT ORIGINS" section. Don't forget to write down the "CLIENT ID".

In this example I used Free Google Drive HTML hosting, if you don't know how to use the service, here you can read an article, and here you can see a video describing how to do it. Custom URL is provided by gweb.io.

For the chat we need to create the following files:

• index.html - Main file
• gPlusLogin-async.js - Default asynchronous handler for g+ login.
• gPlusLogin.js - Called by gPlusLogin-async.js to handle the API.
• html5chat.js - This is were we store the logic for our chat.

And it's finally time to hit the code! Let's start with the good stuff, the html5chat.js:



Allow me to elaborate a little on what's going on:

messagesRef stores a Firebase reference pointing to our DB, simply write your's here.

Note: You can use the one provided in the example for testing.

$('#messageInput'.keypress here we use jQuery to monitor an HTML input with an id called messageInput, every time a key is pressed a function checks if it was the ENTER key (keyCode == 13)).

If the user pressed enter, we extract the user's name(#nameInput) and the message's text (#messageInput') and use the Firebase API method .push() to create a new object in the DB (with a random ID) with the information.

Now we need to listen the DB for changes to keep the messages windows updated, to do so we use the Firebase API method .on('child_added') to trigger a function and pass the new message (function (snapshot)) to a function, we use .limit() to limit the amount of values being watched to the last 40 so we don't need to keep watching the entire DB the whole time. which will eventually affect performance.

Finally we use the called function to parse and append the new value to the messages list.

Pro-Tip: You can have fun adding more advanced features like showing the current profile picture of the user who posted the message. Simply store the user's profile pic URL in Firebase.

Now it's time to take a look at gPlusLogin.js, which handles the data returned by the g+ API after the user logs in.



Here we have 2 functions: signinCallback and logIn,

signinCallback  is called after the user logs in and carries the APIs response, so here we check the result and make the necessary adjustments, if everything was fine with the response we call logIn which requests the user's information and makes all the adjustments to the website to show the user's data, make it available for other functions and makes final adjustments, like unlocking the chat text input field.

gPlusLogin-async.js it's simply the standard g+ asynchronous loader wrapped in a separate file.



And finally, we put all together inside index.html



Once we have all our files ready, the HTML it's quite simple, but you may notice that gPlusLogin-async.js it's after the   tab instead of within the  tag, this makes the login button to load asynchronously, this offer's best loading performance, also html5chat.js it's loaded at the end of the document, this also benefits loading performance.

Click on the image bellow to open a live demo:

Feel free to leave your comments or questions down below or in g+, also don't forget to share with us you're awesome chat implementation.

You can fork a copy of the Demo on Github:
https://github.com/reicek/firebase-gPlusHTML5chat/

Happy coding!