Building anonymous chat room app using Pusher in 30 minutes

Objective: Build chat room app where anyone having the android app can send and receive message anonymously using pusher.

Pre-requisites: Basic knowledge of android and nodejs. 

Android and Server code for download at – https://github.com/AmitKondhalkar/anonymous-chat-app-pusher 

What is Pusher?  Pusher is a real time hosted service and provides bi-directional communication using server and client sdk. It is event-based, simple to understand, easy to integrate and scalable.

Pusher terminology: Pusher works on publish–subscribe messaging pattern. Sender publishes message using Pusher on particular channel and all the receivers subscribed to the channel and event gets the message.

Channel – Channels are a fundamental concept in Pusher. Each application has a number of channels, and each client can choose which channels it subscribes to.

Events – Events are used to classify messages on channel.

The Plan (Activity Diagram):

Pusher Dashboard:

Login to pusher dashboard and make a note of your app_id, app_key and app_secret.

The Code – HTTP Server using Node.js

On server side, we will use node.js pusher sdk to connect to pusher and trigger messages to specified channel.

• Create server starter code using Node and Express generator. https://expressjs.com/en/starter/generator.html

• Install pusher sdk

  npm install pusher

• Connect to pusher and trigger message over channel.

var Pusher = require('pusher');

var PUSHER_PUBLIC_CHANNEL = "public-chat-message";

var PUSHER_EVENT_CHAT_MESSAGE = "event-chat-message";

 var pusher = new Pusher({

  appId: '278754',

  key: 'f5f06119dc9c4c5c2bcb',

  secret: '2617f6e308150321146f',

  encrypted: true

});

• Trigger message using pusher as

pusher.trigger( PUSHER_PUBLIC_CHANNEL, PUSHER_EVENT_CHAT_MESSAGE, eventData );

• Run the http server.

The Code – Android App

• Add permission for Internet in AndroidManifest.xml
• Include pusher sdk to application’s build.gradle file:

dependencies {
 //for http calls
 compile 'com.loopj.android:android-async-http:1.4.9'
 //pusher client sdk
 compile 'com.pusher:pusher-java-client:1.4.0'
 }

•  Subscribe to channel/ bind event code

Pusher pusher = new Pusher(PUSHER_APP_KEY);
 Channel channel = pusher.subscribe(PUSHER_PUBLIC_CHANNEL);

channel.bind(PUSHER_EVENT_CHAT_MESSAGE, new SubscriptionEventListener() {
 @Override
 public void onEvent(String channelName, String eventName, final String data) {
     runOnUiThread(new Runnable() {
       @Override
       public void run() {
          Gson gson = new Gson();
          Message message = gson.fromJson(data, Message.class);
          messageAdapter.add(message);
          // have the ListView scroll down to the new message
          messagesView.smoothScrollToPosition(messageAdapter.getCount() - 1);
       }
     });
   }
 });
 pusher.connect();

• Send message from Main Activity to HTTP server on the click of send message button. (Refer publishToPublicChannel() method)
• Run the Android app on 2 or more simulators or mobile devices, and start chat.
• Note: You can track the messages sent/received on “Debug Console” of pusher dashboard.

References:  

• Real Time Web Technologies – https://www.leggetter.co.uk/real-time-web-technologies-guide/
• Pusher Android Quick Start – https://pusher.com/docs/android_quick_start

Contact:  Amit.Kondhalkar@talentica.com