Realtime Chat App - One-to-One using Flutter, Socket.io & Node.js

In my previous blog on real-time chat I discussed about how to get started with socket.io and setup a simple chat app in which one can chat with all the people online. You can read it here. In this article I will be discussing about making a chat app in which you can chat one to one with someone.

What will you learn?

• Using socket.io to create a real-time connection between two devices
• The concept of rooms and how to use them with socket.io
• A bit of scoped model library 😅

Prerequisites

The following should be installed and running in your PC.

• Node.js : https://nodejs.org/en/download/
• Flutter : https://flutter.dev/docs/get-started/install
• Heroku CLI : https://devcenter.heroku.com/articles/heroku-cli
• git : https://git-scm.com/downloads

Rooms

Rooms are logical grouping mechanism which can be used to target only a specific socket and not all of them.

Lets understand it in simple figures :

Previously one user was sending a message and the server broadcasted it to all the other users.

Before using room

After using rooms the server only sends the message to the particular room.

After using room

This way we can achieve one to one chat using rooms. So let’s get started.

Node.js (Server-Side)

Create a new node project and install the following dependencies:

• express
• http
• nodemon
• socket.io

Go to package.json and add the dev script:

dev script in package.json

Next in the index.js file add the following code:

Every user connected to our server has a particular chatID and that user joins the room with the same chatID. Thus if anyone wants to send message to a particular user he targets their chatID.

Now that our server side code is completed lets deploy it to Heroku.

Create a new file in the root directory named Procfile and add the following line

web: node index.js

Next create a file named .gitignore and add the following line

/node_modules

After this initialize git and commit all the contents. Next create a new heroku app and push the contents to the master branch. If you face any issues, you can refer to my previous blog or the heroku documentation. After successful deployment we will get the url of our node server.

Flutter (Client-Side)

Now that our backend is up and running, its time to create the flutter app. Create a new flutter project and add the following dependencies in pubspec.yaml file :

• scoped_model: ^1.0.1
• flutter_socket_io: ^0.6.0

Let’s create our two data classes Message.dart and User.dart.

Next create the ChatModel.dart where all the logic for socket and all the data will be stored.

The ChatModel class contains dummy data of all the users, the current user and the friend list of that user (which is all the users except the current user). It also contains all the messages. There are there methods in it.

• init() : For initializing all the variables and also initializing the socket and adding listeners to the socket.
• sendMessage() : Sending message to the server and adding it to the list of messages.
• getMessagesForChatID(): Extracting the messages from the message list which are relevant to the current conversation.

Next let’s create AllChatsPage.dart. This will be the page where all the users will be displayed.

The init() in the ChatModel is called from the initState() of AllChatsPage, thus initializing our app on start.

Create the ChatPage.dart where the messages will be displayed.

Finally open main.dart and replace the existing code with the following:

How to test if its working?

Build and run the app in one device. Then open the ChatModel.dart and in the init() method initialize currentUser with someone else. Example:

currentUser=users[1]

Rebuild and run the app in another device. Now you can chat with the other person. 😄

What’s next?

Build a cool UI for the app. Remove the dummy users list and store the user in some database. Also try to implement online status for a particular user.

Quick tip : Check for the number of users in the particular room.

If you face any problem, you can check out my github repo :

ibtesam123/chat-app-2-flutter

ibtesam123/chat-app-2-node

Don’t forget to star ⭐ the repo and give claps 👏 if you liked the article. If you have any queries you can ask in comments. Thank you 😄

https://www.twitter.com/FlutterComm