Sending message to specific user with socket.io

Sending a message to the specific user with socket.io is very important feature If  you are building private Chat application. When I published Private Chat application, I mentioned that We are not sending a message to the unique socket. Instead, we were broadcasting the messages and showing to the specific user that by AngularJs.

But this article is truly based on Sending message to the specific user with socket.io and will explain how we can do that in socket.io.

 

Also, read Typing notification in chatting application using nodejs and socket.io

     Download

     Demo

 

1. Sending message to the specific user with the socket.io workflow

Here we  are keeping track of all the users in the array of object. When users connect to NodeJs server, then Nodejs server sends an array of object to the client as a list of online users. This object comprises of unique socket.id as well as username which is provided by the client when a client connects to the server.

for example, [ {id:'some randon id',name:'Shashank'},{...},{...}....{n}];

 

Note : In this application, I am using an array to store the users connected to the server, But In production please avoid this idea instead use your choice of database to store the user’s information.

 

The below Image shows how we are storing information of users connected to the server.

Here n number of users connected to the server, we are storing their respective socket.id, name and throwing back the array of object to all clients connected to the server.

 

sending messages to specific users with socket.io user connecting to server

To send a message to the particular client, we are must provide socket.id of that client to the server and at the server side socket.io takes care of delivering that message by using,

socket.broadcast.to('ID').emit( 'send msg', {somedata : somedata_server} );

For example,user3 want to send a message to user1. Assuming user3 is contacted from Chrome browser and user1 is connected to firefox browser as shown below image.

sending messages to specific users with socket.io

 

Here, managing Array of users plays very important role in terms of showing online users in the chat room.For example, when one user goes offline other users should get updated list of online users.The figure below explains the same have a look,

sending messages to specific user logout from server

 

 

Also, read Showing online users using Nodejs and Socket.io

2. Folder structure and package.json:

Before creating a project let’s take a look at our project folder structure.In this application, we have three main folders named as utils, views, and public_data in our application.
Folder structure:

 

Here I have 1.7.1 socket.io version installed by the time of writing this article.

Find yours, cd/dir_name/npm list socket.io

To create new nodejs, the best practice is to start with npm init. This command will create a package.json file. Here is my package.json file,

 

3. Creating Nodejs project

So Let’s start off by creating config.js in utils folder. This file takes care of express related configuration.
config.js :

 

Now let’s create a server.js file. In this file, we will add the configuration of our application.

Server.js :

 

Now the last piece of the puzzle on the server side is remaining and i.e. routes and socket event for our application. For that, we have to create one more file called as routes.js inside the utils folder.

Here,

In the appRoutes() function, we can add express routes but for now, we are just rendering the index.html file.

In the socketEevents() function, we have added the socket events.

With the help of these events,

  1. we will add the users
  2. send messages to them and
  3. delete the user from the array.

 routes.js:

 

4 FrontEnd implementation

To communicate with the server, we need to add Socket.io in the client side code. we can do that by importing the socket.io script as shown below,

<script src="/socket.io/socket.io.js"></script>

After importing this script, we can call socket by writing below code,
 const socket = io.connect();  
Now we can communicate with the server on emitting events on top of socket constant. Let’s take a look at index.html file.

index.html

Now let’s write some Angular Js code make our application actually work. Create a script.js file inside the /public_data folder  and write the below code.

script.js:

 

Now using this article you can Send a message to the specific user with socket.io and you can integrate this feature in the realtime private chat application.

Further reading and links:

Socket.io rooms and namespaces