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-chat-app

Pusher Dashboard:

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: