In the 1st part, we have learned how to build the socket server and the web chat app. We also did tested the socket server using the web app.

In this part we are going to build the next important component, i.e. android chat app. The app we are about to create will have two screens. The first screen will prompt the user to enter his/her name. This name is to identify the sender whenever a message is received. The second screen is to list the chat messages and to compose a new message.

So let’s start the app by creating a new android project in Eclipse IDE.

android building chat app using java sockets

6. Building The Android Chat App

1. In Eclipse create new android project by navigating to File ⇒ New ⇒ Android Application Project and fill out all the required details.

I gave my project name as WebMobileGroupChat and package name as
info.androidhive.webgroupchat.

2. Add the below color values in res ⇒ values ⇒ colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="actionbar">#3cb879</color>
    <color name="body_background">#e8e8e8</color>
    <color name="body_background_green">#82e783</color>
    <color name="server_status_bar">#2b2b2b</color>
    <color name="title_gray">#434343</color>
    <color name="white">#ffffff</color>
    <color name="bg_msg_you">#5eb964</color>
    <color name="bg_msg_from">#e5e7eb</color>
    <color name="msg_border_color">#a1a1a1</color>
    <color name="bg_btn_join">#1e6258</color>
    <color name="bg_msg_input">#e8e8e8</color>
    <color name="text_msg_input">#626262</color>
    <color name="lblFromName">#777777</color>
</resources>

3. Also add the below string values in res ⇒ values ⇒ strings.xml file.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">WebMobileGroupChat</string>
    <string name="title">(Android WebSockets Chat App)</string>
    <string name="author_name">By Ravi Tamada</string>
    <string name="author_url">www.androidhive.info</string>
    <string name="enter_name">Enter your name</string>
    <string name="btn_join">JOIN</string>
    <string name="btn_send">Send</string>

</resources>

4. Edit styles.xml located under res ⇒ values ⇒ styles.xml and add below styles. Here we are adding the styles for the action bar.

<resources>
 
    <style name="ChatAppTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
    </style>
 
    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/actionbar</item>
        <item name="android:titleTextStyle">@style/TitleTextStyle</item>
    </style>
    
     <style name="TitleTextStyle" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>
 
</resources>

5. Now we need an activity to take the username that is required when connecting to socket server. So under res ⇒ layout folder create an xml file named activity_name.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/actionbar"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imgLogo"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="60dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgLogo"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:text="@string/title"
        android:textColor="@color/white"
        android:textSize="13dp" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="20dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="15dp"
            android:text="@string/enter_name"
            android:textColor="@color/white"
            android:textSize="18dp" />

        <EditText
            android:id="@+id/name"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@color/white"
            android:inputType="textCapWords"
            android:padding="10dp" />

        <Button
            android:id="@+id/btnJoin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:background="@color/bg_btn_join"
            android:paddingLeft="25dp"
            android:paddingRight="25dp"
            android:text="@string/btn_join"
            android:textColor="@color/white" />
    </LinearLayout>

    <!-- author info -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/author_name"
            android:textColor="@color/white"
            android:textSize="12dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/author_url"
            android:textColor="@color/white"
            android:textSize="12dp" />
    </LinearLayout>

</RelativeLayout>

6. Create a new activity named NameActivity.java under project’s main package. In this activity we don’t handle anything complex. We just take the user input from EditText and send it to other activity.

package info.androidhive.webgroupchat;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class NameActivity extends Activity {

	private Button btnJoin;
	private EditText txtName;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_name);

		btnJoin = (Button) findViewById(R.id.btnJoin);
		txtName = (EditText) findViewById(R.id.name);

		// Hiding the action bar
		getActionBar().hide();

		btnJoin.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				if (txtName.getText().toString().trim().length() > 0) {

					String name = txtName.getText().toString().trim();

					Intent intent = new Intent(NameActivity.this,
							MainActivity.class);
					intent.putExtra("name", name);

					startActivity(intent);

				} else {
					Toast.makeText(getApplicationContext(),
							"Please enter your name", Toast.LENGTH_LONG).show();
				}
			}
		});
	}
}

7. Finally make NameActivity.java as launcher activity in AndroidManifest.xml. Also add INTERNET permission as we need to make internet calls. This is how your manifest file should look like.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.webgroupchat"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="13"
        android:targetSdkVersion="21" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/ChatAppTheme" >
        <activity
            android:name=".NameActivity"
            android:label="@string/app_name"
            android:windowSoftInputMode="adjustPan" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:screenOrientation="portrait" >
        </activity>
    </application>

</manifest>

After doing the above changes, if you run the app, you should see the name activity launched as first activity. Below is the output of name activity where user can enter their name and move to next activity.

android building chat app using java sockets

Before going to implement sockets, I would like to create few resource files first which required to create messages interface.

8. Download this background image and paste it in project’s res ⇒ drawable folder. (If you don’t see drawable folder, create a new one and name it as drawable). This image will be used as background repeat image for the chat conversation.

9. Create 3 new xml files under drawable folder named tile_bg.xml, bg_msg_from.xml and bg_msg_you.xml and add below codes. These drawable xml files are used as background for chat messages.

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/bg_messages" 
  android:tileMode="repeat" />
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- view background color -->
    <solid android:color="@color/bg_msg_from" >
    </solid>

    <corners android:radius="5dp" >
    </corners>

</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- view background color -->
    <solid android:color="@color/bg_msg_you" >
    </solid>

    <corners android:radius="5dp" >
    </corners>

</shape>

10. Now under res ⇒ layout folder create two more xml files named list_item_message_left.xml and list_item_message_right.xml. These two layout files are used to align chat messages on left and right in the list view.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="5dp"
    android:paddingTop="5dp" 
    android:paddingLeft="10dp">

    <TextView
        android:id="@+id/lblMsgFrom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:textColor="@color/lblFromName"
        android:textStyle="italic" 
        android:padding="5dp"/>

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:layout_marginRight="80dp"
        android:textColor="@color/title_gray"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:background="@drawable/bg_msg_from"/>

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="vertical"
    android:paddingBottom="5dp"
    android:paddingRight="10dp"
    android:paddingTop="5dp" >

    <TextView
        android:id="@+id/lblMsgFrom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textColor="@color/lblFromName"
        android:textSize="12dp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:background="@drawable/bg_msg_you"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:textColor="@color/white"
        android:textSize="16dp" />

</LinearLayout>

11. Now we need to create another layout to list all the chat messages and an option to compose a new message. Create another layout activity_main.xml and add below code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/tile_bg"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/list_view_messages"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@null"
        android:divider="@null"
        android:transcriptMode="alwaysScroll" 
        android:stackFromBottom="true">
    </ListView>

    <LinearLayout
        android:id="@+id/llMsgCompose"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="horizontal"
        android:weightSum="3" >

        <EditText
            android:id="@+id/inputMsg"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="2"
            android:background="@color/bg_msg_input"
            android:textColor="@color/text_msg_input"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"/>

        <Button
            android:id="@+id/btnSend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/bg_btn_join"
            android:textColor="@color/white" 
            android:text="@string/btn_send" />
    </LinearLayout>

</LinearLayout>

12. With the above step, the creation of layout resources is done. Now we’ll quickly create few helper classes. In your project create a new package and name it as other.

After creating the new package my package name will be info.androidhive.webgroupchat.other.

13. In other package, create a class named Utils.java and add below code. This class contains methods to save the user’s session id in shared preferences.

package info.androidhive.webgroupchat.other;

import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;

public class Utils {

	private Context context;
	private SharedPreferences sharedPref;

	private static final String KEY_SHARED_PREF = "ANDROID_WEB_CHAT";
	private static final int KEY_MODE_PRIVATE = 0;
	private static final String KEY_SESSION_ID = "sessionId",
			FLAG_MESSAGE = "message";

	public Utils(Context context) {
		this.context = context;
		sharedPref = this.context.getSharedPreferences(KEY_SHARED_PREF,
				KEY_MODE_PRIVATE);
	}

	public void storeSessionId(String sessionId) {
		Editor editor = sharedPref.edit();
		editor.putString(KEY_SESSION_ID, sessionId);
		editor.commit();
	}

	public String getSessionId() {
		return sharedPref.getString(KEY_SESSION_ID, null);
	}

	public String getSendMessageJSON(String message) {
		String json = null;

		try {
			JSONObject jObj = new JSONObject();
			jObj.put("flag", FLAG_MESSAGE);
			jObj.put("sessionId", getSessionId());
			jObj.put("message", message);

			json = jObj.toString();
		} catch (JSONException e) {
			e.printStackTrace();
		}

		return json;
	}

}

14. Create another class named Message.java. This model class defines each chat message where it contains message id, text and a boolean flag (isSelf) to define message owner. Using this boolean flag we’ll align message left or right in the list view.

package info.androidhive.webgroupchat.other;

public class Message {
	private String fromName, message;
	private boolean isSelf;

	public Message() {
	}

	public Message(String fromName, String message, boolean isSelf) {
		this.fromName = fromName;
		this.message = message;
		this.isSelf = isSelf;
	}

	public String getFromName() {
		return fromName;
	}

	public void setFromName(String fromName) {
		this.fromName = fromName;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public boolean isSelf() {
		return isSelf;
	}

	public void setSelf(boolean isSelf) {
		this.isSelf = isSelf;
	}

}

15. Create a class named WsConfig.java. This is where we define socket configuration i.e the socket url, port number and end point.

package info.androidhive.webgroupchat.other;

public class WsConfig {
	public static final String URL_WEBSOCKET = "ws://192.168.0.102:8080/WebMobileGroupChatServer/chat?name=";
}

16. Now under your main package create a class named MessagesListAdapter.java to implement the custom list view adapter class. This class plays a major role in rendering the list by aligning the chat messages left or right.

package info.androidhive.webgroupchat;

import info.androidhive.webgroupchat.other.Message;

import java.util.List;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class MessagesListAdapter extends BaseAdapter {

	private Context context;
	private List<Message> messagesItems;

	public MessagesListAdapter(Context context, List<Message> navDrawerItems) {
		this.context = context;
		this.messagesItems = navDrawerItems;
	}

	@Override
	public int getCount() {
		return messagesItems.size();
	}

	@Override
	public Object getItem(int position) {
		return messagesItems.get(position);
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@SuppressLint("InflateParams")
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {

		/**
		 * The following list not implemented reusable list items as list items
		 * are showing incorrect data Add the solution if you have one
		 * */

		Message m = messagesItems.get(position);

		LayoutInflater mInflater = (LayoutInflater) context
				.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

		// Identifying the message owner
		if (messagesItems.get(position).isSelf()) {
			// message belongs to you, so load the right aligned layout
			convertView = mInflater.inflate(R.layout.list_item_message_right,
					null);
		} else {
			// message belongs to other person, load the left aligned layout
			convertView = mInflater.inflate(R.layout.list_item_message_left,
					null);
		}

		TextView lblFrom = (TextView) convertView.findViewById(R.id.lblMsgFrom);
		TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg);

		txtMsg.setText(m.getMessage());
		lblFrom.setText(m.getFromName());

		return convertView;
	}
}

17. Download the android websockets library and extract somewhere. Thanks to Koush for writing such a useful library.

18. Import the downloaded android websockets library into Eclipse workspace. Goto File ⇒ Import ⇒ Android ⇒ Existing Android Code Into Workspace and select the downloaded library project home directory.

19. Now add this project as a Library to our project. Right Click on project ⇒ Properties ⇒ Android (on left) ⇒ Add (on right, under Library section) and select the imported project.

android-adding-library-project

20. Finally open the main activity class (MainActivity.java) do the below changes. The below code very simple and everything is self explanatory.

> A web socket is created using WebSocketClient class and it has all the callback methods like onConnect, onMessage and onDisconnect.

> In onMessage method parseMessage() is called to parse the JSON received from the socket server.

> In parseMessage() method, the purpose of JSON is identified by reading the flag value.

> When a new message is received, the message is added to list view data source and adapter.notifyDataSetChanged() is called to update the chat list.

> sendMessageToServer() method is used to send the message from android device to socket server.

> playBeep() method is called to play device’s default notification sound whenever a new message is received.

package info.androidhive.webgroupchat;

import info.androidhive.webgroupchat.other.Message;
import info.androidhive.webgroupchat.other.Utils;
import info.androidhive.webgroupchat.other.WsConfig;

import java.net.URI;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;
import java.util.Locale;

import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.content.Intent;
import android.media.Ringtone;
import android.media.RingtoneManager;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

import com.codebutler.android_websockets.WebSocketClient;

public class MainActivity extends Activity {

	// LogCat tag
	private static final String TAG = MainActivity.class.getSimpleName();

	private Button btnSend;
	private EditText inputMsg;

	private WebSocketClient client;

	// Chat messages list adapter
	private MessagesListAdapter adapter;
	private List<Message> listMessages;
	private ListView listViewMessages;

	private Utils utils;

	// Client name
	private String name = null;

	// JSON flags to identify the kind of JSON response
	private static final String TAG_SELF = "self", TAG_NEW = "new",
			TAG_MESSAGE = "message", TAG_EXIT = "exit";

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		btnSend = (Button) findViewById(R.id.btnSend);
		inputMsg = (EditText) findViewById(R.id.inputMsg);
		listViewMessages = (ListView) findViewById(R.id.list_view_messages);

		utils = new Utils(getApplicationContext());

		// Getting the person name from previous screen
		Intent i = getIntent();
		name = i.getStringExtra("name");

		btnSend.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// Sending message to web socket server
				sendMessageToServer(utils.getSendMessageJSON(inputMsg.getText()
						.toString()));

				// Clearing the input filed once message was sent
				inputMsg.setText("");
			}
		});

		listMessages = new ArrayList<Message>();

		adapter = new MessagesListAdapter(this, listMessages);
		listViewMessages.setAdapter(adapter);

		/**
		 * Creating web socket client. This will have callback methods
		 * */
		client = new WebSocketClient(URI.create(WsConfig.URL_WEBSOCKET
				+ URLEncoder.encode(name)), new WebSocketClient.Listener() {
			@Override
			public void onConnect() {

			}

			/**
			 * On receiving the message from web socket server
			 * */
			@Override
			public void onMessage(String message) {
				Log.d(TAG, String.format("Got string message! %s", message));

				parseMessage(message);

			}

			@Override
			public void onMessage(byte[] data) {
				Log.d(TAG, String.format("Got binary message! %s",
						bytesToHex(data)));

				// Message will be in JSON format
				parseMessage(bytesToHex(data));
			}

			/**
			 * Called when the connection is terminated
			 * */
			@Override
			public void onDisconnect(int code, String reason) {

				String message = String.format(Locale.US,
						"Disconnected! Code: %d Reason: %s", code, reason);

				showToast(message);

				// clear the session id from shared preferences
				utils.storeSessionId(null);
			}

			@Override
			public void onError(Exception error) {
				Log.e(TAG, "Error! : " + error);

				showToast("Error! : " + error);
			}

		}, null);

		client.connect();
	}

	/**
	 * Method to send message to web socket server
	 * */
	private void sendMessageToServer(String message) {
		if (client != null && client.isConnected()) {
			client.send(message);
		}
	}

	/**
	 * Parsing the JSON message received from server The intent of message will
	 * be identified by JSON node 'flag'. flag = self, message belongs to the
	 * person. flag = new, a new person joined the conversation. flag = message,
	 * a new message received from server. flag = exit, somebody left the
	 * conversation.
	 * */
	private void parseMessage(final String msg) {

		try {
			JSONObject jObj = new JSONObject(msg);

			// JSON node 'flag'
			String flag = jObj.getString("flag");

			// if flag is 'self', this JSON contains session id
			if (flag.equalsIgnoreCase(TAG_SELF)) {

				String sessionId = jObj.getString("sessionId");

				// Save the session id in shared preferences
				utils.storeSessionId(sessionId);

				Log.e(TAG, "Your session id: " + utils.getSessionId());

			} else if (flag.equalsIgnoreCase(TAG_NEW)) {
				// If the flag is 'new', new person joined the room
				String name = jObj.getString("name");
				String message = jObj.getString("message");

				// number of people online
				String onlineCount = jObj.getString("onlineCount");

				showToast(name + message + ". Currently " + onlineCount
						+ " people online!");

			} else if (flag.equalsIgnoreCase(TAG_MESSAGE)) {
				// if the flag is 'message', new message received
				String fromName = name;
				String message = jObj.getString("message");
				String sessionId = jObj.getString("sessionId");
				boolean isSelf = true;

				// Checking if the message was sent by you
				if (!sessionId.equals(utils.getSessionId())) {
					fromName = jObj.getString("name");
					isSelf = false;
				}

				Message m = new Message(fromName, message, isSelf);

				// Appending the message to chat list
				appendMessage(m);

			} else if (flag.equalsIgnoreCase(TAG_EXIT)) {
				// If the flag is 'exit', somebody left the conversation
				String name = jObj.getString("name");
				String message = jObj.getString("message");

				showToast(name + message);
			}

		} catch (JSONException e) {
			e.printStackTrace();
		}

	}

	@Override
	protected void onDestroy() {
		super.onDestroy();
		
		if(client != null & client.isConnected()){
			client.disconnect();
		}
	}

	/**
	 * Appending message to list view
	 * */
	private void appendMessage(final Message m) {
		runOnUiThread(new Runnable() {

			@Override
			public void run() {
				listMessages.add(m);

				adapter.notifyDataSetChanged();

				// Playing device's notification
				playBeep();
			}
		});
	}

	private void showToast(final String message) {

		runOnUiThread(new Runnable() {

			@Override
			public void run() {
				Toast.makeText(getApplicationContext(), message,
						Toast.LENGTH_LONG).show();
			}
		});

	}

	/**
	 * Plays device's default notification sound
	 * */
	public void playBeep() {

		try {
			Uri notification = RingtoneManager
					.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
			Ringtone r = RingtoneManager.getRingtone(getApplicationContext(),
					notification);
			r.play();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	final protected static char[] hexArray = "0123456789ABCDEF".toCharArray();

	public static String bytesToHex(byte[] bytes) {
		char[] hexChars = new char[bytes.length * 2];
		for (int j = 0; j < bytes.length; j++) {
			int v = bytes[j] & 0xFF;
			hexChars[j * 2] = hexArray[v >>> 4];
			hexChars[j * 2 + 1] = hexArray[v & 0x0F];
		}
		return new String(hexChars);
	}

}

Now if you run the app, you can see the below screen as main activity output.

android building chat app like whatsapp

With this we have completed the android app part too.

7. Testing the Web and Android App

To test the android app you need two android mobiles or you can just use one android mobile and a web app. Follow below steps to test the android app.

1. Make sure that all your devices are connected to same wifi network. If you are using two android mobiles, connect them to same wifi network.

2. Get the ip address of the machine on which socket server is running. Follow 2nd step in Part1 tutorial to get the ip address of your machine.

3. Replace the ip address in WsConfig.java and main.js with your machine IP address.

4. Deploy the app on to android devices. If you are testing the app using web and android apps, open both the apps and test.

android-building-the-chat-app

The same conversation can be seen on web app too.

androd-chat-app-dad-mom-son

I hope everyone could able to build the app without any hurdles. If you have any queries or suggestions, please do let me know in the comment section below.

Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.
  • Sébastien Kondov

    Great tutorial 🙂 Long time i wanted to see that. Thank you

  • Marcos Campos

    rav você é foda!

  • moez

    Hey thanks bro, but i would ask something How can i store & retrieve image in database table (MySQL) especially when i use listview with user picture .

    • Alex

      in the server mysql to store the URL of the image stored in your server, after the client with android you just fetch the url and download the image

      • moez

        But i don’t want to use url
        Just tables.

  • mahdi

    How to chat between two android with internet 3g or 2g

  • Malaika Khan

    Ravi please share the link of your videos thanks

  • Ulhas Patil

    Wow Great Tutorial Ravi…..
    Ravi don’t you have video tutorials to get more knowledge..?
    Please share the link of them…

    • Sorry Ulhas, I don’t have video tutorials!

      • Ulhas Patil

        Thanks Ravi for your Reply..,
        If you are Planning to do that in future then Please Please let us know…

        Thanks in Advance…. 🙂

      • Shan

        What if we want to android to android chat please guide

  • Venkata Prasad

    Thanks Ravi,
    From long time, I am looking for this.

  • jp

    I get as far as trying to run the server and get 404.

    HTTP Status 404 – /WebMobileGroupChatServer/

    type Status report

    message /WebMobileGroupChatServer/

    description The requested resource is not available.

    • jp

      from stackoverflow, this solved it for me,

      Click on Window > Show view > Server OR right click on the server in “Servers” view, select “Properties”.
      In the “General” panel, click on the “Switch Location” button.
      The “Location: [workspace metadata]” should replace by something else.
      Open the Overview screen for the server by double clicking it.
      In the Server locations tab , select “Use Tomcat location”.
      Save the configurations and restart the Server.

  • Ray

    Excellent work man, Got it all up and running in less than an hour with next to no java / droid experience. If you would like some paid work please get in touch.

  • Guest

    How To Set it up for godaddy hosting ??

    • You need to check their checklist whether they are providing sockets support or not.

  • Mohd Riyas

    totally error in android app project..!! give me a solution??

  • you can use socket.io ! node.js instead of TCP scoket! for backend!

  • daksh

    Hi Ravi

    Thanks for the tutorial, can we use PHP as server side instead of java ?

  • Srikanth Munaga

    Then how we can do if they are using different Ip’s

  • Andrew

    Is it possible for you to make some material design tutorials

  • Naveed

    Brilliant tutorial, can there be a login and register sytem? it would be wonderful!

  • Alex

    Great tutorial! Works fine, but i have one error when username is in cyrillic.

    For name “Алексей”, serverside threw to me this:
    __
    SEVERE: Servlet.service() for servlet [default] in context with path [/WebMobileGroupChatServer] threw exception
    java.lang.IllegalArgumentException: java.net.URISyntaxException: Illegal character in query at index 37: /WebMobileGroupChatServer/chat?name=???»?µ?????µ??
    __

    In mobile app I’ve tried to edit code in Main.activity and replace URLEncoder.encode(name) with URLEncoder.encode(name, “UTF-8”) , but it doesn’t help me =

    Any suggestions how to solve it?(

  • Arken

    We can make it work on desktop? Any suggest?

  • Kelvin

    i am getting the following error

    org.apache.http.client.HttpResponseException: Not Found

    any clue what the issue would be?

  • Raja Sekaran

    Great Tutorial..but better we need php in server side..Thanks anna..

  • Brom

    so good but I want save all chat history.

  • Dwi Marstya Wibowo

    Dear Ravi, how i can create more chat room ?
    Thanks

  • Juan

    Ravi, can you do some tutorials about Fragments? i say, i googled a lot about fragments tutorials(more than, for example, creating fragment tabs, post and show SQLite results to a ListView in one of those fragments, etc), really i need to know how to mannage this type of programming…a lot of people have problems to show things in the fragments and play with it…because now the fragments are better than more activities in one application, so..pleaseee

    • Levi Costa

      +1

  • Allay Khalil

    Hy i have implemented this tutorial its fine and working well on same laptop in two diffrent browser like (Google and firefox)but problem is there when i want to test this app web to mobile or mobile to mobile on same wifi connection because i’p address of android device and laptop are different , how i can test this app web to android mobile or two different device on same wife connection

    • Riz

      u must make one laptop to become server then on the same conecction such as wifi connection then on android code set ip with ip localhost laptop as server.

  • Allay Khalil

    Kindly email me with your answer in my mailbox (allaykhalil@gmail.com)

    or any one how can give me answer

  • J TechCentral

    Have you heard about Pars I’m using it for a chat apllication I am making https://parse.com/products/android

    • Levi Costa

      How it works?

    • dan li

      I tried it. it’s cool,with some delay

  • khalil b

    public class Ravi extends India implement code{
    public void main (String args[]){
    system.out.println(“Hello RAVI , you are Genious “);
    }
    }

    • mamadou pathé diallo

      Really awesome RAVI.

      He is such a great guy

      • Thank you 🙂

        • Khalil Serano

          can anyone help me ?

  • Dan

    hi Ravi,
    I import the project and followed all steps suggested here. I want communication between two android phones. I connected both of them with the same router. but I’m getting the error as below:
    “Error! : java.net.ConnectException: failed to connect to /192.168.x.x(port80): connect failed: ETIMEOUT(connection timeout)”. Is there anything that i’m missing?

    Anyone here who got the same error?! and successful to solve it?

    ~Thanks 🙂

  • janaki

    hi Ravi, how to integrate stickers in chat app .as my project needs stickers

  • okan

    can we add push notifications to this system with gcm ?

  • Дархан Журсин

    Hello everyone! can I change words to my native language?

    • Sumit

      Use Google translation

  • Kostas

    Is there any way to make it run only through android app without using desktop versions?

  • maniteja

    Hi,

    Thanks for your tutorial.

    here (webSocket.onopen ) is not firing when i am running the application.can you help me where i did the mistake.
    I am using eclipse j2ee and java version 1.6.

  • Rajendra

    Hi Ravi do you know how we can do android video chat(like this tutorial does text/image chat). What i want to do is the application like facetime. Is it possible do develop that application using android? Could you provide some opensource/sample or point to the right direction. Thankyou

  • Attaaa

    Hi,i follow your tutorial very nicee and thank you…i am new developer i want to make silent apps…i just want to make a button when i click on it my mobile going to silent mode and when i again press it will come in a normal mode..please plzz if u have any code about it..

  • Aman Gupta

    Hey Ravi,

    Thanks for amazing tutorial, I have used this trick for using node.js but my application is unable to get onMessage callback when some thing is returned to socket from node. Can you please help me out with this trouble.

    Thanks in advance.

  • Sumit

    Hey Ravi,
    I think this code works when the MainActivity is in foreground, do you have any idea how to maintain connection persistent through out the app, I am developing a chat application using SignalR android client and facing the above problem, i have defined connection in service class, but the problem is i every time i get the message i need to broadcast them to particular activity or fragment . Any better idea that this. Thanks in advance.

  • NIMA

    hi Ravi

    I import the project and followed all steps suggested here. I want
    communication between two android phones. I connected both of them with
    the same router. but I’m getting the error as below:
    “Error! :
    java.net.ConnectException: failed to connect to /192.168.x.x(port80):
    connect failed: ETIMEOUT(connection timeout)”. Is there anything that
    i’m missing?

    • prashant

      dude change the ip accordingly. not the ravi’s one.

  • کاظم از شیراز

    I import the project and followed all steps suggested here. I want
    communication between two android phones. I connected both of them with
    the same router. but I’m getting the error as below:
    “Error! :
    java.net.ConnectException: failed to connect to /192.168.x.x(port80):
    connect failed: ETIMEOUT(connection timeout)”. Is there anything that
    i’m missing?

    • What is the ip address of your system that is running tomcat server?

      • Joy

        samee error plz help me i changed my ip in WsConfig.java and main.js.i want to chat betwen two android app only plz help

  • 荣城 李

    I finished the Project following the above steps.But it’s found that my R file was lost.Dose there anyone have the same question.Forgive my Chinglish,thank you!

    • In Eclipse, go to Project -> Clean. It will generate R file again. Make sure that you don’t have any errors in xml files.

    • dan li

      Chinglish?haha.好不容易遇见中国人呢

  • smithy14

    Hi Ravi, great tutorial and worked perfectly.
    It would be great to know how would I go about transferring the server side onto a live server?

  • Jelqui

    Thank you this tutorial is amazing! and easy to understand +100

  • Duy

    how about I want to make an other is not the same Wifi network?

  • peoce

    Thank you very much. the tuition is very awesome. It’s helps my a lot.

  • kalle

    thanks for this great tutorial, but i have a question, i want to run this on my local Ubuntu server and access it with my mobile phone. if i run this programm over my pc it is running but when i start it over the server i get “Error! : org.apache.http.client.HttpResponseException: Not Found” what should i do?

    • thenoelb

      I’m having the same problem.

      • alex

        i have the same problem…. but i guess its the library socket

        • Omar

          i have same problem , what do you mean by the library socket ?
          is there is something that the host server doesn’t support comparing to localhost or what ?

          • Mike

            Hello, I see you put your app on the rhcloud.com. Please tell what was the var socket_url value that you set in main.js in server part. Thank you!

        • Omar

          Hello , I am extremely sorry for not sharing the solution that worked for me yet
          it was to check that if your host server is supporting socket connection or not you can do this by contacting your web host administration or search in their docs .

          If it supports socket connection ” my case was using openshift

          https://openshift.redhat.com/app/login?then=%2Fapp%2Fconsole

          then search for what port it use

          i found this link :

          https://blog.openshift.com/paas-websockets/

          i decided to use port 8000

          so i just changed URL_WEBSOCKET to :

          public static final String URL_WEBSOCKET =

          “ws://a1-app1.rhcloud.com:8000/WebMobileGroupChatServer/chat?name=”;

          and then android client worked greatly for me for connecting with my openshift server .

          I am very sorry again for not sharing the solution that worked for me before

    • Omar

      Hello kalle, I have this problem exactly when upload to my hosting also .
      did you find any solution ?

  • kláda

    So this application works only if devices are on same network ?
    Right ?

    • If you host the project online, it works like whatsapp over internet.

      • So, if i host this project in a server, say example.com, then what would be the web socket addrs instead “”ws://192.168.0.102:8080/WebMobileGroupChatServer/chat?name=” . ?

        • It would be ws://example.com/chat?name=” . ? (Assuming WebMobileGroupChatServer is home directory for example.com)

          • Ohkey dude 🙂

          • Wander Martinez

            how you solved, could you explain to me, I’m stuck there?

          • i heard that sockets works only in dedicated servers.
            I’m not sure about that.i just heard.

            The project worked fine for me when i put the project in my local tomcat server and gave my IP (ipconfig-cmd) in the socket address.

          • Sunny020

            Hie sir

            i am going thru ur article on ur site but got some prob now

            hope u can help me out

            here is the link – http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-2/

            In this i m getting error at few places in WebMobileGroupChat project

            1st i getting error in all three src> .java files

            R cannot be resolved to a variable in

            2nd i get error in MainActivity.java n MessagesListAdapter.java error as The type MainActivity is already defined and MessagesListAdapter cannot be resolved to a type

            Rest all code is error free…

            hope u will help me out soon..

            thnx…

          • cannot connect to websocket. 🙁 help me

          • so where’s the port number and ip ??

  • Hanan Lipskin

    i’m having some troubleshoot with this app (i guess its something really simple that i missed), could someone please help me out on skype?
    please?

  • eric

    Hi Ravi, Thank you very much for this tutorial

    I want to send data to particular user using sockets.

    I am working on application were i need to send some data to specific user without much of delay. Actualy I have more then 1000 users who are online out of those I want to select one user and send the data to him only.

    I had two solution

    1.current implementation=>

    So far I am using push notification for this purpose I get the user’s device Id and send notification to him but problem is push notification(sending/receiving) depend on my server and GCM server so it get delayed sometime(I observed sometime it gets delayed by 5 min also).

    2.Not implemented=>

    Another option is to run thread continuously to check any msg is arrived, if arrived check if whether is meant for same user or not,if he is targeted user then show the data else discard .But here also problem is even if this msg dose not belong to that user one need to check the condition and then discard.

    Do you have a solution ?

    thanks in advance

  • Guest

    Hi Ravi, Thank you very much for this tutorial.
    I want to display the emotion in message. can you give me someways to do. 🙂

    • I think the easiest way is using an truetype font that includes Smileys!

    • Monica

      in my app messages are not displayed which are sent and received what should i do???

  • Rauzan

    hello ravi i cannot open webSocket = new WebSocket(“ws://” + socket_url + “:” + port

    + “/WebMobileGroupChatServer/chat?name=” + name);

    i use alert(WebSocket);

    and alert is undefined;

    please help me.

    • I guess the variable name is case sensitive. Call alert(webSocket); (w is small letter)

  • Hi Ravi. I’m trying to send pictures using this chat. I’m doing as follows:
    Transform the bitmap image in String, create a new flag called photo and send to the server. I managed to send very small pictures, but when I send photos of 5 MB it gives an error saying that the text is too large and can not be sent by parts. Do you have any solution for this?

    • Sunny020

      Hello bro

      i am going thru ur article on ur site but got some prob now

      hope u can help me out

      here is the link – http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-2/

      In this i m getting error at few places in WebMobileGroupChat project

      1st i getting error in all three src> .java files

      R cannot be resolved to a variable in

      2nd i get error in MainActivity.java n MessagesListAdapter.java error as The type MainActivity is already defined and MessagesListAdapter cannot be resolved to a type

      Rest all code is error free…

      hope u will help me out soon..

      thnx…

    • Annesa

      Hey, I intend to doing same thing send any picture/file using those chat, could you help me please? or send me the tutorial to doing that.
      contact me at anisa.lestari@hotmail.com
      thanks

  • Hosein

    hi ravi
    your tuts is so good,tanx for that
    i want to develop a video app
    but i cant find good reference or good tutarial for that
    can u say what can i do?
    tnx so much!!!

    • can you tell me more about your app, what video app? is it like youtube?

      • Hosein

        No thats like viber or line video call
        may app is a chat app for contact between a company persons

        • I think cometchat, arrowchat and etc. may help you.
          you can create this with javascript and html in cordova platform

  • thank you, i wait for you to complete this project and create a full features chat application.

  • Khalil Serano

    i have problems on NameActivity.java on these 3 lines : setContentView(R.layout.activity_name);

    btnJoin = (Button) findViewById(R.id.btnJoin);

    txtName = (EditText) findViewById(R.id.name);

    and other problem on activity_main.xml on this line : android:text=”@string/hello_world” />

    • Aditi

      I’m also getting same problem. Are u able to resolve it ?

      • Khalil Serano

        unfortunately not

        • Aditi

          okay! Whenever u get the solution plz let me know!!

    • Abeer Ali

      Replace android:text=”@string/hello_world” with android:text=”Hello World”

      • Khalil Serano

        okay

  • James

    Thanks so much. That’s what I need 🙂

  • Yamini

    Hello Ravi, Thanks for this great tutorial, but i have a question, i want to run this on my local server and access it with my mobile phone. if i run this program over my pc it is running but when i start it over the server i get “Error! : org.apache.http.client.HttpResponseException: Not Found” what should i do? Please Help me

    • Omar

      Hello , I have this problem exactly when upload to my hosting also .
      did you find any solution ?

      • Bekarys

        Hello Omar, so, did you find any solution?)

        • Omar

          Hello Bekarys ,
          I am extremely sorry for not sharing the solution that worked for me yet , yes I found it .
          it was to check that if your host server is supporting socket connection or not you can do this by contacting your web host administration or search in their docs .
          If it supports socket connection ” my case was using openshift
          https://openshift.redhat.com/app/login?then=%2Fapp%2Fconsole
          then search for what port it use
          i found this link :

          https://blog.openshift.com/paas-websockets/

          i decided to use port 8000

          so i just changed URL_WEBSOCKET to :

          public static final String URL_WEBSOCKET =
          “ws://a1-app1.rhcloud.com:8000/WebMobileGroupChatServer/chat?name=”;

          and then android client worked greatly for me for connecting with my openshift server .

          I am very sorry again for not sharing the solution that worked for me before

  • Hey Ravi, i hosted the WebMobileGroupChatServer . but its not connecting to the websocket.

  • Wander Martinez

    Hello, good guide. I did everything work locally but now I would like to upload it to my hosting, example.com. Now that door and I have to put ip? could you explain why I get this error: org.apache.http.client.httpresponseexception: not found.
    I loaded the whole folder in my hosting server, but I can not to communicate. I tried to get on the web and funciona everything but not in the mobile app.
    help me please

    • Omar

      Hello , I have this problem exactly when upload to my hosting also .
      did you find any solution ?

      • Omar

        I am extremely sorry for not sharing the solution that worked for me yet
        it was to check that if your host server is supporting socket connection or not you can do this by contacting your web host administration or search in their docs .

        If it supports socket connection ” my case was using openshift

        https://openshift.redhat.com/app/login?then=%2Fapp%2Fconsole

        then search for what port it use

        i found this link :

        https://blog.openshift.com/paas-websockets/

        i decided to use port 8000

        so i just changed URL_WEBSOCKET to :

        public static final String URL_WEBSOCKET =

        “ws://a1-app1.rhcloud.com:8000/WebMobileGroupChatServer/chat?name=”;

        and then android client worked greatly for me for connecting with my openshift server .

        I am very sorry again for not sharing the solution that worked for me before

    • Sunny020

      Hello sir

      i am going thru ur article on ur site but got some prob now

      hope u can help me out

      here is the link – http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-2/

      In this i m getting error at few places in WebMobileGroupChat project

      1st i getting error in all three src> .java files

      R cannot be resolved to a variable in

      2nd i get error in MainActivity.java n MessagesListAdapter.java error as The type MainActivity is already defined and MessagesListAdapter cannot be resolved to a type

      Rest all code is error free…

      hope u will help me out soon..

      thnx…

    • Omar

      Hello all , I am extremely sorry for not sharing the solution that worked for me yet
      it was to check that if your host server is supporting socket connection or not you can do this by contacting your web host administration or search in their docs .

      If it supports socket connection ” my case was using openshift

      https://openshift.redhat.com/app/login?then=%2Fapp%2Fconsole

      then search for what port it use

      i found this link :

      https://blog.openshift.com/paas-websockets/

      i decided to use port 8000

      so i just changed URL_WEBSOCKET to :

      public static final String URL_WEBSOCKET =

      “ws://a1-app1.rhcloud.com:8000/WebMobileGroupChatServer/chat?name=”;

      and then android client worked greatly for me for connecting with my openshift server .

      I am very sorry again for not sharing the solution that worked for me before

  • SID MALLAH

    how to make NameActivity.java as launcher activity in AndroidManifest.xml.

    any one please explain me pleaseee

    • Talha

      put this code in the activity tag of your desired launch activity in your manifest.

  • Guest

    This application is working fine in the wifi or lan when i converted to mobile data its not working may i know the changes required to make it work on everywhere??

    • Talha

      I think you will have to upload your server side code on a proper server with hosting and all, so that you can use the app when ever you want.

  • window iam

    how to image send ?

  • I noticed that you’re initializing LayoutInflater in getView() of MessageListAdapter.
    I think it will initialize the inflater when getView get called,isn’t?
    So my quistion is – “Can we initialize the inflater in the Constructor??”,”Does it cause any problems in future?”

  • Guest

    onMesssage() is not listening to my incoming message

  • Kadir Abdul

    how to send ping and receive pong ?

  • Furkan Çetinkaya

    download code link problem help me ?

    • Please try now.

      • Sunny020

        Hello sir

        i am going thru ur article on ur site but got some prob now

        hope u can help me out

        here is the link – http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-2/

        In this i m getting error at few places in WebMobileGroupChat project

        1st i getting error in all three src> .java files

        R cannot be resolved to a variable in

        2nd i get error in MainActivity.java n MessagesListAdapter.java error as The type MainActivity is already defined and MessagesListAdapter cannot be resolved to a type

        Rest all code is error free…

        hope u will help me out soon..

        thnx…

  • hi, I’ve gotten the app to work and the mobile website to work. Now i would like to use it to where a user doesn’t have to be connected to my network to chat. I’m assuming I have “host the project on a website” I have http://www.clxxxii.com How can i host it to my site. DO i just host the index page or the whole project. I’ve never done this before?

  • Bilal Halayqa

    Cannot download in both part’s links 🙁 please help …

  • susheel

    does this app allos to chat with pople on different netorks?

  • Ravi, I want to add a parameter an extra parameter..

    sendMessageToServer(utils.getSendMessageJSONXD(inputMsg

    .getText().toString(), superString), superString);

    see.. superString is the value i want to dictate which picture to show. I check my shared preferences tp check which picture to show.

    superString = (sharedPrefs.getString(“prefSyncAvatar”, “1”));

    so say if the value for superString = (sharedPrefs.getString(“prefSyncAvatar”, “1”)); was.. 4

    then i want to build the message.. to show a particular picture according to the number sent by the server..

    I’ve added a constructor with the values from the FB tutorial.

    // Message m = new Message(fromName, message, isSelf);

    Message m = new Message(fromName, message, isSelf, id, name,

    image, status, profilePic, timeStamp, url);

    when i try to pass a value to

    String id = jObj.getString(“id”);

    but id is null

    public String getSendMessageJSONXD(String message, String whichPicIndex) {

    String json = null;

    try {

    JSONObject jObj = new JSONObject();

    jObj.put(“flag”, FLAG_MESSAGE);

    jObj.put(“sessionId”, getSessionId());

    jObj.put(“message”, message);

    jObj.put(“id”, id);

    json = jObj.toString();

    } catch (JSONException e) {

    e.printStackTrace();

    }

    return json;

    }

  • Aditi

    Hi Ravi,
    I’m getting 2 errors in the WebMobileGroupChat section.
    1. in res -> values-v11->styles.xml

    error: Error retrieving parent for item: No resource found that matches the given name
    ‘Theme.AppCompat.Light’.

    2. R value cannot be resolved. I’ve done every possible solution available on the internet, but it is not working. Finally, I used ctrl+shift+O to import required files, but R file isn’t there in the gen folder and also it has further generated lots of new errors.

    Kindly revert back!

    • Dazzler Jeet

      Add appcompat_v7 library

  • Dhina19

    how i create multiple groups

  • Mohit

    Hello Ravi,

    Can you tell me how to make the java server.

    I mean , suppose if i have a website -www.abc.com ..

    Then, how to make these java j2ee files working on the web server.

    I have not done it before.

    Thanks in advance.

    • Install Apache Tomcat server in your hosting or in your VPS. Then Export the web application as WAR file from Eclipse. Open apache tomcat manager console in your browser. Deploy the WAR file. Now you can use your web application from your server link 🙂 I hope it helps.

  • Ali

    how to add group chat in this application
    any help ??

  • Avinash Pandey

    i am done with web chat application.Its working correctly,but when i was trying to import your android project with web socket libraryin my workspace,its showing many errors.how to resove it?

  • Bycoja

    First of all, great looking app and very good tutorial. However, although I may very well be wrong, I think there are some potential problems with this implementation. Establishing the websocket connection in the onCreate callback of the activity doesn’t quite strike me as the way to go because we are still executing on the ui thread. Even if the websocket library takes care of this and starts a separate thread, the websocket connection – being tied to the activity – is lost once the activity is killed of by the android system to free resources or the device orientation changes. Also, there is no reason to connect if there is no network available in the first place. I feel like an approach using SyncAdapter would fit quite well here. Have you considered using some of the async components provided by the android framework?

  • Joseph

    if the devices are not connected to the same wifi, how will that be done?

    • Dima Kovalenko

      You will need to provide valid global IP address. 192.168.0.3 is IP address in your local network, so the app only works if device is also connected to local network.

      • Monica

        Please help me m not able to display the messages that are sent and received……I had copy paste the same code….what should i do????

  • Ajit

    i’m getting this error..
    Error! : org.apache.http.client.HttpResponseException: Not Found
    how to fix it?

  • JoJo

    i could not add the library from github…
    Help me how to add library in andriod studio

  • Hitesh

    this application used only wifi connected

    • Guest

      just copy it in the library folder or search how to add external library on android studio

  • jojo

    This project is not compatable for andriod studio?

  • WaWaToR

    Hello everyone. does any one know how to set this up on a webserver? So that it works on the go.
    Thank you

    • I think you can apply for virtual host services,such as Sina App Engine(free) In china, you can build J2EE application, then replace “192.0…” with your domain,

  • Kamal

    I want to run the app on the device. What string should I write In WsConfig.java in order to that???

  • Jonathan

    Why it is not working on my S3 android mobile but its working on the emulator on my laptop? Can someone help me please

  • Akhazhu Chiisiina

    Hello Sir ..I want to build the same app you did here but want it to work only through wifi connection and not those internet things…Like peer2peer through a wifi network from two or more android devices..can you please help out?

  • Yaniv

    After battling with the code i managed to run it perfectly!!! 🙂
    Thanks!!!

  • Can you please tell me how to run it on Android Studio ???

  • Romi Swara

    I wanna try to implement that code in android studio ,. but I wonder what that code is work well in android studio

  • Jigar Jims

    Hi i am facing Could not find class ‘com.codebutler.android_websockets.WebSocketClient’ problem,Please help me ravi

  • Trí Minh

    i run application with eclipse but i can’t chat. message isn’t show. plz help me

  • Hemanth

    how to create the same app in android studio plz any one help me

  • Palli Hemanth

    Can any one help me i am trying to make this app but i can’t get the chat symbol like in the above screen shot

  • Palli Hemanth

    Where can i put imglogo image in drawable or not?

  • Hanu

    I am not getting Android web sockets library for eclipse(I think that is for android studio) please check once, when I import the library into my eclipse it shows no Projects are there to import..

  • Akali

    I am getting a warning here

    client = new WebSocketClient(URI.create(WsConfig.URL_WEBSOCKET
    + URLEncoder.encode(name)), new WebSocketClient.Listener()

    The encode is striked out and it says “The method encode(String) from the type URLEncoder is deprecated” and i tried it using with US-ASCII but nothing happened it prompts to use a try and catch block around it. BTW is use new eclipse

    • amol

      1. Go to websocket library and edit its manifest file, remove target sdk= XX, or replace it with your target SDK.
      2. Encode method has been deprecated, use encode(“your current string”,”UTF-8″ ), do the necessary changes everywhere required..

  • New

    Is it possible to make chat rooms in it??

  • Mokib Khan

    I am not able to send message and getting following error while adding following code in yours ..

    private void sendMessageToServer(String message) {

    if (client != null && client.isConnected()) {

    client.send(message);

    }

    else

    {

    Toast.makeText(this,”client==null or not connected”,Toast.LENGTH_SHORT).show();

    }

    }

    every time when i press send button ..toast “client==null or not connected” prints on screen.

    can anyone help me out this …. Appreciated 🙂

    • amol

      1. Go to websocket library and edit its manifest file, remove target sdk= XX, or replace it with your target SDK.

  • Very helpful article can you provide same using GCM please.

    Interview Cracker for Android

  • pop

    android websockets library library is deprecated can u show with new library

    • Rishika Kapur

      Did you find the solution for android websockets? I also stuck on the same step.

      • amol

        1. Go to websocket library and edit its manifest file, remove target sdk= XX, or replace it with your target SDK.
        2. Encode method has been deprecated, use encode(“your current string”,”UTF-8″ ), do the necessary changes everywhere required..

  • Rishika Kapur

    I am building this chat app in Android Studio. I am on the step no. 17. The android websockets library you mentioned is already deprecated, please tell me the alternative to this library and instructions to import and add this library in Android Studio.

    Waiting for the solution. Please help, thanks.

  • Roman Roy Piazzi

    For all the people trying to host this application online:
    After trying for a while i figured out how to make this work even without being connected to the same Wi-Fi connection.
    Find an online hosting company who offers Tomcat v7 and WebSocket services for java application. (I used OpenShift for this purpose)
    Compile the application in eclipse and export the .WAR file ( file menu –> Export –> .WAR). Upload the .WAR file to your server using the User’s manual for the specific instructions depending on your hosting company. Then you just have to change the WebSocket addresses in “main.js” and “WsConfig” to match your new online server. For this purpose you will need to verify which port your host company uses to send and receive WebSockets (In my case was port 8000 for normal WebSockets and port 8443 for secured WebSockets). Then write your WebSocket URL as follows:
    If, suppose, i have a server at “onlinesocketchat.com” and my .WAR file is named “onlineSocketChat.WAR” the WebSocket URL will be composed as follows:

    ” ws://onlinesocketchat.com:/onlineSocketChat/chat?name=”
    Hope this helps someone who’s been struggling on this as I did!

    • Cholly Cholly

      Hi. I did step by step what you say without any success. I loaded the page fine, but when it comes to the chat room session goes blank. Please help me!

      Thanks in advance!

    • Mike

      Hello, I see you put your app on the cloud. Please kindly tell what
      was the var socket_url value that you set in main.js in server part.
      I’ve tried using localhost, my hosted apps’s domain, other IP’s etc., but nothing works. Only the Name window opens and when I enter name the app can’t connect to socket. Thank you!

    • Nirav Jain

      Successfully hosted online..
      Now problem with Websocket library in android studio..
      can some one post new MainActivity.java code
      from Koush AndroidAsync

    • Zubi Khan

      The app is working fine on localhost..but after deploying .war file on hosting server it’s not working…First screen appears but after that chat window doesn’t show up.. I’m getting this Error ” WebSocket connection to ‘ws://www.example.com/GroupChats/chat?name=Nikki’ failed: Error during WebSocket handshake: Unexpected response code: 404″

  • GreenJay

    Thank you for your example. (Sorry for my english)
    l am buiIding in Android Studio, almost everything was done right the first time. I had to tinker with the addition websockets library: as I could not connect the library with the Studio, I just copied the package library to my project. And I changed id for EditText on activity_name.xml from name to name1, because my app is shut.
    I have installed on two phone. But I have a bug:
    java.net.ConnectException:failed to connect to /192.168.0.109( ip adress phone,which i use as server) (port 8080) after 90000ms:isConnected failed:ECONNREFUSED (Connection refuse)
    Can any help ?)

    • Khoa Hansamu

      I also meet same issue

  • abdullah

    Why we are getting socket

  • abdullah

    Why are we getting socket exception?

  • Shubham

    It’s working but is there any code to fetch server IP automatically instead of changing it everytime?

  • Mohamad Javad A Salehi

    Hi, i made this chat step by step ,and project run and come up fine , but finally i have a problem that is : when i enter my name and click on JOIN button the application toast display this expression => Error! : org.apache.http.client.HttpResponseException: Not Found
    Can any help me ? thanks!

  • Axel Olaf

    Hello, does anyone knows what if I use mobile data instead of the same wifi network? Thanks¡

  • Oscar Eduardo Delgado Balleste

    anybody knows how to do, a personal chat, but not a chat room, like whatsapp.. or chat in the web page, when the comunication is person to person.

  • Raj kumar

    how do i send and receive image through this library

  • Chethan Sreenivasa

    how to add Theme.AppCompat.Light to the project in eclipse

  • Raj kumar

    you can import the library from D:adt-bundle-windows-x86_64sdkextrasandroidsupportv7appcompat in your project

  • Monica

    I am not able to display the message that are sent and received…………I have copy paste the above code………..what changes i need to do????

  • Monica

    Please reply soon..!!!!!!!!!!!!!!!!!!

    • The love of your life

      You should use all the FileNames he used in the project EXACTLY!!!. And it will work 😀 i struggled with it for 1 week until i realised i dint used the projectname that he used.

      • monica

        i have used the same

  • Monica

    java.net.ConnectException:failed to connect to /192.168.0.109( ip adress phone,which i use as server) (port 8080) after 90000ms:isConnected failed:ECONNREFUSED (Connection refuse)

    This is my error Help me

    • Nikhil

      Did you figured it out yet?

      • Monica

        no

  • Isaac Ayetoro

    How can I send attached files like photos, audio and video via this web socket from Mobile to web app and mobile to mobile…?

  • Shillow

    Please how do I add the android websockets library in android studio ???? (the gradle/maven repository was not given at github since android websocktes is now deprecated by androidSync)

    I have been following your tutorials ever since I started android app development and trust me, you have really helped me in so many different ways, may God richly bless you.

    • Kapil Kapri

      Hi Shillow , follow the following steps :

      1) Add dependency

      compile ‘com.koushikdutta.async:androidasync:2.+’

      2) Create a new Activity ,

      (a) define following fields

      private AsyncHttpClient.WebSocketConnectCallback mWebSocketConnectCallback;
      private AsyncHttpClient mAsyncHttpClient;
      private WebSocket msocket = null;
      private String stringData;

      (b) call connectSocket() ; method in oncreate method

      (c) bellow is the implementation code :
      private void connectSocket() {

      new AsyncTask() {
      @Override
      protected Void doInBackground(Void… params) {

      mWebSocketConnectCallback = new AsyncHttpClient.WebSocketConnectCallback() {

      @Override
      public void onCompleted(Exception ex, WebSocket webSocket) {
      msocket = webSocket;

      if (ex != null) {
      ex.printStackTrace();
      return;
      }
      webSocket.send(“a string”);
      webSocket.send(new byte[10]);
      webSocket.setStringCallback(new WebSocket.StringCallback() {
      public void onStringAvailable(String s) {

      stringData = s;
      messageHandler.sendEmptyMessage(0);
      }
      });

      }

      };

      mAsyncHttpClient = AsyncHttpClient.getDefaultInstance();
      mAsyncHttpClient.websocket(url, null, mWebSocketConnectCallback);

      return null;
      }
      }.execute();

      }

      private Handler messageHandler = new Handler() {
      public void handleMessage(Message msg) {
      super.handleMessage(msg);
      System.out.println(“I got a string: ” + stringData);

      // adapter.notifyDataSetChanged();
      }
      };

    • Kapil Kapri

      import android.app.Activity;
      import android.media.Ringtone;
      import android.media.RingtoneManager;
      import android.net.Uri;
      import android.os.AsyncTask;
      import android.os.Bundle;
      import android.os.Handler;
      import android.os.Message;
      import android.view.View;
      import android.widget.ListView;

      import com.koushikdutta.async.ByteBufferList;
      import com.koushikdutta.async.DataEmitter;
      import com.koushikdutta.async.callback.CompletedCallback;
      import com.koushikdutta.async.callback.DataCallback;
      import com.koushikdutta.async.http.AsyncHttpClient;
      import com.koushikdutta.async.http.WebSocket;

      import org.json.JSONException;
      import org.json.JSONObject;

      import java.util.ArrayList;
      import java.util.List;

      /**
      * Created by kapilkapri on 09/10/15.
      */
      public class AndroidAsyncTestAcivity extends Activity {

      private static final String TAG = “AndroidAsyncTestAcivity”;
      private AsyncHttpClient.WebSocketConnectCallback mWebSocketConnectCallback;
      private AsyncHttpClient mAsyncHttpClient;
      private WebSocket msocket = null;
      private String url = “ws://abstestURL”;
      private String stringData;

      // Chat messages list adapter

      // private CardsListAdapter adapter;
      private List listCards;
      private ListView listViewCards;

      private void start() {

      new AsyncTask() {
      @Override
      protected Void doInBackground(Void… params) {

      mAsyncHttpClient = AsyncHttpClient.getDefaultInstance();
      mAsyncHttpClient.websocket(url, null, mWebSocketConnectCallback);

      return null;
      }
      }.execute();

      }

      private Handler messageHandler = new Handler() {
      public void handleMessage(Message msg) {
      super.handleMessage(msg);
      System.out.println(“I got a string: ” + stringData);

      // adapter.notifyDataSetChanged();
      }
      };

      @Override
      public void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      listCards = new ArrayList();

      /* listViewCards = (ListView) findViewById(R.id.list_view_messages);
      adapter = new CardsListAdapter(this, listCards);
      listViewCards.setAdapter(adapter);*/

      mWebSocketConnectCallback = new AsyncHttpClient.WebSocketConnectCallback() {

      @Override
      public void onCompleted(Exception ex, WebSocket webSocket) {
      msocket = webSocket;

      if (ex != null) {
      ex.printStackTrace();
      return;
      }
      sendMessageToServer(“a string”);
      sendMessageToServer(new byte[10]);

      msocket.setStringCallback(new WebSocket.StringCallback() {
      public void onStringAvailable(String s) {

      stringData = s;
      messageHandler.sendEmptyMessage(0);
      }
      });
      msocket.setDataCallback(new DataCallback() {
      public void onDataAvailable(DataEmitter emitter, ByteBufferList byteBufferList) {
      System.out.println(“I got some bytes! data”);
      // note that this data has been read
      byteBufferList.recycle();
      }
      });

      msocket.setClosedCallback(new CompletedCallback() {
      @Override
      public void onCompleted(Exception arg0) {
      onConnectionClosed(arg0);
      }
      });
      }
      };
      }

      public void sendMessageToServer(String msg) {
      try {
      if (null != msocket && !msocket.isOpen()) {
      msocket.send(msg);
      }
      } catch (Exception e) {
      e.printStackTrace();
      }
      }

      public void sendMessageToServer(byte[] msg) {
      try {
      if (null != msocket && !msocket.isOpen()) {
      msocket.send(msg);
      }
      } catch (Exception e) {
      e.printStackTrace();
      }
      }

      public void startSocket(View v) {
      if (null == msocket) {
      start();
      }
      }

      public void closeSocket(View v) {
      try {
      if (null != msocket && msocket.isOpen()) {
      msocket.close();
      msocket = null;
      }
      } catch (Exception e) {
      e.printStackTrace();
      }
      }

      public void pauseSocket(View v) {

      }

      public void resumeSocket(View v) {

      }

      private void onConnectionClosed(Exception ex) {
      System.out.println(“connnection closed !”);
      }

      @Override
      protected void onDestroy() {
      super.onDestroy();
      {
      try {
      if (null != msocket && msocket.isOpen()) {
      msocket.close();
      msocket = null;
      }
      } catch (Exception e) {
      e.printStackTrace();
      }
      }
      }

      /**
      * Appending message to list view
      */
      private void appendCards(final String m) {
      runOnUiThread(new Runnable() {

      @Override
      public void run() {
      listCards.add(m);

      // adapter.notifyDataSetChanged();

      // Playing device’s notification
      playBeep();
      }
      });
      }

      /**
      * Plays device’s default notification sound
      */
      public void playBeep() {

      try {
      Uri notification = RingtoneManager
      .getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
      Ringtone r = RingtoneManager.getRingtone(getApplicationContext(),
      notification);
      r.play();
      } catch (Exception e) {
      e.printStackTrace();
      }
      }
      }

    • Kapil Kapri

      Refer the below site

      http://koush.com/AndroidAsync

  • Shillow

    Please how do I add the android websockets library in android studio
    ???? (the gradle/maven repository was not given at github since android
    websocktes is now deprecated by androidSync)I have been following
    your tutorials ever since I started android app development and trust
    me, you have really helped me in so many different ways, may God richly
    bless you.

    • rafael rocha

      just add the two java class hybiparser and websocketclient and that make it work

      • Shillow Collins

        Thanks very much, could you please send me those 2 java code via shillowc@gmail.com,
        Thanks again

        • rafael rocha

          hi sorry about time, you already could make it work?if not please send me a mail to: ralph.8809@gmail.com

  • Guodong Sun

    Haven’t tried it but a fantastic example! Thanks for sharing!

    • You are welcome.

      • Syarif Ibnu Miftahudin Al-Dami

        Hey Ravi, I have problem following your first post which is to make server socket. Whenever I try to run in server, it says

        HTTP Status 404 – /WebMobileGroupChatServer/

        type Status report

        message /WebMobileGroupChatServer/

        description The requested resource is not available.

        Apache Tomcat/8.0.26

        Please help. Thanks in advance

        • Olaniyi Ayeni

          Here the solution to your erroe @syarifibnumiftahudinaldami:disqus . I also encountered the same error but solved it this way. Your index.html, main.js, style.css and jquery files should be outside the WEB-INF directory inside the WebContent folder. Enjoy.

        • hamid khaksar

          Just Restart the Server , if not work add new Server and Run as the new server .

          IF not Working again 😀 download Tomcat 7 and use tomcat 7 😀

  • eng non

    Please help me solving this problem MainActivity Error! : org.apache.http.client.HttpResponseException: Not Found even i do the same as you do in steps

    • Can you paste your complete error log here

      • eng non

        09-08 13:24:11.829: E/Trace(8558): error opening trace file: No such file or directory (2)

        09-08 13:24:22.277: E/MainActivity(8558): Error! : org.apache.http.client.HttpResponseException: Not Found

        • Tarun Voora

          how to solve this ?

      • eng non

        09-08 13:24:11.829: E/Trace(8558): error opening trace file: No such file or directory (2)

        09-08 13:24:22.277: E/MainActivity(8558): Error! : org.apache.http.client.HttpResponseException: Not Found

  • sina iran

    hi my friend. tnx for share realy good example. if u dont mind explain about this problem:

    HTTP Status 404 – /WebMobileGroupChatServer/

    type Status report

    message /WebMobileGroupChatServer/

    description The requested resource is not available.

    Apache Tomcat/8.0.26

    Thanks in advance

  • Amit yadav

    hi ravi can we add also image sharing like whatsapp ?

  • ph

    I am getting this error “isConnected() is unresolved method”. Can anyone tell me how to solve this problem.

  • Nikunj Patel

    Hello Ravi,
    you define this from WEB to Android if i want to make a demo for android to android chat demo what should i have to change in this URL_WEBSOCKET.?

    String URL_WEBSOCKET = “ws://192.168.0.102:8080/WebMobileGroupChatServer/chat?name=”;

    Thank you in advance.

  • Junaid Fahad

    Hello Ravi,

    I am trying to run this code on genymotion. Web app run well but problem with this one.

    Below is my error log

    10-05 12:21:23.932: E/MainActivity(2062): Error! : java.net.ConnectException: failed to connect to /192.168.56.1 (port 8080): connect failed: ETIMEDOUT (Connection timed out)

    • Tarun Voora

      did u get it ? how please tell me

  • Kapil Kapri

    Hi All ,

    Since android websocktes is now deprecated by androidSync , use AndroidAsync library

    http://koush.com/AndroidAsync

    • Rahul

      Hi added androidasync library in my project, but i’m getting error
      Compile method not availble,
      Can you please help me with this

      • Rahul

        Error –

        Error:(39, 13) error: cannot find symbol class WebSocketClient

        Error:(91, 22) error: cannot find symbol class WebSocketClient

        Error:(92, 64) error: package WebSocketClient does not exist

        Note: MainActivity.java uses or overrides a deprecated API.

        • Kapil Kapri

          Hi Rahul ,

          please find the code

          import android.app.Activity;
          import android.media.Ringtone;
          import android.media.RingtoneManager;
          import android.net.Uri;
          import android.os.AsyncTask;
          import android.os.Bundle;
          import android.os.Handler;
          import android.os.Message;
          import android.view.View;
          import android.widget.ListView;

          import com.koushikdutta.async.ByteBufferList;
          import com.koushikdutta.async.DataEmitter;
          import com.koushikdutta.async.callback.CompletedCallback;
          import com.koushikdutta.async.callback.DataCallback;
          import com.koushikdutta.async.http.AsyncHttpClient;
          import com.koushikdutta.async.http.WebSocket;

          import org.json.JSONException;
          import org.json.JSONObject;

          import java.util.ArrayList;
          import java.util.List;

          /**
          * Created by kapilkapri on 09/10/15.
          */
          public class AndroidAsyncTestAcivity extends Activity {

          private static final String TAG = “AndroidAsyncTestAcivity”;
          private AsyncHttpClient.WebSocketConnectCallback mWebSocketConnectCallback;
          private AsyncHttpClient mAsyncHttpClient;
          private WebSocket msocket = null;
          private String url = “ws://abstestURL”;
          private String stringData;

          // Chat messages list adapter

          // private CardsListAdapter adapter;
          private List listCards;
          private ListView listViewCards;

          private void start() {

          new AsyncTask() {
          @Override
          protected Void doInBackground(Void… params) {

          mAsyncHttpClient = AsyncHttpClient.getDefaultInstance();
          mAsyncHttpClient.websocket(url, null, mWebSocketConnectCallback);

          return null;
          }
          }.execute();

          }

          private Handler messageHandler = new Handler() {
          public void handleMessage(Message msg) {
          super.handleMessage(msg);
          System.out.println(“I got a string: ” + stringData);

          // adapter.notifyDataSetChanged();
          }
          };

          @Override
          public void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);

          listCards = new ArrayList();

          /* listViewCards = (ListView) findViewById(R.id.list_view_messages);
          adapter = new CardsListAdapter(this, listCards);
          listViewCards.setAdapter(adapter);*/

          mWebSocketConnectCallback = new AsyncHttpClient.WebSocketConnectCallback() {

          @Override
          public void onCompleted(Exception ex, WebSocket webSocket) {
          msocket = webSocket;

          if (ex != null) {
          ex.printStackTrace();
          return;
          }
          sendMessageToServer(“a string”);
          sendMessageToServer(new byte[10]);

          msocket.setStringCallback(new WebSocket.StringCallback() {
          public void onStringAvailable(String s) {

          stringData = s;
          messageHandler.sendEmptyMessage(0);
          }
          });
          msocket.setDataCallback(new DataCallback() {
          public void onDataAvailable(DataEmitter emitter, ByteBufferList byteBufferList) {
          System.out.println(“I got some bytes! data”);
          // note that this data has been read
          byteBufferList.recycle();
          }
          });

          msocket.setClosedCallback(new CompletedCallback() {
          @Override
          public void onCompleted(Exception arg0) {
          onConnectionClosed(arg0);
          }
          });
          }
          };
          }

          public void sendMessageToServer(String msg) {
          try {
          if (null != msocket && !msocket.isOpen()) {
          msocket.send(msg);
          }
          } catch (Exception e) {
          e.printStackTrace();
          }
          }

          public void sendMessageToServer(byte[] msg) {
          try {
          if (null != msocket && !msocket.isOpen()) {
          msocket.send(msg);
          }
          } catch (Exception e) {
          e.printStackTrace();
          }
          }

          public void startSocket(View v) {
          if (null == msocket) {
          start();
          }
          }

          public void closeSocket(View v) {
          try {
          if (null != msocket && msocket.isOpen()) {
          msocket.close();
          msocket = null;
          }
          } catch (Exception e) {
          e.printStackTrace();
          }
          }

          public void pauseSocket(View v) {

          }

          public void resumeSocket(View v) {

          }

          private void onConnectionClosed(Exception ex) {
          System.out.println(“connnection closed !”);
          }

          @Override
          protected void onDestroy() {
          super.onDestroy();
          {
          try {
          if (null != msocket && msocket.isOpen()) {
          msocket.close();
          msocket = null;
          }
          } catch (Exception e) {
          e.printStackTrace();
          }
          }
          }

          /**
          * Appending message to list view
          */
          private void appendCards(final String m) {
          runOnUiThread(new Runnable() {

          @Override
          public void run() {
          listCards.add(m);

          // adapter.notifyDataSetChanged();

          // Playing device’s notification
          playBeep();
          }
          });
          }

          /**
          * Plays device’s default notification sound
          */
          public void playBeep() {

          try {
          Uri notification = RingtoneManager
          .getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
          Ringtone r = RingtoneManager.getRingtone(getApplicationContext(),
          notification);
          r.play();
          } catch (Exception e) {
          e.printStackTrace();
          }
          }
          }

        • Kapil Kapri

          Add dependency

          compile ‘com.koushikdutta.async:androidasync:2.+’

  • Ankit Tale

    Hi Ravi,Thanks for this tutorial it help lot understand the working of socket but I am facing problem in using AndroidAsync can you please elaborate this tutorial

  • Raj

    Hi Ravi!
    First of all i thank you very much.
    I have achieve my chatting app in ANDROID as you guide on this tutorial. But now i wants to develop the same logic in IOS (SWIFT) too, is there any IOS version of this library for to achieve this?,
    i am facing problem to find the way on this.
    Can you guide me please!

    Thank You..,

    (raj.mscking@gmail.com)

  • tulasi ram

    hi all,
    where chatting data will be store(here data base is not used).how to store names, chatting data in MySQL database.can any one tell me what’s the process?

  • Rahul

    BasicNameValuePair has been deprecated, how can i use them??
    The webscoket client class use them.

  • Alex

    I would like to use that code on a real Tomcat Server, which address I must put in WsConfig.java and main.js? It’s if it is a normal URL like : subdomain.cloud.com?

  • Nirav Jain

    I have successfully setup on my web host and its working fine from different browser and different wifi and data network. i am at the last step where i am building this app in android studio and MainActivity is showing error WebSocket library is deprecated and replaced by AndroidAsync..
    Can anyone modify the Whole code of MainActivity.class and upload it…

    • Anne Lingesh

      Hello nirav jain, getting too many errors can you please send me the code to my mail anne.lingesh@gmail.com

  • Jonathas

    this error appears this piece of code:
    // – It is Indirectly referenced from required .class files
    client = new WebSocketClient (URI.create (WsConfig.URL_WEBSOCKET + URLEncoder.encode (name)), new WebSocketClient.Listener () {
    .
    .
    .
    }

  • hamid khaksar

    Hi Ravi

    Thank you very much for this great tutorial , But i have a problem .

    when login with browser and then login with mobile , application works fine !

    but when login first with mobile device and then login with browser , when msg send with mobile device shows fine in browser but not showing in mobile device (WHY !?)

    this is screen shots of my problem :

    1 : http://s24.postimg.org/vfelxk3px/image.png

    2 : http://s24.postimg.org/8rzcreo5x/image.png

    3 : http://s24.postimg.org/lgtnb2uad/image.png

    • abbas

      سلام آقا حمید
      لطف میکنی سورس پروژت رو برام بفرستی توی تلگرام یا ایمیلم.
      منم یه مشکل قبل این مشکلی کهتو برخوردی دارم.میخوام ببینم چطوری حلش کردی.دمت گرم
      moosaviabbas74@yahoo.com
      +989308561199

      • hamid khaksar

        salam abbas jan

        agha man in proje ro koli Edit kardam vase yek proje dg sharmande nemitonam behet source bedam . bego moshkelet koja hast agar betonam komaket mikonam

    • Legolas

      works fine for me

  • Vishal Patel

    Hi Ravi,
    How i can use this app in two different android device and WiFi connection.
    i build chatting app same as whatsapp only include chatting feature please suggest me.

  • Mwebembezi Dennis

    In case anyone has got a way of using Android Async library in this project. Please help me out. It seems everything used here is depreciated

  • Anuj

    How to add that websocket library in android studio m stuck at this step everything is fine other than that

    • ASK RANASINGHE

      1. Go file-> new-> import module and select the android-websockets-master library project.
      2. Check settings.graddle this line include ‘:androidwebsocketsmaster’
      3. add this line in build.gradle
      dependencies {
      compile project(‘:androidwebsocketsmaster’)
      }
      4. then add apache, and sync
      android {
      useLibrary ‘org.apache.http.legacy’

      5. finally add change main activity this lines,

      try {

      client = new WebSocketClient(URI.create(WsConfig.URL_WEBSOCKET

      + URLEncoder.encode(name,”UTF-8″)), new WebSocketClient.Listener() {

      happy coding..

  • Sonu Kunwar

    how i do that same application in android studio ??

    • swapnil patel

      you have to download library files for the socket .then after open project folder and create lib folder in root dir. place the library folder inside lib folder.
      then after go to studio and change project structure android to project.
      then open setting.gradle file and include ‘:lib:’
      then open app folder in tree and open app.gradle
      inside this under dependancy tag add this line
      compile project (‘:lib:’)
      after sync proj.
      that’s it……

      if u got any error in sync the go to library gradle file and comment apply link

  • Vinod Sonava

    hi ravi

    which one app is right for the mob to mob chat

  • Zubi Khan

    Everything is working fine…but can we use this code for multiple groups like Whatsapp???

    • Its better to go with GCM.

      • Zubi Khan

        OK…Thanx a lot

          • Zubi Khan

            Well i made some changes in this project (i.e. Android Building Group Chat App using Sockets) and now its working for multiple groups also..and then for notification purpose i’ll use GCM as per your suggestion…If time permits i’ll try this new project for sure..Thanx a lot for the suggestion..really appreciated 🙂

          • Thats great achievement Zubi. Keep it up.

          • Zubi Khan

            Thank you Ravi 🙂

          • Zubi Khan

            The app is working fine on localhost..but after deploying .war file on hosting server it’s not working…First screen appears but after that chat window doesn’t show up.. I’m getting this Error ” WebSocket connection to ‘ws://www.example.com/GroupChats/chat?name=Nikki’ failed: Error during WebSocket handshake: Unexpected response code: 404″

  • Abdul Rahman. S.M

    Everything is fine, I have connected in my own PC local host server, But I need to connect another PC as Server. Please help me..

  • Shahzod

    Hi, I have problem, can you help me. I can’t run this project. My mail is shahzod.khusinov@gmail.com.

  • Annesa

    Thanks for great tutorial sir!
    it work wonderful!

    • Moslem Hamdi

      Hi Annesa this project worked for you in android studio or Eclipse ?

  • jagadeesh jagadeesh

    HI RAVI
    i got a problem…the android_v7 support library is showing error in res->values-v21->styles_base.xml
    i google it.. but did not get any solution..
    and i changed strings app name like that but when im building the project it’s not reflecting in APK
    please give me a solution .. g.jagadeesh.j@gmail.com

  • Veena

    Hi,
    I am using android studio for this. but i am not able to add your web socket library(android-websockets-master ) to my project. I tried inserting Compile project statement in build.gradle and include statement in settings.gradle but i am getting below error
    com.intellij.openapi.externalSystem.model.ExternalSystemException: Configuration with name ‘default’ not found. Can you please give steps to add it??

    Thanks!!!

    • anil kumar

      click right button on project->new->module->select import eclips adt->browse where u have downloaded web master then select that file and click ok.
      after finishing the imoprt then u need to go project properties and select dependencies and click + button and select module

      • Veena

        thanks!!

  • Rajasekhar Reddy

    Hi Ravi ,

    I followed the steps on using the sockets in my localhost , its working fine . But sometimes it is displaying “org.apache.http.client.HttpResponseException: websocket upgrade failure”, Please guide me in resolving this.

    thanks in advance

  • Badal

    Hi , I want to do chat application between android and PC via USB cable . i am able to send data from Android to PC by making ServerSocket in android and Client Socket in PC that is java application. I used adb forward for port forwarding. Everything works fine but ServerSocket becomes null when i close the application. or restart the application. what can i do to keep my Serversocket alive even if the app is closed. I have tried starting ServerSocket when app is already closed and it works properly. problem occurs when i open the application again and it make ServerSocket null.
    I even tried adb reverse that is opposite of adb forward which is also not working may be supported for APi 21+.

  • Devonte Campbell Amos

    Hi, I am doing an android application and i am following this tutorial. As i am using android studio, my issue is that i am confused on how to complete part 19 Right Click on project ⇒ Properties ⇒ Android (on left) ⇒ Add (on right, under Library section). Can anyone please aid me on this?

  • Devonte Campbell Amos

    If anyone has got this working on android studio, please contact me on devonteamos@hotmail.com. Much appreciated

    • Rana Saqib Manj

      Hi Devonte !! Can you done this project in android studio ???

  • Matko Smoljan

    I’m currently building a chat app similar to “whatsapp”. The difference is that I don’t want to implement a group chat function, but some other functionalities instead. Would you recommend using sockets for this project or GCM? Would you mind explaining your answer? Thank you

  • Veena

    Hi,
    I have successfully imported your project. But i am getting exception couldn’t connect to Google API and other socket exceptions. Could you please help me with that?

    • ASK RANASINGHE

      import the websocket project as a library. and change the mainactivity code like this,

      try {

      client = new WebSocketClient(URI.create(WsConfig.URL_WEBSOCKET

      + URLEncoder.encode(name,”UTF-8″)), new WebSocketClient.Listener() {

  • shahrukh

    On importing websocket file in android studio it ask for gradle path which i dont find anywhere

    • Moslem Hamdi

      I have the same problem did you find any solution ??

      • Raj Nasit

        please use eclipse . its fine for this project

  • Raj Nasit

    How to implement multiple chat rooms. I mean whats type group chat

  • Raj Nasit

    Nice tutorial. God bless you…you helped many peoples. Your tutorials are best and straight. one issues is that For web client after entering name i getting white screen instead of Post screen

  • Rajkumar Ramachandran

    Websocketclient connection lost after 20 mins. can you please help me how to reconnect that??

  • Anne Lingesh

    Websocketclient showing errors in mainactivity.java. Please respond to this message

    • ASK RANASINGHE

      use this way,

      try {

      client = new WebSocketClient(URI.create(WsConfig.URL_WEBSOCKET

      + URLEncoder.encode(name,”UTF-8″)), new WebSocketClient.Listener() {
      ……

      • Thulisile Thwala

        Hi i had the same problem i copied and pasted this new code but i still have the same error,please help

      • Anne Lingesh

        still showing the same error after the modifications..

  • ASK RANASINGHE

    Wow nice tutorial. Working fine. But its not work with 3G connection. only wifi connection. How can i solve this issue. Thnx Ravi..

  • Ari Prasetyo

    I have try and it’s good tutorial…
    But How to Send One people when there are 6 people online….?

    • Jainam Mehta

      apk files sends to other 6guys connect them into same server and then continue it..

  • Sankar Inapp

    Hi , Is there any method to alert userA whether userB read the message or not ?

  • Sankar Inapp

    Which is the best android library for handling websocket connection ? I have checked the query on stackoverflow http://stackoverflow.com/q/30547517/1672337

    Would you please suggest a reliable websocket library for android, Should I use firebase for websocket connection since its recommend for android by google. ?

  • omkar w

    so every time we connect to the wifi, we have to change the IP address in the wsconfig.java?
    what if i close the socket server and reconnect it? then it has a different IP address. so we build and deploy the app again after changing?
    what if i use static IP? would that work?

  • Krishan Kumar Gupta

    I followed the given steps, but the messages are not displayed after clicking on the send button. What could be the possible reason for that?

  • Piyush Mohnot

    Those who are having problem in MainActivity.java, it’s necessary to use target sdk version of 22 or 23 because Websocket is deprecated after sdk version 23.

  • Nirav Dhanani

    @Ravi, Excellent tutorial can you tell me how to possible one to one chatting like whats up using socket io in android.

  • Julius Delfin

    can you do this in android studio?

    • ashish

      i already done for studio also.

      • Akhilesh Rao

        in studio you already done it.
        so no changes ha we can do it
        androidstudio

  • jai

    hello sir,
    why i can’t download your coad?

  • Sumanth Polisetty

    How to host these files on a server so that it can be used from anywhere using website url??

  • Евгений Коммонофф

    Please make a
    lesson on the Android studio and then the eclipse is not present and
    there is no desire to place it, who should be placed and where should
    the chat work, can I place it on a web server and work through it?

  • Gincen

    Hi! and thank you for all the tutorials. I want you to make one for an app that can read and send mail that is a mail client app like gmail for android but for our own mail server client in android studio, please. and again thank you

  • pascal okorie

    Can this be done using Android Studio?

  • Akhilesh Rao

    same thing we can do in android studio ha
    and by using tomcat server 7

  • Mantavya Shrivastava

    This line is giving error on android studio.
    import com.codebutler.android_websockets.WebSocketClient;