Learn Socket.io with Next.js/React.js in 20 minutes

first of all I will create a folder named next socket inside the folder I will create a folder named client I'll create another folder named server I will open it with code open the client I'll now execute the command npx create next app at latest this is going to create a next app for us we'll keep everything default I will use name of the project dot which will create everything inside this folder itself and keeping the everything default I'll say yes to the app router and everything right this has created all the boilerplate stuff while this is being executed I will go to the server folder and I will open it with code inside This Server folder I will execute the command npm init which is going to initiate the project I will then install not mod which will help to keep the server active now I'll go to the package.json file inside this file I will write the query to start the server which will be node monserver.js then I will create another file named server.js inside this file I will write code to log hello in the console check if it works or not I will then execute npm start which is printing hello as expected then I will open another terminal inside this I am going to execute npm install it's okay dot IO which is going to install socket dot io4d server then I will write const IO equal to require socket dot IO 3000 this is going to require or import this okay.io for us and it will run this server on the port 3000 now I will Define course this will contain the origin which will be the address of the client course will also consist of the methods which will be gate and post I will now use predator to format the code to make it look good now I will write IO dot on connection this will be executed whenever a user is connected a user will be connected to the socket we will log that the user is connected and will save this now inside the client-side code I will execute npm run Dev which is going to start the development inside of the browser the port 3000 is already utilized so the client is running on the port 3001 so in the course I will change it to 3001. I will now open the URL inside of the client code I will go to the app folder and the page.tsx file inside this file I will remove all the boilerplate stuff I will put a simple div with the text hello inside of it in another terminal I will execute the command npm I socket dot IU Dash client which is going to install the client-side socket.io for us I will then import IU from the socket.io dash client I will then use the use effect hook I will create a state variable named socket and set socket which will initially be undefined I want the server to be connected with the client only once that's why I will use the use effect hook which will execute the code only once so inside it I will write const socket I'll Define socket which will be IO and inside of it will be the address of the server so here the address of server is localhost 3000 now if I save this I will get the error which is the server component error cannot be used inside of the server we will use the use client there is no error now and if you check the server site code we can see that a user is connected is login it means our client is successfully connected to the server now I have written this code to this code will have an input to send the message another input to join the room and it will show the messages in the about uh there are already two messages inside of the inbox state which are hello and hello now I will write const handles and message which is going to be executed when the user clicks the send message button now inside of it we will Define a message before this we will Define a state variable named misses which is initially going to be empty we will also Define another state variable for the second input which is going to be room name and which is also going to be empty initially right now I will write socket dot emit before writing socket dot emit we can first set the socket to the socket that will be defined initially now this error is of type mismatch which can be fixed by defining the type of the circuit state inside of the emit I will have the message and the misses State variable what this will do is this will pass this message to the server I am going to send the room name along with the message to the server now to receive this message in the server I will write socket.on message and the basis I am going to receive along with the room name I am going to log this the message along with the tool name now to check if they are being received by the server or not I will send the message the message has not been logged it means it has not been received by the server we have to define the on click to the send message button to make it work the input is not changed the message is not changed when something is changed inside the input box so to make it change we'll write this code now the message is successfully being received by the server foreign [Music] change for the room input as well [Music] which is going to take the event and is going to set the room name to the event or Target dot value if I'll write the root names as the room name I am getting it right this means that a message sent by the client is successfully received by the server now to emit this message to all of the clients I will write I O DOT emit dot broadcast is used when the user not wants to send the message to himself but here in this case we want to send the message to back to the user as well so we will not use the broadcast [Music] now I am going to receive the send message from the server back to the client [Music] I will write socket dot on message I'll get the message I will set the messages to the previous messages along with the new misses so as we can see the message is getting printed but the hello was getting printed so we need to change it to message if I write I want to send this message to all connected users I am able to send this message now if I will check that I am receiving this message yes I am receiving means the message is sent to all the clients I will remove hello and nice from the default messages to make this empty now to make the room work as well apply one click to the join room button as well I will have a function handle join room I'll Define it const handle join room which is going to send the room name to the server now to receive the role name inside of the server I will write socket dot on before that I am going to write if the user is disconnected the server should log that user disconnected if I will change it to disconnect instead of disconnected it is working correctly yeah we are getting that user disconnected and user connected correctly now I feel right my message to be sent to everyone this is being sent to everyone connected to the server now to make the join room button work socket dot on join rule it will take the room name from the client it's okay dot join and then run name [Music] I will log this as well now if I try to join a room the room has been successfully joined by the upper client let us join the same room by the other client as well now if a user wants to send a message to a specific room which means he has a role with the not a zero length we will emit the message to specific people now if there is no room dot length I will send the message to everyone there was error that only one message was showing to finish that error we have to take the inbox as input inside the set inbox function to fix that error and as you can see now the error is fixed now let me have a phone first I will join the room by two of the clients now if I send a message from one of the clients it should be received by only one client this is not stand but be what has been using the trouble so inside of the server while emitting the message to only the person who are in the room I4 code to put child name here that's why it was not being sent now if I try again now if I have these three clients and try to send this message dismisses is only sent to one of the clients because the room has been has not been joined yet so if I join the room by two of the clients the message is being sent to the two of the clients if I do not put any room the message is sent to everyone connected

Channel: Happy

Views: 9,794

Keywords: javascript

Id: 5ATxl1PwxIA

Length: 21min 16sec (1276 seconds)

Published: Wed Jun 28 2023