Real-time Chat application under 5 minutes using NEXTJS and Socket.io

After creating the Next app, our project structure looks something like this.

go to pages/index.js file and copy the basic template.

Whenever the component is mounted, socketInitializer() function is called and whenever the component is unmounted, we are disconnecting the socket connection. But where is the socket connection happening?

Before that let's set up the backend, here we use Nextjs which allows you to create APIs endpoints in a pages directory as though you’re writing backend code.

In pages/api we will create a new file called socket.js.

Now, when the client connects from the front end, the backend captures the connection even, with that we are creating a new socket.io server and assigning it to res.socket.server.io.

Improving the code.

Now here, if a res.socket.server.io exist, then no need to create the socket.io server again, so we are simpling returning.

Inside the socket connection, we have created a listening event.

So what it does is, Adds the listener function to the end of the listener's array for the event named send-message (we call it as emit). So whenever a emit happens from the frontend with the event named send-message, then this event gets executed.

Inside it, we have an emitter named receive-message, which will emit the received object (obj) to the client side.

We have initialized the socket by using the fetch(). This will create the socket server.

Next, we have an event listener which will listen if any emit is happening in the name receive-message.

Username and a message box, the message box input field is wrapped inside the form. Whenever the form is submitted, we are calling the handleSubmit function.

Inside the handleSubmit function, we have an emitter, that will emit a username and a message as an object to the send-message event listener in the backend. After it reaches the backend, we have another emitter inside the event listener (receive-message), which will emit back to the frontend.

Now the receive-message event listener gets the data.

All the above function happens Real-time to all the user’s currently using the application.

Go and play around with the code. Try creating a room for the user, refer to this document.

All the codes are the in my GitHub. Check them out and STAR the repository if you have successfully completed the Chat Application.

Like and wait for an awesome project with socket.io and Nextjs.

Spoiler alert, the next app would be a game.