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:

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.

  • 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:  

Contact:  Amit.Kondhalkar@talentica.com


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s