Creating a chat web app using Express.js, React.js & Socket.io

Antonio Erdeljac
Oct 31, 2017 · 3 min read

SUPPORT ME BY READING THE ARTICLE FROM IT’S ORIGINAL SOURCE

In this article I will be creating a chat web app using Express.js, React & Socket.io. I will be using Bootstrap for styling. You will see how the final files should look like in the end.

You can also visit the github to see them now: https://github.com/AntonioErdeljac/chatTutorial

This is what we will achieve:

1. Basic setup

Edit App.js:

Create Chat.js:

Add Boostrap resources to your public index.html file or use npm to install it:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

2. Implementing functionalities to Chat component

We will also implement functionality which will sync input’s values to state’s values.

Edit the div with messages class to loop through all the messages which we will have and display author’s name and his message:

We will implement button click functionality later. Now we will setup our server.

3. Quick server setup & Socket.io connection establishment w/ Client

Run the server in your terminal by running nodemon app.js

Now lets add socket.io to our server.

Install socket.io package using npm install — save socket.io and require it in our app.js server file, then establish a basic connection:

Now lets go back to the client side, in Chat.js add ‘socket.io-client’ npm package

npm install — save socket.io-client

Now import it and then setup a socket listening to the port your server is running on in constructor:

Now in terminal in which you are running the server you should see the socket.id printed out in the console, and every time you refresh in the browser it should print out a new one. This is the output you should get:

server is running on port 8080
CRFIrGOqYzZDdpHAAAA // this is diffrent ofcourse

4. Implementing Send Message functionality

Now let’s create this.sendMessage function:

in Constructor add the following:

Great. You are now sending the message to the server every time you click ‘Send Message’, and then your message input is cleared so you can write another message. All we have to do now is tell the server to emit the message to everyone who’s socket is connected to our server.

In app.js on the server side add the following code:

What we are doing here is that we are emiting the info we received from the client (author and message) and we are sending it to every one else. Now all that’s left to do is to catch that emit on the client side and add the message to our messages array.

Back in the Chat.js component on the client side add the folloing in the constructor:

I will now post how all the files should look like:

Chat.js

app.js

This function will catch the emit sent from the server and add the object that looks like this {author: ‘Antonio’, message: ‘hello world’} to our Messages [] array. We already implemented a messages.map functionality so now every time you add a message you should see it in your chat. This is what your chat should look like:

The End! Thank you for going through this article! If you find any errors please report them to me!

Signature Networks

All the things we’ve learned as we go along in the IT…

Signature Networks

All the things we’ve learned as we go along in the IT industry.

Antonio Erdeljac

Written by

JavaScript Developer, Software competition participant

Signature Networks

All the things we’ve learned as we go along in the IT industry.