Making a Web plus Mobile Chat App from Scratch with your own Server using Pusher

HOLA GUYS!!! This is the second part of our series on making a chat app. In this, we will be coding the server for our chat app. It will be a node server handling requests from our web and mobile chat app. As discussed in the first part, we will use pusher to handle our realtime messaging feature. In first part, we made an account on Pusher and created a new channel app. We selected our front-end(React) and back-end(Node) environment and it gave us the code we need to add in our app. So using the same channel app which we used in front-end, we will integrate its provided code for back-end into our server.

If you want to navigate to any other part of this series, here are they:

1. Coding the ReactJS Chat App for Web.
2. Coding the NodeJS Server for Chat App.
3. Coding the React-Native Chat App for Mobile.

Before starting the coding part, let us first list down all the endpoints which are required for our app. Here are they :

• Registering the new users : This endpoint will take some basic info of the user and will return the info back to ensure a successful register.
• Signing-in the user : User will sign in with the email and password provided at the time of registration. It will return back the basic info of the logging-in user which is to be displayed in the front-end.
• All users of the App : This can be a simple get request. The server will return us with all the users of the app along with their basic info. All the users are required when someone search for a friend to send him/her the friend request.
• Friend Requests of a user : This endpoint will take some basic info of a user and will return all the friend requests that the user has pending.
• Making of friend request : When a user clicks to follow his friend, the friend request data has to be added in the database. This endpoint will do that work.
• Confirming friend request : When a user confirms a request, the data has to be removed from friend request table and a new table for storing the messages of two friends has to be made. This endpoint will handle that.
• Contact List of a user : This endpoint will also take some basic info of a user and will return him with the list of all his contacts/friends.
• Messages between a user and his friend : When a user clicks on one of his contacts, the previous message chat has to be displayed. This endpoint will return that message chat.
• Adding New Message to database : When a user sends a message to his friend, that message has to be added to the database. This endpoint will handle that.

So these are all the endpoints which we are goint to make in our server. Again, I will not focus on each and every minute thing, I will discuss the major functionalities only. If you get stuck anywhere, here is the link to this github repository. So let us start now.

Coding the NodeJS Server

• Start with the making of a new directory. Name the directory whatever you want, mine is Chatter-Server. This is going to be the root directory of our server. Inside it, create a file called server.js which will act as an interface for our requests and endpoints.
• Initiate a package.json file inside this directory by running the command

npm init -y

• After having the package.json initialized, run the command given below to to install nodemon as a development dependency :

npm install nodemon -save-dev

Note that their are double dash before save. Medium doesn’t allow it to write. About Nodemon, nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

• Inside the package.josn file, under scripts, we are having a “start” script that has “nodemon” as its value. Change that “nodemon” to “nodemon server.js”. This means that after starting our server using “npm start”, nodemon will listen to any changes happening inside server.js and when you save it, they will be implemented to the live application.
• We will be using Express in our server to make things easy. Install it via npm and import it in the server.js. Below is an example of simple server using Express :

Install other node module using npm(or yarn) which are required in our app. See them inside the package.json file of its github repo. One of the modules listed in the file is “knex” which is used to handle database from our server. In this app, we are going to use PostgreSQL database to store our data so make sure you have postgres installed on your system. After that, knex will be used to connect our database to our server so that we can make tables and do other stuff using knex in this database. I strongly suggest you to go through the following knex documentation of installation and connecting to database. With this done, we are now all set to start the real coding.

• As shown in the server.js file given above, we are going to create our components inside a different folder and will import them inside server.js to use them. Make a folder inside your root directory with the name of components and here we will make our different components(endpoints) which we are going to use.

Creating Components

We need to have some tables in our database before registering the first user.

1. The “chatterusers” table : This table will contain the basic info of all the users of our app. It will have columns like email, name, password, joined and imageurl which will have basic info of the user. Create this table yourself via terminal or whatever tool you are using to handle database.
2. The “frndrqst” table : So this table will store all the friend requests send by someone to someone. It will have two columns “fromperson” and “toperson” which shows that from whom the friend request is sent and to whom it is sent. We will add data into this table when a user sends a friend request to someone and remove that entry when the other user accepts the friend request.

So with these two tables initialized, let us now start with our register part.

• Registering the User : When a user registers himself, we will add his info to our “chatterusers” table. Along with this, we will create a new table with the name of “{name}friends”. So like if Rahul is registering, the table name will be “rahulfriends”. We will use only lower case letters and no space anywhere. This table will be further used to store the info of all those users who are Rahul’s friend. So upon registration of any user, a new table will be created. If everything goes successfully, we will send the user his info back otherwise we will send the error. Note here that right now we are not much focussing on security issues. We have saved the password as it is, but it should be converted to some cipher first and then the cipher should have been saved. But right now I am concerned only about basic features. Here is our code for the Register component.

• For Signin component, we don’t have to worry much. We will simply check if email and password submitted by the logging in user are present in our “chatterusers” table or not. If yes, we will return the data of the user otherwise we will return the error. Here is the code for it :

• Then comes the part of displaying all users of our app so that the new user can send a friend request to someone. This is quite simple. It can be handled with a simple get request where we will return all the users from “chatterusers” table. The corresponding code is shown below :

• Now for sending a friend request to someone, we will request the name of request sender and request receiver and will put them into our “frndrqst” table. Here is the corresponding code :

• To show the friend requests for a given user say Tom, we will simply filter our “frndrqst” table by Tom’s name. This will give us a list of all those users who have requested Tom. We will fetch their info from “chatterusers” table and will send the response data back. Here is the code for this :

• Now comes the part of accepting the friend request. When a user(say Tom) clicks on the Accept button of a friend request(say from Harry), we will notify this to the server. In here, we will remove that entry from the “frndrqst” table, add the contact detail of each person to other person’s friend table. Like we will add Harry’s info to the table “tomfriends” and Tom’s info to the table “harryfriends”. Also, we will initialize a new table here with the name of “{fromperson}friend{toperson}”. In this case, the table name will be “harryfriendtom”. This table will hold the messages exchanged between Tom and Harry, and will return them the messages when one clicks on other’s contact in his contact list. Here is the code for this :

• Now let us handle the messaging part. First, there is a component which handles the message i.e serves messaging chat to the user. It is also quite simple to do. When a user clicks on a contact from his contact list, the name of the table corresponding to those two users is sent to the server, the server fetches data from the table and send it back to the user. The corresponding code is shown here :

• Finally comes the functionality of sending a message and notifying the other user about it. So when a user(say Tom) messages other(say Harry), first the message will be added to their corresponding database along with time and then the friend’s table of both the users is reshuffled to put the most recently contacted friend at the top. Finally, we will run the pusher method to notify the other user of the message, this will lead to the other user’s browser fetching the message data and his new reshuffled contact list. To add Pusher in the server, first install it via npm or yarn using the command :

npm install pusher

Add the following code to the server.js file to initiate the pusher object with the same credentials you used in front end :

var pusher = new Pusher({
  appId: '9****6',
  key: '747****************',
  secret: '4a**************38',
  cluster: 'ap2',
  encrypted: true
});

And finally, pass the pusher object to this component where we will trigger it to notify the other user about the message.

So here we finally finishes our coding for server. It need to be hosted online so that it keeps on always working and ready to accept calls anytime. I have hosted mine on heroku, you can host it wherever you want. There is one thing to note down here, we have taken security steps anywhere in our server. So it open and anyone can access the data by making calls to our server. But I created it only for implementing the basic functionalities of chat app which are all accomplished nicely. Thanks for this part, I will now move on to the third part of this blog series for making a React-Native chat application for our mobile.