A Simple Real Time Chat Application Using Firebase
In this guide, I will show you how to create a simple web chat application with Facebook authentication using Firebase and Jquery.
Firebase is a scalable, real-time back for your application. It allows developers to build rich, collaborative applications without the hassle of managing servers or writing server-side code.
Setup Facebook Authentication
Create a new Facebook application from your Facebook account. Click the Add a New App button in the top right of that page and select Website as your platform. Then choose an App ID and click Create New Facebook App ID. Select your app's category and click Create App ID. In the top right, click Skip Quick Start.
In your Facebook app configuration, click on the Settings tab on the left-hand navigation menu. Then go to the Advanced tab at the top and scroll down to the Security section. At the bottom of that section, add 'https://auth.firebase.com/v2//auth/facebook/callback' to your Valid OAuth redirect URIs and click Save Changes at the bottom of the page.
Then go to your firebase account, at https://.firebaseio.com. Click Login & Auth in the left side menu. Select the Facebook tab and check the Enable Facebook Authentication and copy the Facebook application credentials (App ID and Secret).
You can also read this Facebook Authentication guide.
To run the application, you need to have a web server. http-server has everything we need.To install the http-server, from the console, execute:
npm install http-server -g
If you don’t have Node.js and npm installed, you can read this Installing Node.js and updating npm guide.
Once you have http-server installed, you can download/clone the app from Github. Then open firegroupchat.js in your favourite text editor and replace `` with your firebase app to point to your Firebase. Now you have your Terminal open and navigate to your fireGroupChat directory, and execute this command:
First, we need to authenticate user. You can use the getAuth() method to synchronously check authentication state. If user does’t have any existing session, you can prompt the user to login and then invoke the Facebook login popup (e.g. after they have clicked a "Login" button) with the following snippet.
var ref = new Firebase("https://.firebaseio.com"); ref.authWithOAuthPopup("facebook", function(error, authData) { if (error) { console.log("Login Failed!", error); } else { console.log("Authenticated successfully with payload:", authData); } });
When the user successfully logs in, save the user's profile into Firebase with following code.
ref.child("users").child(authData.uid).set({ uid: authData.uid, provider: authData.provider, name: authData.facebook.displayName, img: authData.facebook.cachedUserProfile.picture.data.url });
Next, we retrieve all the chat messages from Firebase with following code.
ref.child("chats").on("child_added", function(snapshot) { var chat = snapshot.val(); // generate the html with chat messages.. });
And the final step is to send your message to Firebase server.
ref.child("chats").push({ uid: authData.uid, name: authData.facebook.displayName, img: authData.facebook.cachedUserProfile.picture.data.url, msg: msg, date: Firebase.ServerValue.TIMESTAMP });
The source code for what we covered so far can be found here: Source code on github
