Building an Android Chat App with socket.io— All source code provided!

How do you implement a chat server in your android application? In this tutorial, we are going to learn how to use Socket.io of node.js into our android app. It is actually really intuitive and I’m going to explain every single detail so stay tuned!

All Source code used in this tutorial is uploaded on my GitHub repository right below! If you want to skip the layout part, just clone my project and use it. (Star will be really appreciated! ٩(●˙▿˙●)۶)

joyceHong0524/socket.io_android

0. Before we start..

• This tutorial is written in Kotlin with Anko Library
• You know the basics of android and node.js programming

1. Basic of socket.io (Don’t skip)

Socket.io is needed when we need real time in our application

If you are trying to make chatting application or multi-player game where it is important to make sure to maintain high-speed response time, it is not recommended to make HTTP calls since it is really slow. Rather, in socket programming, we will only send the little data packets which are needed through web sockets. There are several things that you need to keep in mind which will help you to understand socket.io faster.

1. Socket.io is event-based. Both server and client emitting an event and listening to event from each other. (It is like we set an OnClickListener for our button in android.)
2. A simple HTTP handshake takes place at the beginning of a Socket.IO connection.
3. By using room and namespace, you can categorize sockets in the way you want.

Since this article is covering how to use socket.io in android project, not about socket.io itself, I strongly recommend you to read the article below which explains socket.io well :)

Understanding Socket.IO

2. Writing Socket.io Server with Node.js

There are a few points that you need to give it a look,

• io.on(‘connection’, function(socket)){-}: Server waiting for connections from clients and we set the callback. Once the connection is successful, this will return socket with socket id. All the logic of socket will be written in this callback function.
• socket.on(‘EVENT_NAME’, CALLBACK): It listens to an event named ‘EVENT_NAME’ from a client.
• socket.emit(‘EVENT_NAME’, JSON_DATA): It emits an event to the client.
• socket.join(‘ROOM_NAME’): Joining room with the given name.
• io.to(‘ROOM_NAME’).emit(‘EVENT_NAME’,JSON_DATA): It emits events to all sockets in the room.
• socket.broadcast.to(‘ROOM_NAME’).emit(‘EVENT_NAME’,JSON_DATA) : It emits an event to the entire sockets in the room except for the socket which is communicating with now. (This might be little tricky to understand, for example, if you wrote a message in the chat room, everybody except you will get a refreshChatRoom event from server.)

3. Setting the Android Studio Project

<build.gradle(app)> Let’s add dependencies we need for our app!

<AndroidManifest.xml> Don’t forget to add INTERNET PERMISSION in the manifest file.

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

If we give a look at this project’s structure, it looks like this.

• enum.kt: It has global variables which indicate types of message.
• models.kt: It has data classes that we are going to use for parsing JSON data type from the server.
• ChatRoomAdapter: Adapter for RecyclerView in ChatRoomActivity.
• EntranceActivity: Entity activity which we will get a user name and room name to enter.
• ChatRoomActivity: This activity will enable our app to communicate with the server by emitting and listening to events.

Since this is not about how to make an android application but is about socket programming, I will only cover ChatRoomActivity.kt :) (Maybe I will cover everything in another article)

<ChatRoomActivity.kt>

I bet you’ve realized that somethings are really similar with server-side codes that we wrote in chapter 2. And yes, it does emit events and listen to the events in the way the server did.

I wrote all the details in the comments as precise as possible so that you can understand what’s happening in my code.

4. Yay!

Well done. If you run this on your AVDs, you can see the chat app like this.

If you want to forward this application further so that you can actually use in the production-level application, you might want to add typing function as well (showing who’s typing). In this article, only group chat using ‘room’ was introduced, but 1:1 or 1: N chatting app can be easily made with namespace and room as long as you understood this tutorial (I hope so).

Hope you enjoyed this tutorial and claps will make me dance ٩(✿∂‿∂✿)۶