Firebase Group Chat Example Javascript

Hi guys, today I’m going to implement Live Group Chat Example using Google Firebase Real-time Database. The complete working example is available on Github, you can find the link at the bottom of this post. You may also check Demo.

Live Group Chat Demo

Setup Firebase

If you don’t have a Firebase account, you can go to the Signup page and create an account. If you already have an account, you can Login here.

Once you are on Account’s page, you will have an option there to create a new Firebase app.

Realtime moving Cars on Google Maps JavaScript using Google Firebase

From Firebase Console find “Add Firebase to your web app”

You will find JavaScript Code with your project key & other credentials.

<script src=""></script>
  // Initialize Firebase
  var config = {
    apiKey: "your-project-key-here",
    authDomain: "",
    databaseURL: "",
    projectId: "group-chat-codinginfinite",
    storageBucket: "",
    messagingSenderId: "129035491745"

Setup Firebase Real-time Database

Create a Database to store the message and user id for each user. How my database looks like

group chat firebase realtime database

Firebase Anonymous Authentication

Enable firebase anonymous authentication:

  1. In the Firebase console, open the Authentication section.
  2. On the Sign-in Methods page, enable the Anonymous sign-in method.

Now you can get a unique id for each user using this code

var user = firebase.auth().signInAnonymously();

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // User is signed in.
        var isAnonymous = user.isAnonymous;
        user_id = user.uid;
      } else {
        // User is signed out.

Write Message to Firebase Database

This simple code will push an object of user id and message text into the firebase database with a unique id.

function writeUserData(message) {

          user_id: user_id,
          message: message

Add Messages to Chat

Now we need to add Events for Adding Messages, we do not need to get all messages List from Firebase Database, Add Event will do the job automatically for us.

// get firebase database reference...
var db_ref = firebase.database().ref('/');

db_ref.on('child_added', function (data) {
  var type;
  if(data.val().user_id == user_id){
  $('<li class="'+type+'"><p>' + data.val().message + '</p></li>').appendTo($('.messages ul'));
  $('.message-input input').val(null);
  $(' .preview').html('<span>You: </span>' + data.val().message);

    $(".messages").animate({ scrollTop: $(".messages")[0].scrollHeight }, 0);

Combine the code to get Complete Live group chat or you can download complete example from Github.



Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, we will receive an affiliate commission. Regardless, we only recommend products or services we use personally and believe will add value to our readers.


I'm passionate about learning new technologies as well as mentoring and helping others get started with their programming career. This blog is my way of giving back to the Community.

Comments are closed.