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

Create a React app by running create-react-app chatapp command in your terminal.

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">

2. Implementing functionalities to Chat component

We will now add state to our chat component which will hold the current username, message, and an array of all the messages we will receive and send.

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

Create a Backend folder with app.js file:

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

Let’s go back to our Client’s Chat.js Component and add the following functionality to our <button>:

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…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store