Creating a chat web app using Express.js, React.js & Socket.io
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">
<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 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:
