Integrating Socket.IO with Next.js :)

Step 1

In this step we will install the dependencies that we need

socket.io: This module allows us to manipulate WebSocket on the server side.

socket.io-cliente: This module allows us to manipulate WebSocket on the client side.

express: We require it to customize the Next.JS server.

If you liked the terminal that I am using, it is called Hyper and we can customize it in many ways.

Here is the download link: https://hyper.is/

Step 2

In this step we will dedicate ourselves in the structure that our project requires.

After having installed the dependencies, your project should look this way.

Now add the “scripts” object, which will have all your commands npm or yarn

Finally we have to create the folder pages, inside the folder create the file index.js. And the server.js file at the root of the project.

Step 3

This will be the last step, which is dedicated to configuring the file server.js.

We will send a message to the client.

Already finished the configuration of our file server.js.

Step 4

Configuring your index.js file.

componentDidMount

It is a method that belongs to the life cycle of a component in React.

This method only runs right after the component has been mounted to the DOM. It is the perfect method for integrating third-party libraries, performing some ajax request, or setting a setTimeout or setInterval timer.

Your final result should be this 😜

As you can observe the protocol 101 that belongs to WebSocket, is working 😃