Author

Shehryar Khan

Browsing

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="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "your-project-key-here",
    authDomain: "group-chat-codinginfinite.firebaseapp.com",
    databaseURL: "https://group-chat-codinginfinite.firebaseio.com",
    projectId: "group-chat-codinginfinite",
    storageBucket: "group-chat-codinginfinite.appspot.com",
    messagingSenderId: "129035491745"
  };
  firebase.initializeApp(config);
</script>

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) {

      db_ref.push({
          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){
    type="sent";
  }
  else{
    type="replies";
  }
  $('<li class="'+type+'"><p>' + data.val().message + '</p></li>').appendTo($('.messages ul'));
  $('.message-input input').val(null);
  $('.contact.active .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.

 
 
 

Realtime Moving Cars on Map using Firebase

Our aim has always been providing the solutions which are difficult to find or difficult to implement. Here’s another solution for real-time moving cars on Google Maps JavaScript 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 here:

Realtime Map Demo

What is Firebase?

Firebase is a real-time application platform. It allows developers to build rich, collaborative applications quickly using just client-side code. Applications built with Firebase:

  • Can be built rapidly
  • Update in realtime
  • Remain responsive even when a network connection is unavailable

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.

Firebase Console - Coding Infinite
Firebase Console – Coding Infinite

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

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

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
    apiKey: "project-key-here",
    authDomain: "realtime-on-map-example.firebaseapp.com",
    databaseURL: "https://realtime-on-map-example.firebaseio.com",
    projectId: "realtime-on-map-example",
    storageBucket: "",
    messagingSenderId: "851837622908"
};
firebase.initializeApp(config);
</script>

Firebase Realtime Database

Create a Database for Latitude, Longitude, and angle of the car. How my database looks like

Firebase Realtime Database - Coding Infinite
Firebase Realtime Database – Coding Infinite

Simple Google Maps Setup

For moving realtime cars on Maps using Firebase our first step is to display a Google Map using Google Maps JavaScript API, for doing this, first you need to get API key for Google Maps and then use the below code to display Google Maps

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map {
                height: 100%;
            }

            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

        <!-- jQuery CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>

            var map;
            function initMap() { // Google Map Initialization... 
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 16,
                    center: new google.maps.LatLng(31.52011, 74.368604),
                    mapTypeId: 'terrain'
                });
            }

        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7DtKqWoAtgKFmYtUu-PceyA7bV1Y9NTU&callback=initMap">
        </script>

    </body>
</html>

Firebase Add, Remove, Update Events

Now we need to add Events for Car Added, Car Removed or if Car changes location, we do not need to get all Cars List from Firebase Database, Add Event will do the job automatically for you.

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

// this event will be triggered when a new object will be added in the database...
cars_Ref.on('child_added', function (data) {
    cars_count++;
    AddCar(data);
});

// this event will be triggered on location change of any car...
cars_Ref.on('child_changed', function (data) {
    markers[data.key].setMap(null);
    AddCar(data);
});

// If any car goes offline then this event will get triggered and we'll remove the marker of that car...  
cars_Ref.on('child_removed', function (data) {
    markers[data.key].setMap(null);
    cars_count--;
    document.getElementById("cars").innerHTML = cars_count;
});

Adding Car Marker

you can see in the above code that we child_added and chiled_changed methods calling AddCar Method, Job of this method is to create a car marker and Add marker on the Map.

function AddCar(data) {

    var icon = { // car icon
        path: 'M29.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759   c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z    M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713   v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336   h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805',
        scale: 0.4,
        fillColor: "#427af4", //<-- Car Color, you can change it 
        fillOpacity: 1,
        strokeWeight: 1,
        anchor: new google.maps.Point(0, 5),
        rotation: data.val().angle //<-- Car angle
    };

    var uluru = { lat: data.val().lat, lng: data.val().lng };

    var marker = new google.maps.Marker({
        position: uluru,
        icon: icon,
        map: map
    });

    markers[data.key] = marker; // add marker in the markers array...
    document.getElementById("cars").innerHTML = cars_count;
}

After combining the code you can view realtime moving cars on Google Maps. when you’ll update latitude or longitude at firebase database your car will move in realtime.

 
 
 

Warning: count(): Parameter must be an array or an object that implements Countable in /wp-includes/post-template.php on line 284

I met with this problem after installing The7 theme, while searching a bit I found that some people are facing this problem due to Jetpack plugin when reviewing the code I realize that this might be because of plugin or theme conflict with PHP version.

Solution:

Many people solved this problem by downgrading PHP version, but this could not be a good solution, I solved this problem by replacing this code at line 284-285 at wp-includes/post-template.php

if ( $page > count( $pages ) ) // if the requested page doesn't exist
     $page = count( $pages ); // give them the highest numbered page that DOES exist

with this code

if ( is_array( $pages ) ) {
    if ( $page > count( $pages ) ) // if the requested page doesn't exist
      $page = count( $pages ); // give them the highest numbered page that DOES exist
  } else { 	
    $page = 0;
}

 

Is there an upcoming Event and you want to send an invitation to all of your contacts via SMS?
Or you have Good NEWS for your friends/family?
You can easily do all these and even more with “Bulk SMS Sender”, an open source android app that helps you send SMS messages to large amounts of recipients.

What is Bulk SMS Sender?

Bulk SMS Sender is really small in size but not in purpose. It’s a powerful open source Android application that allows us to send customized SMS messages through their carrier network to all contacts that are listed in a Text input file. Bulk SMS Sender can serve for mass delivery of holiday greetings, as an effective marketing tool and more.
 
Bulk SMS Sender APK
 
Bulk SMS Sender reads a list of contact numbers from a Text file and sends SMS to all contacts one by one. It can be used for many purposes. e.g Educational, Commercial, Learning, SMS Marketing etc.Bulk SMS Sender Android App Coding Infinite home

Features

  • Easy to use
  • Send SMS messages to an unlimited number of contacts with just a few clicks
  • Get live progress updates during the sending process
  • It takes a pause after a specific interval of time because a large bulk of SMS can spam your chip
  • We can add new features to your request, just email us with any feature you have in your mind

How It Works

  1. First of all, we need a text file of phone numbers (one number in a single line)
  2. Open Bulk SMS Sender App and choose phone numbers’ file.

Bulk SMS Sender Android App Coding Infinite choose file

  1. Bulk SMS Sender App has some really useful settings.
    • You can add some pause interval after some SMS.
    • You can delete the number from the file after SMS sent to that number option is also available in the settings.

Bulk SMS Sender Android App Coding Infinite settings

  1. The app will start sending SMS right after Send Button on Home screen.

Bulk SMS Sender Android App Coding Infinite sending

Source Code of Bulk SMS Sender Android App is available on Github, you can download the Complete project, also feel free if you want to add any New Feature.

Download Complete Code

This is a very simple Client/Server Chat Application using TCP Sockets Java.

Complete Code for Client & Server can be found below for download.

How it Works

Here is an example of how a very simple client-server chat application works. These are the stages involved:

Step 1:  In any Client/Server Application, we need to run the server before the client, because the server keeps waiting for the client to be connected.
Step 2: Server keeps listening for the client on an assigned IP & Port
Step 3: For establishing connection client must know the IP & Port of the server.
Step 4: 

When we start Client Application, It creates a connection to the server.

Step 5: After the Successful connection Client & Server Applications can send & receive messages.

 

You can download complete code for client & server examples below.

Download Client Example
Download Server Example

FAQ.

  • Can we run these Chat Applications on different Computers?

Yes, you can use these applications on different computers but both computers should be on the same network.

  • Will this Client-Server Chat Applications work on Different Networks?

For using this application on different networks you must have a static IP address for the server app to run.

 

Recommended for you: Open Source Bulk SMS Sender Android App