Menu

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

November 7th, 2017

  • Implementing Send Message functionalityLet’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…
  • 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.jsapp.jsThis function will catch…
  • We already implemented a messages.map functionality so now every time you add a message you should see it in your chat.

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. We will now…

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.

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:

Create a Backend folder with app.js file:

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

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:

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

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