We have seen a large number of applications come up in the recent past, to help us connect with each other across different mediums, like Hike, Whatsapp, Viber etc. You would be surprised to learn that its rather quite easy to develop one yourself. I thought providing an insight into developing such an application would be helpful for you guys.

Today we are going to learn how to build a simple group chat app using sockets. I won’t say this is the only way to build a chat app, but it is the quick & easiest way to build one. The best and efficient way would be using the push notifications instead of sockets.

android building chat app using java sockets

Overall we are going to build three components in this article. The first and important component is the socket server. The socket server plays a major role like handling the socket client connections, passing the messages between clients. Second component is the web app where you can join the chat conversation from a browser. Finally the android app. The main advantage of this app is, you can chat between web – web, web – android or android – android.

As this article seems pretty much lengthy, I am dividing the tutorial into two parts. In this first part, all the basic setup and building the web app is covered. In the 2nd Part, building the actual android app is covered.

Below are the final outcomes from this tutorial.

android building chat app like whatsapp

How the App Works Over Sockets?

If you are coming across the ‘sockets’ for the first time, the wikipedia page give you basic knowledge about socket communication. Below you can find a brief info about how our app works.

1. First we’ll have a socket server running. When the android app or web app connects to socket server, the server opens a TCP connection between server and client. The server is capable of opening concurrent connections when there are multiple clients.

2. When a socket connection is established few callback methods like onOpen, onMessage, onExit will be triggered on the both the ends (on server side and client side). There will be another method available to send message from client to server, or vice versa.

3. JSON strings will be exchanged between server and client as a communication medium. Each JSON contains a node called flag to identify the purpose of JSON message. Below is example of JSON when a client joined the conversation that contains the client name, session id and number of people online.

{
    "message": " joined conversation!",
    "flag": "new",
    "sessionId": "4",
    "name": "Ravi Tamada",
    "onlineCount": 6
}

4. Whenever a JSON message received on client side, the JSON will be parsed and appropriate action will be taken.

I hope the above information gave enough knowledge over the app. Now we can move forward and start building one by one component.


1. Eclipse adding J2EE & Tomcat 7 Support

The eclipse IDE that comes along with android SDK, doesn’t have J2EE and Tomcat server support. So we have to add J2EE and tomcat extensions. Another option would be downloading another eclipse that supports J2EE, but I would like use the eclipse that supports both android and j2ee instead of two different IDEs.

1. Download apache tomcat 7 from tomcat website. (You can download it from this direct link). Once downloaded, extract it in some location.

2. In Eclipse go to Help ⇒ Install New Software. Click on Work with drop down and select Juno – http://download.eclipse.org/releases/juno. (You might need to select the appropriate eclipse release depending upon your eclipse flavour)

3. Expand Web, XML, Java EE and OSGi Enterprise Development and select below extensions and proceed with installation.
   > Eclipse Java EE Developer Tools
   > JST Server Adapters
   > JST Server Adapters Extensions

4. Once the extensions are installed, Eclipse will prompt you to restart. When the eclipse re-opened, we need to create a server first. Goto Windows ⇒ Show View ⇒ Server ⇒ Servers.

5. In servers tab, click on new server wizard and select Apache ⇒ Tomcat v7.0 Server. Give server name, browse and select the tomcat home directory which we downloaded previously.

Check out the below video if you not very clear with the above steps.


2. Finding Your PC IP Address

As we need to test this app on multiple devices (it can be a mobile, PC or a laptop) in a wifi network, we need to know the IP address of the PC where the socket server project running. So instead of using localhost, we need to use the ip address in the url. In order to get the ip address of your machine, execute below commands in terminal.

On Windows

ipconfig
windows-os-getting-ip-address

On Mac

ifconfig
mac os getting system ip address

Note: The ip address of your machine might changes whenever you disconnected from wifi or a new device added to wifi network. So make sure that you are using the correct ip address every time you test the app.

Once the Eclipse Tomcat setup is ready and you know the IP address, you are good to go with socket server development. Building the socket server is very easy. The socket server we are going to build won’t take more than two class files.

3. Building the Socket Server

1. In Eclipse create a new Dynamic Web Project by navigating to File ⇒ New ⇒ Other ⇒ Web ⇒ Dynamic Web Project. Give the project name and select the Target runtime as Tomcat 7. I gave my project name as WebMobileGroupChatServer.

Once the project is created, it contains below directory structure.

j2ee web dynamic project directory structure

2. Right click on src ⇒ New ⇒ Package and give the package name. I gave my package name as info.androidhive.webmobilegroupchat.

3. Now download google-collections-0.8.jar, javaee-api-7.0.jar, json-org.jar files and paste them in project’s WebContent ⇒ WEB-INF ⇒ lib folder.

4. Create a new class named JSONUtils.java under project’s src package folder. This class contains methods to generate JSON strings those are required to have the communication b/w socket server and clients.

In the below code, if you observer each json contains flag node which tell the clients the purpose of JSON message. On the client side we have to take appropriate action considering the flag value.

Basically the flag contains four values.

self = This JSON contains the session information of that particular client. This will be the first json a client receives when it opens a sockets connection.

new = This JSON broadcasted to every client informing about the new client that is connected to socket server.

message = This contains the message sent by a client to server. Hence it will broadcasted to every client.

exit = The JSON informs every client about the client that is disconnected from the socket server.

package info.androidhive.webmobilegroupchat;

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

public class JSONUtils {

	// flags to identify the kind of json response on client side
	private static final String FLAG_SELF = "self", FLAG_NEW = "new",
			FLAG_MESSAGE = "message", FLAG_EXIT = "exit";

	public JSONUtils() {
	}

	/**
	 * Json when client needs it's own session details
	 * */
	public String getClientDetailsJson(String sessionId, String message) {
		String json = null;

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

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

		return json;
	}

	/**
	 * Json to notify all the clients about new person joined
	 * */
	public String getNewClientJson(String sessionId, String name,
			String message, int onlineCount) {
		String json = null;

		try {
			JSONObject jObj = new JSONObject();
			jObj.put("flag", FLAG_NEW);
			jObj.put("name", name);
			jObj.put("sessionId", sessionId);
			jObj.put("message", message);
			jObj.put("onlineCount", onlineCount);

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

		return json;
	}

	/**
	 * Json when the client exits the socket connection
	 * */
	public String getClientExitJson(String sessionId, String name,
			String message, int onlineCount) {
		String json = null;

		try {
			JSONObject jObj = new JSONObject();
			jObj.put("flag", FLAG_EXIT);
			jObj.put("name", name);
			jObj.put("sessionId", sessionId);
			jObj.put("message", message);
			jObj.put("onlineCount", onlineCount);

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

		return json;
	}

	/**
	 * JSON when message needs to be sent to all the clients
	 * */
	public String getSendAllMessageJson(String sessionId, String fromName,
			String message) {
		String json = null;

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

			json = jObj.toString();

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

		return json;
	}
}

5. Create another class named SocketServer.java and add the below code. This is the where we implement actual socket server.

This class mainly contains four callback methods.

onOpen() – This method is called when a new socket client connects.
onMessage() – This method is called when a new message received from the client.
onClose() – This method is called when a socket client disconnected from the server.
sendMessageToAll() – This method is used to broadcast a message to all socket clients.

package info.androidhive.webmobilegroupchat;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.Collections;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

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

import com.google.common.collect.Maps;

@ServerEndpoint("/chat")
public class SocketServer {

	// set to store all the live sessions
	private static final Set<Session> sessions = Collections
			.synchronizedSet(new HashSet<Session>());

	// Mapping between session and person name
	private static final HashMap<String, String> nameSessionPair = new HashMap<String, String>();

	private JSONUtils jsonUtils = new JSONUtils();

	// Getting query params
	public static Map<String, String> getQueryMap(String query) {
		Map<String, String> map = Maps.newHashMap();
		if (query != null) {
			String[] params = query.split("&");
			for (String param : params) {
				String[] nameval = param.split("=");
				map.put(nameval[0], nameval[1]);
			}
		}
		return map;
	}

	/**
	 * Called when a socket connection opened
	 * */
	@OnOpen
	public void onOpen(Session session) {

		System.out.println(session.getId() + " has opened a connection");

		Map<String, String> queryParams = getQueryMap(session.getQueryString());

		String name = "";

		if (queryParams.containsKey("name")) {

			// Getting client name via query param
			name = queryParams.get("name");
			try {
				name = URLDecoder.decode(name, "UTF-8");
			} catch (UnsupportedEncodingException e) {
				e.printStackTrace();
			}

			// Mapping client name and session id
			nameSessionPair.put(session.getId(), name);
		}

		// Adding session to session list
		sessions.add(session);

		try {
			// Sending session id to the client that just connected
			session.getBasicRemote().sendText(
					jsonUtils.getClientDetailsJson(session.getId(),
							"Your session details"));
		} catch (IOException e) {
			e.printStackTrace();
		}

		// Notifying all the clients about new person joined
		sendMessageToAll(session.getId(), name, " joined conversation!", true,
				false);

	}

	/**
	 * method called when new message received from any client
	 * 
	 * @param message
	 *            JSON message from client
	 * */
	@OnMessage
	public void onMessage(String message, Session session) {

		System.out.println("Message from " + session.getId() + ": " + message);

		String msg = null;

		// Parsing the json and getting message
		try {
			JSONObject jObj = new JSONObject(message);
			msg = jObj.getString("message");
		} catch (JSONException e) {
			e.printStackTrace();
		}

		// Sending the message to all clients
		sendMessageToAll(session.getId(), nameSessionPair.get(session.getId()),
				msg, false, false);
	}

	/**
	 * Method called when a connection is closed
	 * */
	@OnClose
	public void onClose(Session session) {

		System.out.println("Session " + session.getId() + " has ended");

		// Getting the client name that exited
		String name = nameSessionPair.get(session.getId());

		// removing the session from sessions list
		sessions.remove(session);

		// Notifying all the clients about person exit
		sendMessageToAll(session.getId(), name, " left conversation!", false,
				true);

	}

	/**
	 * Method to send message to all clients
	 * 
	 * @param sessionId
	 * @param message
	 *            message to be sent to clients
	 * @param isNewClient
	 *            flag to identify that message is about new person joined
	 * @param isExit
	 *            flag to identify that a person left the conversation
	 * */
	private void sendMessageToAll(String sessionId, String name,
			String message, boolean isNewClient, boolean isExit) {

		// Looping through all the sessions and sending the message individually
		for (Session s : sessions) {
			String json = null;

			// Checking if the message is about new client joined
			if (isNewClient) {
				json = jsonUtils.getNewClientJson(sessionId, name, message,
						sessions.size());

			} else if (isExit) {
				// Checking if the person left the conversation
				json = jsonUtils.getClientExitJson(sessionId, name, message,
						sessions.size());
			} else {
				// Normal chat conversation message
				json = jsonUtils
						.getSendAllMessageJson(sessionId, name, message);
			}

			try {
				System.out.println("Sending Message To: " + sessionId + ", "
						+ json);

				s.getBasicRemote().sendText(json);
			} catch (IOException e) {
				System.out.println("error in sending. " + s.getId() + ", "
						+ e.getMessage());
				e.printStackTrace();
			}
		}
	}
}

With this we have completed the socket server part. Now quickly we can build a web app to the test the socket server. Again building the web app is very simple. The complete web app can be built using basic web technologies like HTML, CSS & jQuery.

4. Building The Web App (HTML, CSS & jQuery)

To create the web app, we don’t have to create another project. This is the part of same socket server project, so follow the below steps in the same project.

1. Create a file named style.css under WebContent ⇒ WEB-INF folder. This contains the css styles for the web UI.

body {
	padding: 0;
	margin: 0;
}

.body_container {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}

.clear {
	clear: both;
}

.green {
	color: #8aaf0d;
}

#header {
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
}

#header h1,#header p.online_count {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

#header p.online_count {
	font-size: 18px;
	display: none;
}

.box_shadow {
	background: #f3f4f6;
	border: 1px solid #e4e4e4;
	-moz-box-shadow: 0px 0px 2px 1px #e5e5e5;
	-webkit-box-shadow: 0px 0px 2px 1px #e5e5e5;
	box-shadow: 0px 0px 2px 1px #e5e5e5;
}

#prompt_name_container {
	margin: 0 auto;
	width: 350px;
	text-align: center;
}

#prompt_name_container p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 24px;
	color: #5e5e5e;
}

#prompt_name_container #input_name {
	border: 1px solid #dddddd;
	padding: 10px;
	width: 250px;
	display: block;
	margin: 0 auto;
	outline: none;
	font-family: 'Open Sans', sans-serif;
}

#prompt_name_container #btn_join {
	border: none;
	width: 100px;
	display: block;
	outline: none;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	background: #96be0e;
	font-size: 18px;
	padding: 5px 20px;
	margin: 15px auto;
	cursor: pointer;
}

#message_container {
	display: none;
	width: 500px;
	margin: 0 auto;
	background: #fff;
	padding: 15px 0 0 0;
}

#messages {
	margin: 0;
	padding: 0;
	height: 300px;
	overflow: scroll;
	overflow-x: hidden;
}

#messages li {
	list-style: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	padding: 10px 20px;
}

#messages li.new,#messages li.exit {
	font-style: italic;
	color: #bbbbbb;
}

#messages li span.name {
	color: #8aaf0d;
}

#messages li span.red {
	color: #e94e59;
}

#input_message_container {
	margin: 40px 20px 0 20px;
}

#input_message {
	background: #f0f0f0;
	border: none;
	font-size: 20px;
	font-family: 'Open Sans', sans-serif;
	outline: none;
	padding: 10px;
	float: left;
	margin: 0;
	width: 348px;
}

#btn_send {
	float: left;
	margin: 0;
	border: none;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	background: #96be0e;
	outline: none;
	padding: 10px 20px;
	font-size: 20px;
	cursor: pointer;
}

#btn_close {
	margin: 0;
	border: none;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	background: #e94e59;
	outline: none;
	padding: 10px 20px;
	font-size: 20px;
	cursor: pointer;
	width: 100%;
	margin: 30px 0 0 0;
}

2. Create another file named main.js and add below javascript. This file contains all the methods required to handle communication between socket server and client. The other things like parsing JSON, appending messages to chat list also taken care in the same file.

// to keep the session id
var sessionId = '';

// name of the client
var name = '';

// socket connection url and port
var socket_url = '192.168.0.102';
var port = '8080';

$(document).ready(function() {

	$("#form_submit, #form_send_message").submit(function(e) {
		e.preventDefault();
		join();
	});
});

var webSocket;

/**
 * Connecting to socket
 */
function join() {
	// Checking person name
	if ($('#input_name').val().trim().length <= 0) {
		alert('Enter your name');
	} else {
		name = $('#input_name').val().trim();

		$('#prompt_name_container').fadeOut(1000, function() {
			// opening socket connection
			openSocket();
		});
	}

	return false;
}

/**
 * Will open the socket connection
 */
function openSocket() {
	// Ensures only one connection is open at a time
	if (webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED) {
		return;
	}

	// Create a new instance of the websocket
	webSocket = new WebSocket("ws://" + socket_url + ":" + port
			+ "/WebMobileGroupChatServer/chat?name=" + name);

	/**
	 * Binds functions to the listeners for the websocket.
	 */
	webSocket.onopen = function(event) {
		$('#message_container').fadeIn();

		if (event.data === undefined)
			return;

	};

	webSocket.onmessage = function(event) {

		// parsing the json data
		parseMessage(event.data);
	};

	webSocket.onclose = function(event) {
		alert('Error! Connection is closed. Try connecting again.');
	};
}

/**
 * Sending the chat message to server
 */
function send() {
	var message = $('#input_message').val();

	if (message.trim().length > 0) {
		sendMessageToServer('message', message);
	} else {
		alert('Please enter message to send!');
	}

}

/**
 * Closing the socket connection
 */
function closeSocket() {
	webSocket.close();

	$('#message_container').fadeOut(600, function() {
		$('#prompt_name_container').fadeIn();
		// clearing the name and session id
		sessionId = '';
		name = '';

		// clear the ul li messages
		$('#messages').html('');
		$('p.online_count').hide();
	});
}

/**
 * Parsing the json message. The type of message is identified by 'flag' node
 * value flag can be self, new, message, exit
 */
function parseMessage(message) {
	var jObj = $.parseJSON(message);

	// if the flag is 'self' message contains the session id
	if (jObj.flag == 'self') {

		sessionId = jObj.sessionId;

	} else if (jObj.flag == 'new') {
		// if the flag is 'new', a client joined the chat room
		var new_name = 'You';

		// number of people online
		var online_count = jObj.onlineCount;

		$('p.online_count').html(
				'Hello, <span class="green">' + name + '</span>. <b>'
						+ online_count + '</b> people online right now')
				.fadeIn();

		if (jObj.sessionId != sessionId) {
			new_name = jObj.name;
		}

		var li = '<li class="new"><span class="name">' + new_name + '</span> '
				+ jObj.message + '</li>';
		$('#messages').append(li);

		$('#input_message').val('');

	} else if (jObj.flag == 'message') {
		// if the json flag is 'message', it means somebody sent the chat
		// message

		var from_name = 'You';

		if (jObj.sessionId != sessionId) {
			from_name = jObj.name;
		}

		var li = '<li><span class="name">' + from_name + '</span> '
				+ jObj.message + '</li>';

		// appending the chat message to list
		appendChatMessage(li);

		$('#input_message').val('');

	} else if (jObj.flag == 'exit') {
		// if the json flag is 'exit', it means somebody left the chat room
		var li = '<li class="exit"><span class="name red">' + jObj.name
				+ '</span> ' + jObj.message + '</li>';

		var online_count = jObj.onlineCount;

		$('p.online_count').html(
				'Hello, <span class="green">' + name + '</span>. <b>'
						+ online_count + '</b> people online right now');

		appendChatMessage(li);
	}
}

/**
 * Appending the chat message to list
 */
function appendChatMessage(li) {
	$('#messages').append(li);

	// scrolling the list to bottom so that new message will be visible
	$('#messages').scrollTop($('#messages').height());
}

/**
 * Sending message to socket server message will be in json format
 */
function sendMessageToServer(flag, message) {
	var json = '{""}';

	// preparing json object
	var myObject = new Object();
	myObject.sessionId = sessionId;
	myObject.message = message;
	myObject.flag = flag;

	// converting json object to json string
	json = JSON.stringify(myObject);

	// sending message to server
	webSocket.send(json);
}

3. Now download jquery-1.11.1.min and the paste the file in WebContent ⇒ WEB-INF.

4. Finally create another file named index.html and add below code.

<!DOCTYPE html>

<html>
<head>
<title>Android, WebSockets Chat App | AndroidHive
	(www.androidhive.info)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700'
	rel='stylesheet' type='text/css'>
<link href="style.css" type="text/css" rel='stylesheet' />
<script type="text/javascript" src="main.js"></script>
</head>
<body>
	<div class="body_container">

		<div id="header">
			<h1>Android WebSockets Chat Application</h1>
			<p class='online_count'>
				<b>23</b> people online right now
			</p>
		</div>

		<div id="prompt_name_container" class="box_shadow">
			<p>Enter your name</p>
			<form id="form_submit" method="post">
				<input type="text" id="input_name" /> <input type="submit"
					value="JOIN" id="btn_join">
			</form>
		</div>

		<div id="message_container" class="box_shadow">

			<ul id="messages">
			</ul>


			<div id="input_message_container">
				<form id="form_send_message" method="post" action="#">
					<input type="text" id="input_message"
						placeholder="Type your message here..." /> <input type="submit"
						id="btn_send" onclick="send();" value="Send" />
					<div class="clear"></div>
				</form>
			</div>
			<div>

				<input type="button" onclick="closeSocket();"
					value="Leave Chat Room" id="btn_close" />
			</div>

		</div>

	</div>

</body>
</html>

5. Now run the project by Right Click on project ⇒ Run As ⇒ Run on Server. You can see the project running on http://localhost:8080/WebMobileGroupChatServer/

5. Testing The Socket Server (using the web app)

In order to test the socket server using the web app, follow below steps. You can use multiple devices (like desktop PC, Laptop) or just one machine is enough.

1. Make sure that all the machines connected to same wifi router if you are testing the app on multiple machines. If you are testing the app using a single computer, you don’t have to connect to a wifi network.

2. Find the IP address of the machine on which socket server project is running. (Follow the steps mentioned in 2nd point to get the ip address)

3. Replace the ip address in main.js with your machine’s ip address.

var socket_url = '_YOUR_IP_ADDRESS_';

4. Now access your project url in browser. Replace localhost with your machine ip address in the url. My project url is http://192.168.0.104:8080/WebMobileGroupChatServer/. Access same url in another browser software or another machine’s browser to chat with different machines.


Once you are able to chat between multiple clients, we can go forward and build the android app in Android Building Group Chat App using Sockets – Part 2

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.
  • Jonathan

    Awesome! I LOVE your tutorials

    • Thanks Jonathan 🙂

      • Athil

        yes ,that’s a greate work thank u Ravi

  • Prathap

    Excellent Work Ravi. Looking for more tuts like this.

  • Sara

    Excellent work Love you man and I have a request can you please help us about some design tutorial using material app design ?

  • Tom Johnson

    What about status bar notifications?

  • Andre

    What about over the internet? I notice this is just over the same wifi

    • I tried searching free socket hosting server, but couldn’t find any. You might need to buy a hosting like digitalocean and do the setup over there.

      • Imthiyas

        what about openshift.com.??

  • mustafa addam

    Hey Ravi Tamada nice tutorial thank you can you soon do that but using apache server i mean with database and php so chat could be use through push notification not socket cause it will really help me in my future projects.

    • Yeah sure. But for that I need to cover few topics first.

      • mustafa addam

        ok no problem waiting for awesome tutorials from you 🙂

      • adam

        hi how can i put this to my website ,for example i wanna use this from ” website.com/chat”

  • Abdullah

    error in jquery-1.11.1.min.js
    “undefined”!=typeof window?window:this

  • ahmad najar

    ihave error conection is closed in 8080 port

  • adam

    hi how can i put this to my website ,for example i wanna use this from ” website.com/chat”

  • KenZira

    Hi, I downloaded your source code. It worked. However, I created my own project and just follow the instructions above. It didn’t work. The problem is “description The requested resource is not available.” which I encountered on the browser.

    • KenZira

      I solved the problem

      • Ranjit

        How you solved it??? I am getting same error…

        • Kelvin

          change the admin and http/1.1 ports then restart your server

  • 25

    Hi. I also downloaded your source code. However i am a beginner with sockets. Im this moment is giving me this error.

    WebSocket connection to ‘ws://%20192.168.1.181:8080/WebMobileGroupChatServer/chat?name=cenz’ failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

    Thanks and great tutorial again;)

    • 25

      Never mind , my bad 😀

      your tutorials are really awesome !!

  • Er Akhtar Raza Ansari

    jquery-1.11.1.min.js file is showing error please help

    • If the error is shown by Eclipse, you can ignore it.

  • Vivek Bansal

    WebSocket connection to ‘ws://192.168.0.2:8080/WebMobileGroupChatServer/chat?name=demo’ failed: Error during WebSocket handshake: Unexpected response code: 404

    This is the error which console is showing. Please help with this.

  • SG

    I am also getting same error as of Vivek Bansal webSocket = new WebSocket(“ws://” + socket_url + “:” + port

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

  • SG

    I am also getting same error as of Vivek Bansal webSocket = new WebSocket(“ws://” + socket_url + “:” + port

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

  • TK

    AWESOME tutorial. I think you should have a donate button at least for some appreciation. 🙂

    I managed to set it up but when I enter a name and click join all I see is the title “Android WebSockets Chat Application. ” I cannot see the chat room 🙁 (Running on a mac) Might you know what the issues is?

    • Kelvin

      Hi TK,

      Were you able to solve the chatroom issue?

  • steve

    great tutorial

  • TK

    Hi Guys,

    For all those getting “Unexpected response code: 404” Use Tomcat 7. I realised if you use any other version you will get the 404 error. The server gets the payload but cannot send out a response. I uninstalled previous versions of Tomcat and set Vs as the default. Works like a charm.

    Awesome Tutorial Ravi 🙂

    Enjoy

    • Thanks for your Tip TK 🙂

      • Vishal Bhardwaj

        HI Ravi,,
        I’m too getting the same error.
        I’m using Tomcat ver 7.0 only.
        How to resolve it

    • Vishal Bhardwaj

      I’m too getting the same error.
      I’m using Tomcat ver 7.0 only.
      How to resolve it

  • Ankit

    while testing on same pc with different browser shows error! connection is closed try again

    • Krishnendu Roy

      I have face same error. r u solve this problem?

  • Matriks

    Hi ravi, you rock man..!!!! can you cover with picture attachment pls…

  • Great tutorial, I was trying to create a chat for staff.
    I really like the tutorials on this site.
    Ravi great job.

  • mmy

    Hi Ravi, I have a question, if I use Android Studio instead of Eclipse, how I install new software since there are no “install new software” in Windows tab?

  • Dung

    Thanks tutorial.
    help me.
    I want save data chat.

  • Thomas

    Hi Ravi,

    Is it possible to automatically start the socket server without having to run it via Eclipse? I want to host it on an online server but I am not sure on how to proceed from here. Could you kindly advice?

  • John

    Hello,

    Your every tutorial is nice but can you plzz upload the inappbilling tutorial current many app have in app billing features so it is really good for us thanks keep it up

  • mahdi

    hi , how to make chat between client and client android over web with json and socket?

  • mahdi

    hi , how to make chat between client and client android over web with json and socket?h

  • Ankur

    Hello Ravi, first of all thanks for such a helpfull stuff,
    I just implemented this first part,
    when i user to run the project, it shows:

    HTTP Status 404 – /WebMobileGroupChatServer/

    type Status report

    message /WebMobileGroupChatServer/

    description The requested resource (/WebMobileGroupChatServer/) is
    not available.

    this type of error, i user the updated tomcat v 7.0 also.
    please let me know where i am doing wrong. thanks.

    • Kelvin

      right click your tomcat server on eclipse then click on properties.
      on the dialogwindow click on ‘switch location’ then apply and close.

      Go back to your server and double click it.
      on server locations tab select ‘use Tomcat Installation’
      then save and restart your server

      if that doesnt work you will have to go the extra mile of killing the task listening in on port 8080 and 8005 then change the admin and http ports used by Tomcat on Eclipse

      • Sam

        hey kelvin i tried ur solution, but it still gives me the same error, can u elaborate what you said about “killing the task listening in on port 8080 and 8005″….

    • Veeraj Poojary

      is index.html and its related files within WebMobileGroupChatServer folder ?
      if not, do it and give it a try.

    • Duy

      Put that all files in the top of webcontent folder,not in web-inf

  • Kelvin

    Hi Ravi, Awesome tutorial. Really helpful.

    I was able to do the complete tutorial but when I enter a name and click join the message container does not fadein and all I see is the title “Android WebSockets Chat Application. Might you know what the issues is?

    • Arnav

      I to have the same issue please help !

      • Kelvin

        I have not yet found the solution… will post it when i do

    • Jan

      Same here !

  • rahul

    Hi Ravi,
    Am getting below error after enter the name

    Firefox can’t establish a connection to the server at ws://10.27.96.158:8080/WebMobileGroupChatServer/chat?name=aaa.

    • Make sure that socket server is running and firefox version is supporting websockets.

    • Jan

      Make also sure you are running version of TomCat which contains websocket-api.jar in its lib folder.

  • Yusuf

    Hi Ravi,

    When I try test the socket server it shows this error

    HTTP Status 404 – /WebMobileGroupChatServer/

    type Status report

    message /WebMobileGroupChatServer/

    description The requested resource is not available.

    How can I solve this please

    • Yusuf

      Anyone help pls 🙁

      • MackAttack

        I had the same error, i had index.html, main.js, style.css and the jquery min.js files in the wrong folder, make sure they are in the top level of the web content folder.

    • xXGh0stXx

      Various errors possible, but one could be that Eclipse doesnt generate web.xml by default. Right click on the project -> Java EE Tools -> Generate Deployment Descriptor Stub

  • Cát Khang

    hi Ravi for this tutorial
    Can you help me this >
    When i clicked Join button but i dont see something then . have title is only .
    Please help me . I very interest this tutorial .
    Thanks .

    • Jishma

      Am also facing this same issue. plz help

      • Andrea

        Same issue

    • Jan

      Me too and I have no idea what to do with it !

    • Csaba Pádár

      Me too 🙁

    • Jan

      Problem solved, please use latest TomCat and make sure that it contains websocket-api jars in its lib folder.

    • Duy

      @Cát Khang : Sửa được chưa bạn??

  • congthuc

    very cool, thanks a lot!

  • Salim Alhassan

    Very educative and awesome tutorial. I love it. Please i have added the J2EE and Tomcat support to my eclipse but when i tried to create a new Dynamic Web Project I got this error message–>>

    The selected wizard could not be started.
    Plug-in “org.eclipse.jst.servlet.ui” was unable to instantiate class “org.eclipse.jst.servlet.ui.project.facet.WebProjectWizard”.
    Could not initialize class org.eclipse.jst.j2ee.project.facet.IJ2EEFacetConstants

    Please, i need an assistance. Thank you

  • Sizwe

    ok what i need to know is how do i implement this on my server that is hosted by a website

  • husain

    Hi Ravi Sir nice tutorial .First of all thank you for all the tutorials.I am big fan of you.Can you share the same topic with GCM .It will really help me .plzzzz also post some tutorials which based on sensors & beacone

  • Csaba Pádár

    Hey. Good tutorial! After giving name and clicking join button nothing happens. jquery-1.11.1.min.js file has 1 error, how can I solve that? Anyone, pls!

    • sachit

      Have you find the solution for this problem. I am also getting same.

      • sachit

        I have found the solution and its working fine.

        • Csaba Pádár

          help me

          • sachit

            There is no problem with the js. You can change the mapping of files like create a folder in webcontent with name css and js and put corresponding files into that folders instead of WEB-INF. Also there is no need “javaee-api-7.0.jar” as it is in tomcat 7.0 itself so just delete it from lib folder. Now deploy your app. it should work. Let me know if you still get problem.

          • Thanks 🙂

          • MackAttack

            i have this problem, i click join and nothing happens, the box just fades away

          • MackAttack

            nevermind

          • Anthony Liu

            Hi MackAttack,
            How did you solve the problem?
            Thanks in advance

          • MackAttack

            clear your browser history and retry

          • Yamini

            Have you find the solution for this problem?

          • MackAttack

            @Yamini @Anthony Liu i think you have to clear your browser cache and retry

          • Srikanth Munaga

            hi sachit and i followed the suggestions suggested by u the i am facing the same issue when i click on join the box just fades.
            please help me thanks in advance.

          • Yamini

            Did you got the solution of this ?Please help me

  • Arshad

    How to install on hosting server. I have my own hosting server how to set up it on it?

  • Andrea

    Hi, I tried several times, but i got always the same error….HTTP status 404:The requested resource is not available. What can be wrong? I followed your tutorial step by step.

    • ThisIsJimmy

      I realize that this error probably comes up for any number of reasons, but I’m in the same boat as Andrea and would appreciate any insight. I’ve tried the things others (Kelvin and Seph) have posted.
      I’m wondering if it has something to do with the jquery-1.11.1.min step. I wasn’t able to ‘download’ this. Instead, clicking on the link opened a new tab. Copied the contents and pasted in a New File, and gave the file the name jquery-1.11.1.min.js
      Is this where I went wrong?

      • MackAttack

        make sure the files are in the correct folders, i got this error because i had files in the wrong folders

  • seph

    if anyone suffers from this error:

    WebSocket connection to ‘ws://192.168.56.1:8080/WebMobileGroupChatServer/chat?name=sdf’ failed: Error during WebSocket handshake: Unexpected response code: 404)

    this might be the reason:
    on this site ->http://tomcat.apache.org/tomcat-7.0-doc/web-socket-howto.html it says ‘The JSR-356 Java WebSocket 1.1 implementation is only available when Tomcat is running on Java 7 or later.’ therefore any java 6 wont work…i spent a whole day trying to work out why my websocket doesnt work…

  • Gamis

    Nice example of sockets… is amazing how you explain all that 🙂 maybe some day you can use Android Studio 🙂 an developer apps with that SW 🙂

  • kishan dhingani

    i have been install eclipse Java EE Developer Tools,JST Server Adapters,JST Server Adapters Extensions and restart eclipse than after not display server tab in window menu …..

  • Sudheer

    Can some one help me with blocking a particular contact in chat application??

  • Arnav

    Hey What about a One to One chat can we do it with these libraries??I would Love to have that because i have made a connection to a mysql db with the server and made a registration and contacts system.

  • Srikanth Munaga

    hi it is a great tutorial..
    while i am working with it it is fading and not displaying anything please help me

  • Guest

    This is great tutorial.

  • Dép Thị Lào

    this program run good . But how to fix error in jquery-1.11.1.min.js

    • rohit

      rohit

      • Dép Thị Lào

        i did fix it

        • daniel dizzy

          Hi .. How did you fix the jquery-1.11.1.min.js error ??

  • Anukriti

    Hey. nice tutorial! After giving name and clicking join button nothing happens.Would anyone provide a solution for this.

  • 育成 任

    everything is great but the CSS doesn’t work! I don’t know why, please help me.

    • velmurugan

      hi i too faced the same problem.Actually what mistake i did is I created style.css file in

      WEB-INF.i just cut that file and copied it in Web content folder outer to WEB-INF folder.

      then css worked.you can try the same…….

  • Oyewole Samuel Success

    Please, how can i add J2EE & Tomcat 7 Support for android studio

    • wallace

      try and use intellij idea ultimate come prebundled and with android development plugin

  • kalai

    Getting an error if i click on join button like
    Line: 27
    Error: Object doesn’t support this property or method

  • Selva

    Getiing “Error! Connection is closed. Try connecting again.” while clicking on join button

    • oneme

      I’m in the same point

    • kesumu

      Hey, did you change the code in main.js below? The ‘WebMobileGroupChatServer’ should be your own project name if you intent to connect to your own server. I fixed this through this way.

      // Create a new instance of the websocket
      webSocket = new WebSocket(“ws://” + socket_url + “:” + port
      + “/WebMobileGroupChatServer/chat?name=” + name);

      • Khalil Serano

        can you explain how ?

        i get the same error : Error! Connection is closed. Try connecting again.

        • kesumu

          >>Replace localhost with your machine ip address in the url. My project url is
          >>http://192.168.0.104:8080/WebMobileGroupChatServer/.

          I guess chapter 5.4 above can be the reason. Initiate the websocket in main.js file with your own project url.

          example as:

          >>// Create a new instance of the websocket
          >>webSocket = new WebSocket(“ws://” + socket_url + “:” + port
          >>+ “/your_project_name/chat?name=” + name);

          • Khalil Serano

            can you give me your facebook or skype or anything to contact u please ?

          • Khalil Serano

            the same error Error! Connection is closed. Try connecting again

          • Khalil Serano

            also i get problems in socketserver.java

          • Nikhil Kumar

            how did you manage to run at tomcat 7 ? is it not showing error as
            “The server does not support version 3.1 of the J2EE Web module
            specification.” ? i ran on tomcat 8 then and it’s giving “Error!
            Connection is closed. Try connecting again.” error . how you did it on
            tomcat 7 ? didn’t u changed anything in the existing code ?

  • jay

    Love u gr8 WORK

  • Alok Kumar

    i hv done this..code of chat server..
    but problem, it is not working when i m running it on two machine..
    it is running on only one machine on which server going on..
    when i access this on other machine only app page opening but no other client in joining when i enter the name..and the i click join it becomes blank ..on other machine..
    over all conversation is not working b/w two machine..it is working on one machine among different browser….
    plz tell me ..how to do it..

    • Are the two machines connected by wifi or lan. You need to specify the socket url as the ip address as lan ip address if connected by lan and similarly for wifi.

    • Nikhil Kumar

      listen. i need ur help. please tell me did u use tomcat 7 server ? really ? u didn’t get any error ? m not able to run even on single computer. everthing worked fine or you had to do some changes to the existing code?

      • surya

        Hai Niklil, i have the same prob that the webpage fades away… I couldn’t find a way to get rid of it, pls help me out this….

  • Hanan Lipskin

    if some will is having any issue with that code you contact me on skype hananlipskin and i will help you out 🙂
    Ravi thank you so much for your time

  • zoltaare

    Nice!!! Can you give an example or an overview on how to implement file transfer? Thank You. 🙂

  • Rahul

    How to this in my hosting server??? please help me

  • Razan Fikri

    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.

  • divya

    sir, I tried to socket program in browser, it will not working properly, when I give the name and press the join button the page will be fade out and the next page will not coming.

    while if I remove

    (webSocket.onopen = function(event) { ) this line it will fade in the next page without any name in the listview. please help me sir.

    • see if you have syntax errors. That line has to be there. This is the function.

      webSocket.onopen = function(event) {
      $(‘#message_container’).fadeIn();
      if (event.data === undefined)
      return;
      };

      check whether the id of ‘message_container’ is same in the html file.

    • ajay

      In your main.js file this code should be some think lik,…

      webSocket = new WebSocket(“ws://” + socket_url + “:” + port

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

      • akshay

        yes the line of code same…. but till now i have same problem

    • Yamini

      Hello Divya, Hope you fine…..Did you correct this error ?…..I have same prob….

  • Hi, Thanks for this great tutorial. I would like to implement cookies with this so that while opening new tabs on the same browser doesn’t create new sessions. Can you suggest any resources or ways in which i should proceed.

    I would also like to create database so as to store users and their passwords. Can you recommend some books or tutorials or tips which would help me.

  • İsmail Şahin

    Thank you very much nice tutorial

  • sourabh

    jquery-1.11.1.min showing
    errors in this file

  • Bulan Yurij

    Please help me!!!!!!! how to this in my hosting server???

  • sourabh

    how to remove error in jquery-1.11.1.min file.

  • vivek

    after entering name it fades but it remains blank after that…
    Please help me guys…
    Thanks in advance…

  • Chera Robinson

    Hi! I have a chat app, and I want to add the functionality to send files to my buddy, and my buddy also send me files too. How could I do this? Thanks! My buddy is in another city

  • How to run in host????

  • asc

    Hi Ravi your tutorial is really great. I would like to know how to choose the person with whom we want to speak with.

  • Khalil Serano

    Anyone fix Error! Connection is closed. Try connecting again. ?
    PLease

  • Muhammad Umair

    Everyone who are experiencing errors ensure the following steps!!

    1. Make sure that you use Tomcat 7.0

    2. Create all files ( index.html, jquery-1.11.1.min, style.css, main.js ) in WebContent folder, not in WEB-INF

    3-If you have created the project with different name make sure to change it in line 51 of main.js as shown in the following

    webSocket = new WebSocket(“ws://” + socket_url + “:” + port+ “/WebMobileGroupChatServer/chat?name=” + name);

    4- For people who are experiencing errors in “jquery-1.11.1.min”
    Go to this link: https://code.jquery.com/jquery-1.11.1.js
    Copy the code and replace it with your code in jquery-1.11.1.min

    I hope this helps!!!
    Thanks

    • Khalil Serano

      i solved it thank you :p
      now i have some problems in part2

      • Nikhil Kumar

        how did you manage to run at tomcat 7 ? is it not showing error as “The server does not support version 3.1 of the J2EE Web module specification.” ? i ran on tomcat 8 then and it’s giving “Error! Connection is closed. Try connecting again.” error . how you did it on tomcat 7 ?

    • Mohamed Ebrahim Hurab

      thank you 🙂

  • ivan

    Need help.. i can’t run project from tomcat 7.0 🙁 Tomcat cant start the project 🙁

  • Theasc

    I RAVI thanks for this turorial, there’s something i don’t understand and its how and when the sessionId is created. Also is it possible create a static sessionId that can be stored in the database and that could be reusable for the same client each time he connect himself ?

  • vivek

    page fades away when join button is clicked. please help.

    • Oussama GHOUAGH

      Hello ,
      I added the Java EE to the eclipse IDE that comes with my android SDK as described above however, it seems that there is a conflict, why ? I don’t have the answer for the moment. if you if you’ve tried what have been said below in the comments, and it still doesn’t work (fades) ,try with Eclipse for Java EE application.
      I suggest https://eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplerr
      Good luck

  • Yamini

    The page fades away when join button is clicked. please help me

  • akshay

    The page fades away when join button is clicked. please help me.
    if any one can help then please tell me..

  • The page fades away when join button is clicked. please help me.

  • asc

    I would like to know if it’s possible to maintain the webSocket connection after reloading the page ?

  • JACK

    Problem and fixed
    1: Page fades away, don’t forgot to add package and class in src floder.
    2: Access tomcat from another computer, Tomcat is case sensitive so url ../WebMobileGroupChatServer must same when access from other devices.

    hope this help you guy.

  • Thanks Ravi, I like your article which is very helpful for me. I build my own chat app. I have already built many chat application for android and other platforms. If you need any application regarding, kindly contact us.

    • ricky

      I need chat application for android … above application fade away after click

      • If you need chat application for android, share your contact or contact us on +1908-301-6001

        • Shahizzam

          hye RK Patel.can we talk in facebook. i need your help

    • Hotcaribbean Hotcaribbean

      Hi RK Patel. I have a question and i hope you can give me an answer please. How can i get this app running on a different server then localhost. I tried to change te ip adres to a other but that doesn’t work. Please help me

  • Josh

    Still can’t fix “Error! Connection is closed. Try connecting again.” while clicking on join button
    Has any body been able to fix this cause I couldn’t fix it and I have check through this discussion, no one with this bug has report it fixed

  • Gubaz

    When I click Join Nothing is happening….
    can anyone help me about that ? :/

    • Josh

      Are you sure that you link the main.js script correctly? Make sure index.html, main.js, jquery-1.11.1.min.js and style.css are in WebContent

      • Gubaz

        Yes I’m Sure That They are at WebContent…
        When I Click Join page is reloading and thats all…
        I think I did everything according to tutorial…

  • Traviss

    What if I want to use android studio, can I add j2ee to it?

  • kashif

    The type java.lang.Throwable cannot be resolved. It is indirectly referenced from required .class files,

    this is shown when i import the package u gave me and it is not working plz tell me why it is happen..thanks

  • Muhammad Waleed

    good work bro

  • Mohit

    how to use websockets on a real website through a web host .
    Suppose – if I have a website http://www.abc.com (made through godaddy.com).
    how to start the sever file?
    can anyone help?
    thanks in advance..

  • Divya

    Heylo…The page fades away when join button is clicked…Please Can anyone help me …

  • swapnil

    [2015-03-14 11:40:03 – WebMobileGroupChatServer] D:eclipsenew bostonWebMobileGroupChatServerresvaluesstyles.xml:7: error: Error retrieving parent for item: No resource found that matches the given name ‘Theme.AppCompat.Light’.

    [2015-03-14 11:40:03 – WebMobileGroupChatServer]

    [2015-03-14 11:40:03 – WebMobileGroupChatServer] D:eclipsenew bostonWebMobileGroupChatServerresvalues-v11styles.xml:7: error: Error retrieving parent for item: No resource found that matches the given name ‘Theme.AppCompat.Light’.

    [2015-03-14 11:40:03 – WebMobileGroupChatServer]

    [2015-03-14 11:40:03 – WebMobileGroupChatServer] D:eclipsenew bostonWebMobileGroupChatServerresvalues-v14styles.xml:8: error: Error retrieving parent for item: No resource found that matches the given name ‘Theme.AppCompat.Light.DarkActionBar’.

    [2015-03-14 11:40:03 – WebMobileGroupChatServer]

  • Naser Tamaskani

    my local ip range is : 192.168.1.0/24 and i forward the local ip to my valid ip but the problem is on browser it has Eror Connection is Closed! but the Android App work well , what is the problem ?