Socket.IO Mastery: Learn Real-Time Web Development

hey guysin and W to YouTube channel so in this video I'm going to be making you the socket.io monsters so now let's talk about what in the world is this technology which we are currently learning and why I should care about that so socer iio is a JavaScript library that enables real time bidirectional communication between the client and the server so what is a bidirectional communication means something which we are going to be discussing in a few seconds but I want you to just spare with me for a few seconds so it simplifies the process of building interactive web application by allowing data to be transmitted instantly and continuously between the client and the server facilitating features like chair application Live updates and multiplayer games and also the trading applications is something which we're going to be discussing briefly so that's just the actual definition of what a so iio is but now let's talk about what in the word is a bidirectional communication means so bir directional communication means that the information can flow in two directions both the web client like a browser and the server can send and receive data to and from each other in a real time so if something changes on the server it can immediately notify the client and wi Versa without the client needing to constantly ask the server if there's new information available or not so I know that sounds a bit awful and confusing but you know what let me just break this down for you so here is the analogy so I want you to think about the bidirectional communication is like a phone call so when you talking on the phone with someone you can both speak and listen at the same time it's not just a person talking while other person listen both parties can exchange information back and forth similarly with B directional Communication in socer iio both the web client and the server can send and receive data so creating a two-way flow of information like a conversation on the phone so that was just an intro to what our socket iio is but now let's just make a set of for recording Journey so now let's talk about the prerequisites for this course so I want you to just search my name on YouTube so it's going to just bring you to my channel and you can like check out my other courses if if you wanted to and here you can see I want you to just click on this link right here or you can either go to this playlist or you can also go to uh this playlist right here which is a fullstack JavaScript complete course so in my case I'm going to just open this one and if I open that it's going to just brings us to this fullstack um web development master class so you can check out the rest of the courses but what you have to know to take this course is a bit of reactjs knowledge and we are going to be using there for the final project I shouldn't have to call it a project but we will build a chat application us using reactjs so you will have to know a bit of reactjs and also you have to know the nodejs and you have to know the express JS so that's the three courses or maybe four courses like you also have to know a bit of HTML and CSS I mean like we're not going to be working with HTML and CSS that much but we will use that and you also have to know a bit of JavaScript and also uh note Jaz and express Jazz so yeah that's all the thing that you have to know to take this course before I make a setup for this course first of all I want you to come to this link which is a socket.io and if you just write there it's going to bring you to this official page of a socket iio and you can learn more about that the companies they are using the contribution here you can see they are calling themselves as a socket iio is a bidirectional and low latency communication for every platform you can go to the documentation but in my case I'm going to just click on this getting started button right here so you can learn more about there like how to initialize the project how to serve a HTML file integration with soer iio emitting events and something which we are going to be also learning throughout this course but yeah that was just a quick uh intro to what a socket.io is so now let me just create a folder right here and I'm going to just give it the name of like um my socket Dash CES okay and now I'm going to just open that in my vs code so now let me just open that in my vs code right here so it's going to open it right here on the other screen and now let me just make that a bit bigger now what I want to do is that I want to just create a setup right here so I'm going to be using Express CH and yeah we going to just working with the plain HTML file and also the CSS so now let me just open my terminal right here so the first thing which I want to do is that I want to initialize my project by using the npm inet Dy and now let me just hit enter right here so it's going to just initialize my node package manager file right here now let me just close there and I'm going to be installing a few packages right now so the first package in this course which we will need is a Express J so I'm going to just write npmi to install the express CH and also the node Monon and also the socket.io so now let me just hit enter is going to install all of them right here so while it's doing that I'm going to just create a file right here I'm going to just give it the name of like index.js and now let me just close that and I'm going to also create a file you don't have to create this file but I'm doing that because I'm going to be sharing or pushing my code into my GitHub so I'm going to just write my node modules right here s my file and here you can see everything is now successfully installed now let me just close there and yeah we are now totally setup but yeah we are totally setup now let me just go ahead and go to my package file right here and open that and I'm going to also create a script for myself so now let me just create a start script and I'm going to just remove that and I'm going to just write like noon index.js and I'm going to also write my type of modu as well so that we can use the Import and Export so now let me just go ahead and go to my index file I'm going to be just using console. log of hello hosan okay and now let me just run this I'm going to be using npm run or you know npm start with do so now let me just use that and here you can see we are now getting hello hoseen right here which is looking supremely amazing so now let me just saell that so now what I want to do is I want to take care of these steps right here so the first thing we would do is that we would grab a few packages which we need for this project then we would create instances of there then we will also serve our HTML file and we're going to be taking care of this fourth one a bit later but finally we have to just Len for our server so now let me just import my packages first of all so I'm going to be importing my Express chain from the expressjs and I'm going to be also getting the HTTP from the HTTP and we are going to be also grabbing the file URL to path and we would need that to serve our HTML file so we are going to be using like node URL and we would also need or something called the directory name function and also the joint function name as well from where from the node and also from the path module and finally we just have to import the server from uh the socket. now so now let me just save there and we are now totally done with importing the packages now let me just create instances of there so I'm going to first of all go ahead and just write my app and let me just create instance of Express CH and also let's create a server so I'm going to be creating my server by using the HTTP module and inside this module we already have the create server method right here and inside there we're going to be passing our express application and now let's just pass that to our new server which we're are grabbing from the socket iio okay okay so here you can see we are now grabbing the server from the socket.io and now we have to copy this server and now we have to just paste it right here inside the okay so now we are totally done with the instances and now let's just serve our HTML file so what I want to do is that I want to create my index.html file right here and inside there we will just use our doc type HTML and I'm going to just give it the name of like so come on socket.io demo or something like that and I'm going to be also creating my H1 right here and I'm going to just say like socket.io and now underneath there oh you know we're going to take care of the rest of them in a few second but now let me just save there and now the next which we have to do is that we have to serve our HTML file which we just created right here okay so now let's just do that and to do that first of all we're going to have to get the directory name so we would just use like dur name we cannot do them because uh we are using the module so we just have to use word name which we are already importing right here let me just show you that we are already importing this directory name function from the node and then a specific path modu so now we are successfully grabbing there but now inside that we just have to pass our file URL come on this method right here or not method but function and inside that we just have to write our import. met. URL okay so now let me just write my import right here inside there and now underneath that we're going to be just creating our route which will be the get method and if you go to the home we're going to be passing our call back function like request and response inside there and we are going to be just using our method which will be response. send file and then we have to just join our directory name and also we have to just join or index.html file okay so I'm going to just comment this line of code right now and I'm going to just loog to the console my D name right here so now if I save this file and now let me just go ahead and here you can see it's going to gives us you know let me just restart my server once again and here you can see it's going to just gives us my entire path right here so in this case I'm currently inside a c users hen then the desktop inside this desktop I have this sper which is my socket course okay so if I also want to attach my index file which you have right here okay so if I also want to attach that I'm going to be just using like comma and now let me just P my index.html file so now let me just save there and here you can see we're also adding this index.html file with that okay so now let me just cut that from here and now let me just uncomment this line of code out sell my file and now let's just check this out so I'm going to just save this file and finally we have to just create a server so we can listen to the server so now let me just create my port first of all you can just do this separately in the EnV file but I want to just make thing totally simple so I'm going to just write it right here so we are going to be just listening to this 3,000 port and we are going to be just writing our server. listen and now let me just P my port first of all and then we have to just write my cons. log which will just say like um server uh running on Port and now let me just pass my port right here so now let me just save that and here you can see it is already running but now let me just hit this board so what I want to do is that I want to just write my local host of 3,000 and now if I hit enter so it's going to just gives us this socket.io right here and why is that that's because inside this index.html file we wrote this socket I inside this H1 right here but if I also want to write something else like paragraph of lur or something like that let me just save that and refresh that and here you can see it's going to also gives us that text right here so yeah that's cool but now let me just cut that from here we don't need that so this is how we are going to be serving our HTML file but now let's just take care of defining a connection event handler so now let's talk about the essential part of this course which is called the i.on connection and then the Callback function so what do I mean by that and what are we on doing here the i.on is a method used to register the event listener for different events that occur on the server side so the iio object represents the main socket iio server instance so now let me just get into that in a bit detail so what are we doing when we call this method we are telling the soer iio to listen for a connection event which occurs whenever a new client establishes a connection with the server and the Callback function will be called whenever this event occurs and it will receive the socket object representing the connection to the client similarly when we call the socket dot on on the socket object to listen for the event specific to that individual client connection okay so this is what we are doing behind the scene but now let's talk about the syntax like how we are going to be doing there this is how we are going to be doing there first of we are going to be referencing to our socket server which is the ion and then we have a method on there which is called the on and we are going to be providing some sort of event there in this case we're passing the connection event and when somebody connects to there we are going to be passing this call back function and this callback function will take the socket as a perimeter you can give it any name you like but in my case I just give it the name of like socket and yeah you can also give it the name of like a client because the user will be coming from the client and then inside there you can do all of your magic so you know let me just write some code then you'll get to know what I'm talking about so now let me just fill this area which is Define a connection event handler so how in the we are going to be doing that the first thing which you have to do is that we just have to write our IO and what is IO let me just show you there the io is the new server and it is coming from the socket iio so we are now referencing to the socket IO server in this case and inside this IO server or the socket IO server we have a method now let me just write a DOT and here you can see we have numerous of method and properties and a lot of stuff right here but the one we're interested in is a on okay so here you can see if I just write on so it's going to just gives us that method at the top and now let me just execute there and now inside there it requires the event listener so in this case I'm going to be passing the event name of like Connection in this case and then the next thing which you have to do is that we just have to pass or uh call back function right here so you can pass your call back function like this you know let me just WR my funk and you can p your callback function like this but in my case I'm going to be using the es6 so I'm going to be passing my arrow function right here and you can pass the socket perimeter right now but I'm not going to now let me just write my socket.io right here I mean like my arrow function right here or you know what let me just pass my socket right here because I want to show you something and now inside there what I want to do I just want to write my console. log of user um yeah user connected to server and now let me just pass my check mark right here and now let me just save that and I want to restart my server so I'm going to be using the npm start in this case and now if I hit enter right here so it's going to only gives us that server running on Port of 3,000 and nothing is happening right now but if I go ahead and go to just my local host of 3,000 still nothing will happen on the client and also on the server here you can see nothing is happening but now the next thing which you have to do is that we have to attach our socket server to also our HTML file so now let me just go ahead and provide a connection for our socket server and how that we are going to be doing them we are going to be just writing our script tag in this case and for the script tag we are going to be passing the SRC and for the source we are going to be passing over socket.io then / socket. ijs right here so now if I just do that and now let me just um save this file but yeah let me just save this file and now let me just copy there from here I wanted to show you something and now let me just place there right here okay so we are going to be first of all writing our local host of 3,000 and now let me just place my U my/ socket.io and then socket. io.js and now let me just hit enter right here and here you can see we have our entire socket server and we have all of the method and the properties and every single thing or you can say all of the JavaScript of our socket iio or you can also say or entire socket iio library right here now let me just go back from here and here let me just open my terminal still nothing is happening right here but now the next thing which you have to do is that we just have to create an instance of our socket on the front end this is the server this is the front end or the client whatever you want to call that now let me just write my SRC not SRC but script and I'm going to be just spacing my type of module in this case and now let me just scate instance of our socket so now let me just WR a socket and I'm going to be just executing this IO and as soon as as I save this file let me just go ahead and refresh there and once I refresh there let me just open my terminal so what are we getting we are now getting that user connected to the server totally amazingly okay so yeah we are now successfully connected to the server and how we are doing that we are doing that because first of all we are providing this event which is a connection then we are also passing this callback function and we are now just writing this connection I mean like we just writing this callback function right here but but I want to show you something else so you know what let me just write my console.log of socket in this case and if I just write a socket now let me just save this file let me just go ahead and refresh there and now let me just open my terminal so what are we getting we are getting a lot of properties and a lot of methods right here so inside that you can like grab a lot of things about their specific connection which was just made and here you can see first of all we have a user connected to the server then we have our entire socket object and inside this object we we have ID we have the server we have a lot of information right here which something which we're not going to be taking care of that much but yeah let me just um restart my server once again and I'm going to be using the npm start but now let me just comment this line out sve my file and now let me just uh hit ID here so it's going to just restart my server let's just refresh there so it's going to just give us that server connected uh first and also second time okay so yeah this is how we are going to be connecting to the server but now let's talk about how we are going to be disconnecting from the server or you know let me just also show you the front end so this is how we are going to be connecting to our socket by using our front end I mean like by using the back end or the server but now let's talk about how we are going to be connecting to our socket by using the front and in this case and here you can see we are now currently working with our HTML file so now let's just do that the first thing which I want to do is that the syntax will be totally the same so in this case we are just writing the io but in this case we are just creating the instance of this iio right here and we are storing that inside this socket so now let me just copy that and place it right here and if I just write a DOT and here you can see we have IO once again but we are not interested in that but if I just write the on method then we have to pass over connection but in this case we are not going to be passing the connection in this case we are going to be just passing the connect in this case not a connection but just a connect in this case because currently we are working with the front and or the client whatever you want to call them now the next thing you have to do is that we have to provide a comma and then we have to just write our call back function right here so in this case I'm going to be just passing the console. log of like connected to uh client right here in this case and yeah client would be fine or you know let me just past it right here client and check this so now let me just sell them and now let me just refresh them and here you can see we are now getting the user connected to the server twice you know let me just restart there because I want to show you now let me just write my npm start once again so it is already connected because we are already inside this page right here but now let me just refresh there so we are already connected to the server but now let me just right click on there and open my console right here and here you can see we are also connected to the client as well and where is this coming from this is coming from this code right here so this is the client side code and this is the server side code right here here so this is how we are going to be establishing the connection from the server and this how we going to be making a connection from the um from the client there we go but now let's talk about the disconnect we also have a method of Disconnect as well so if you want to make a connection for that we are going to be using the connection uh event listener and then if you want to use the disconnect so for there we're going to be using the socket Doon and now in this case we're referencing to this socket for here we are not referencing to this IO because this IO is the entire socket server and this is a specific line which we are disconnecting right here you know let me just show you that that's a bit awful and sounds a bit awful but not that much so now let me just uh close that right here this IO is the entire socket like the entire web socket server right here we don't want to disconnect the entire socket server but we just specifically want to remove or disconnect a specific client which is connected to the server so how what we are going to be doing there we can give it the name of like socket but in my case I'm going to just give it the name of like client in this case so now let me just use that right here so we have client. on and now let me just pass the event listener of Disconnect okay disconnect there we go okay and I'm going to be also passing my callback function so now let me just pass my callback function so so when somebody disconnects from there so what we want to show so we just want to use like uh con log of like user disc as connected from the server and now let me just paste the cross or the x button or the X icon right here so now let me just save that and here you can see the user is connected to our server which is totally check but now let me just refresh there so the user disconnect there for one second and then reconnects there but you know what I'm going to just close there and now let me just restart there once again I'm going to be using there and the user successfully connected right here but now let me just close there and once I close there so what are we getting user disconnect from the server and we are now getting the cross cross icon right here which is supremely awesome but if you want to connect a specific user once again so how what we are going to be doing there we are going to be just using like a local host of 3,000 once again and the user connected to the server we are not disconnecting or entire server once again let me just say that once again we are not disconnecting the entire server we are disconnecting just a specific client from the server so our server is still connected but we are just disconnecting a specific user from our server there we go that was a lot of enthusiasm there but this is how we are going to be connecting a specific user and this is how we are going to be disconnecting a specific user on the server side but now let's learn about the client side so on the client side we are not going to be using like socket do on and then the disconnect or something like that we going to be closing that and outside from this socket we are going to be creating yet another socket instance right here so for that we are going to be just using like socket. on and when somebody disconnect so what do you want to do in that case we're going to be just spacing our Arrow function and we are going to be just saying like uh cons log of disconnected from uh server in this case and I'm going to be also passing my cross icon once again and yeah now let me just save them but this will not work because this is the client side and it will not work so for there we going to also have to use uh or you know there we go so for that we are going to be just using like set time out and now let me just pass my arrow function to there and I'm going to be also passing like 5 Seconds right here and now let me just pass my socket. disconnect method we have a disconnect method on the front end right here so what are we doing let me just explain that first of all we are creating an instance of our socket when somebody connects to our server so what do you want to show to your user we just want to show in the console we are showing that connected to the client and the check mark icon then after 5 Seconds our user will be disconnect from the front and or the client side then we're going to be also providing this disconnect from the server that's because we are currently listening to the disconnect method or event whatever you want to call that so now let me just save that and once I save there we are not going to be working with a terminal now let me just use my npm start right here it's it's going to just start my server and now what I want to do is that I'm going to also open my console right here and now let me just refresh that right here so here you can see connected to the client and after 5 Seconds we are going to be getting disconnected from the server ah not the server from the client there we go so now let me just save there and refresh there so it's going to give us that connected to the client checked and after 5 seconds it's going to giv us that disconnected from the client cross okay so yeah this is how we are going to be establishing the connection um on the server side and this is how we are going to be doing there on the client side all right so now let's talk about one of my favorite topic of this course which is called eming events so what do I mean by that eming events allows us to send data from one side either the client or the server to the other it's the fundamental feature of the realtime communication so yeah that's eming events but how in the world we are going to be using there so this is how we are going to be sending our data from the server to the client by using the socket. imit and here I want you to notti is the iMed so here we can pass any name you can provide banana you can provide orange you can provide computer you can give it any name you like but in my case I just give it the name of like message and then we are going to be providing the data which you want to send to the server right I mean like which you want to send to the client so this emit method allows us to send data from either the server or the client something which I'm going to be showing you in a few second so this emit method allows us to send our data in this case from the server to the client okay so how in the what we are going to be doing there first of all we are going to be using the socket here you can see we are now using the socket which is also called the client we are not using the iio Doon we are using the socket that perimeter which this callback function is taking and we are now executing this imit method on there and we are passing the event name of message you can give it any name you like and then we are passing the data of Welcome to the server you can pass the call back function you can pass anything you want right here like this is going to be the data which we are going to be sending from either the server or the client to either the server or the client I know that sounds a bit confusing but trust me it's not okay so yeah this is how we are going to be sending our data from the server side to our client side but now how the we are going to be receiving there this is how we are going to be receiving there first of all we are going to be using the on so here you can see we are now using the on what do I mean by there in this case we using the emit and in this case we using the on so what's the difference between both of them this emit meth me will allows us to send the data and this on method will allows us to catch or receive that data here you can see we are providing that same name which we are passing right here for this event so here you can also see we are also passing that same name we are now receiving we are now getting the data from this message so what is the data the data in this case is welcome to the server we are now storing the inside our message we're now passing the call back function to them and we are just logging that data right here so now let me just write some code and then you'll get to know what I'm talking about so what I want to do is that I'm going to go ahead and go to my server Right Here and Now inside there if I want to send my data so now let me just write like emit a message event to the client client so if you want to emit the message so in this case we are going to be using I just renamed that to client uh let me just write my socket right here you can either use the socket or you can use the but in this case the client will be supremely clear so you know what I'm going going to change this one and also change this one to the client in this case okay like the name doesn't matter you can give it any name you like but in my case I'm going to just give it the name of like client and now I'm going to be using that client and now if I just write the dot and here you can see we have a lot of data right here so in this case I'm going to be just passing the emit method right here and now I'm going to just execute that and now in this case you can provide any name like I mean any name for your event but in my case I'm going to be using like message you can provide banana you can provide orange you can provide hosan you can provide your name you can provide anything but in my case I'm going to be just passing the message right here and now let me just provide the data later we're going to be also learning about the arrow function but we're not learning about that so we're not going to be discussing that so now let me just write like uh welcome to the server right so like this is going to be the data which I'm pushing from the server side to my client side right here okay so now let me just save this file and now let me just go ahead and go to my client and now let me just get that data so what I want to do is that I just want to remove that because I no longer need the disconnection so now let me just cut that from here and here you can see this is our entire code right here and you know what I'm going to also just remove this stuff from here and let me just make that as a oneliner I'm going to also make this one as a oneliner like so so now let me just save there and now underneath that if you want to get that data so for that or you know let me just remove that from here so for that we are going to be using that socket and in this case if you wanted to get the data so we are going to be using the on method right here this emit method will allows us to send the data and this on method will allows us to receive the data so now in this case first of all we have to provide that name like from which kind of thing we are grabbing that data we are grabbing our data from this message so I'm going to also pass this message right here and now let me just pass my call back function right here and for the call back function we are going to be using like con log of message and I'm going to also provide that message as a perimeter and now let me just save that so once I sell there and now let me just stop my server and restart there and let's just wait for it server is running and now let me just refresh there so connected to the client and here you can see we are now getting that data like welcome to the server and where we are getting that data from we are now getting that data from the server oh what the hell did I just do let me just put that right here I don't know why that happened but you know let me just change that data I'm going to just say like um server is sending the data data to the client okay so now let me just save that and here you can see if I refreshed it and we now getting that same data right here okay so this how we are going to be sending our data or emitting the event whatever you want to call that from the server side to the client side right here we can also do that other way around so I'm going to just remove that from here and I'm going to be using like socket. emit in this case and I'm going to just P like new message or you can say like new message with the space you can also do there and now let me just space like this this is come on this is my new message from the client side or something like that now let me just s there and if you want to listen to their event now let me just remove both of them from here and I'm going to be using like um in this case my client so client. on and now let me just provide that same event name which is the new message so I'm going to just copy that from here and now let me just place it right here and I'm going to be also using the call back function of a message and now let me just proide my call back function of that message right here so now let me just save them and now let me just restart there I'm going to be using like npm start and now let me just wait for them and now let's just refresh there and here you can see we are now getting their data like this is the message like this is my new message from the client or coming from the client or whatever you want to call there so yeah and this is how we going to be emitting the data or emitting the events or sending and receiving the data in Soaker iio so that was about for the soaker and now let's just build our first uh basic chat applications so for that uh I'm going to just create a folder I'm going to just give it the name of like chat app okay and now let me just open this folder in my vs code so for that I'm going to be just using that same command and now let me just make that a bit bigger and there we have it so the first thing which I want to do is that I want to just use my npm init to initialize my current repository then I'm going to be installing the npmi to express JS and also the socket.io and also the noron so now let me just install there while it is installing I'm going to creating a folder I'm going to just give it the name of like public and yeah I'm going to also create a file given name of like index.js right here and now inside this file you know I'm going to take care of that in a few second but now let me just create an index.html file right here inside this public folder and I'm going to just write my do type HTML and now let me just go ahead and provide the title first of all and I'm going to just select Sim come on uh simple chat come on simple chat app we're going to be also linking that so I'm going to using like SRC and now let me just link that to the socket.io and then the socket. ijs and now underneath this script I'm going to be providing a bit of um CSS styling you can copy all of the styling from my gab repository or you can just pause the video and just write The Styling by yourself but it is not that much styling but yeah it is a bit of styling okay so now let me just save there and now inside the body the first thing which I want to do is that I want to just create a UL with the ID of messages and now underneath then we're going to be creating a form so now let me just create a form with the ID of like form and I'm not yeah I'm not going to be providing any action to them but now inside this form I'm going to be creating an input field and I'm not going to be providing the type but I am going to be providing the IDE of input and now let me just also provide the auto complete come on auto complete and it's going to be equals to off like we not going to be providing any auto complete for the user and let's just provide a button which will just say send okay so that's the basic HTML that we have to do and now let me just save this file and yeah I guess that should do it and here you can see everything is now totally set up now let me just go ahead and go to my package.json file I'm going to also write a start right here for the script and I'm going to be using like noemon index.js now let's just say there let's just test this out so npm start and it's going to just start my server and everything is looking totally cool and now underneath this form I'm going to be creating my script tag you can also create a separate file and you can just navigate to the file and you can do all of that stuff the first thing I want to do is that I want to just select the Dom elements right here in this case so I'm going to be first of all selecting my form and let me just use my document. get element by ID and now let's just select our form which is this entire form so we are now selecting there by using this ID and now the next thing which I want to do is that I want to select my input and we are going to be selecting there by using get element by ID of this input and here you can see we are now selecting this input by this ID right here so the first step is toally complete but now the next thing what you have to do is that we have to also create the instance instance of socket right here okay so for them we are going to be just using like con and it's going to be equals to socket and IO and now we successfully created the instance off there and yeah I'm going to be attach uh event listener to the form okay so now let me just do this so this is going to be the third step and I'm going to be using like form. add event listener and we are going to be attaching the submit event on there and now let me just pass my event object and now inside there we going to be just preventing the default Behavior which is just a refresh and we are going to be also searching for the input. value if we have some sort of a value then what do you want to do the next thing which you have to do is that we have to providing data to in this case to the server right here okay so if you want to provide a data to a server so how in the world we are going to be doing that by using the sockets so I'm just asking ask you a question and I want you to pause the video and answer that and here is my answer which is to use the socket. emit method and we're going to be providing our event name so in this case I'm going to be just providing like chat message and now let me just provide like input. value and now underneath that we're going to be just emptying out or input. value so now let me just save that so that's there but now underneath this one and for the fourth step we are going to be receiving receiving slash getting data from the server okay so how in the world we are going to be doing there and I want you to once again pause the video and answer me like how in the world we're going to be receiving the data from the server and we're going to be still using this one right here this chat message so here is my answer which will be the socket Doon and now let me just pass the chat message right here in this come on chat message and we are going to be listening to this event and now let me just pass my message inside there as a perimeter and I'm going to be just first of all creating an item by using document create element so create element and now I want to create my lii right here because in this case we already created or UL right here and we are going to be rendering our lii as a messages right here so for that we already create our element right here by using this create element and now let me just use my item. text content it's going to be equals to that specific message which we are going to be getting from the server okay so now underneath that we are going to be just using like document. getet element by ID and we now s cting our messages in this case so where is this messages this messages is this UL right here with the ID of um messages so that's why we are now using this get element by ID and we now selecting that so now let me just use my do append child and we are going to be appending that item which we just created and we are now setting that to the message content so now let me just save that and that's it about for the HTML side now let me just go ahead and go to my index.js file and here the first thing we would do is that we are going to be importing a lot of packages so packages so first of all we would need our Express J so let's just grab our Express now let me also grab my HTTP module so HTTP and we would also need let me just import my server and we would want to get there from the circuit. and now underneath that let's just create the instance so create uh instances and Ma server right here so now I'm going to be just creating an of app and now let me just use X come on exps and now let's just execute them and we are going to be also creating our server by using HTTP doc create server and now let me just pass my app inside there and underneath there let's just create our iio of new server and now let me just pass my server once again underneath that the third step which we have to do is that we have to serve static files in this case and we're going to be using like f. use and now let me just pass my express. static and now here inside that we are going to be passing this entire public folder and inside this public folder we only have this index.html file okay so we are going to be just making that as a static so now let me just write my public word here and underneath that let's just provide our fifth step which will be create the connection okay so we're going to be creating our connection in a few second but now let's just take care of the six step and the six step is to run the server okay so now let me just uh take care of the six steps so I'm going to be just using like server. listen and let me just provide a port of 3,000 to them and now inside that we are going to be just logging to the console like um listen l i s t and listening on this port which is 3,000 there we go now let me just take care of this great connection so how that we're going to be doing there we're going to be first of all referencing to the io now let me just use the on and when somebody connects so we're going to be first of all establishing the connection so then we can either pass the client we can pass anything we want but in my case so I'm going to be passing the socket right here in this case and now inside there let's just use our cons. log of user connected successfully there we go let's just provide our check and now underneath that we are going to be also taking care of the disconnect so socket do on and then when somebody disconnect so what we want to do in the case we are going to be just also using our cons. log of user disconnected right here and now let me just pass the X and now let's just get the data from our index.html file we are now sending this data so now let's just get this data so to get there for that we're going to be using like socket. on and now let me just provide my chat message which we are already providing right here so chat message and we are going to be storing there in the message and now let me just provide my arrow I mean like yeah aror function but the Callback function and we are going to be also sending that data once again to that client so let's just provide our chat message and now let me just provide that message right here so we are already getting that data whichever data the user provide for this input value we are now passing there we are sending that data to the server and we are sending that back to the client once again and here you can see we are now getting that data and we are now just log I mean like not logging but we now appending their data as item to the Dom so now let me just save both of these file and the Moment of Truth let me just use my npm start in this case and it's going to just start my server but import Express from Express J is not defined oh that's because ah God let me oh my God what the hell am I doing let me just also provide my type of module in this case once again so now let's just save that and let me just restart there once again okay so everything is now working totally as expected and what I want to do is that I just want to try my local host of 3,000 let me just hit enter right here and here you can see Ah that's because I just reconnected so now let me me just restart there once again so now user connected successfully which is totally awesome so now what I want to do is that I want to make them side by side so now let me just H I cannot even put this side by side let me just put one right here I'm going to copy that and I just open my Google Chrome right here and I'm going to just put that right here in this side but I'm working with a double screen that's why you cannot see that but you know what let me just paste this link right here hit enter right here we are also getting this input field and now let me just make this smaller a bit okay so let's just make their smaller it's a lot of pain and oh my God let me just make their smaller right here so currently we are now working with the Google Chrome and also the oppra GX so now in this case I'm going to be passing the message like hello hoseen and now if I send that and here you can see we are also getting there right here in this screen so now in this case let's suppose if I want to send the data of like uh I'm cool buddy uh how come on how are you do and now let me just send this data and we are now also getting that data right here and now let me just provide something else like uh nothing cool man and now let's just send this data so yeah that was our basic chat application using HTML CSS and or basic Express CH so now let me just refresh there and here you can see that data is toally gone and now let me just refresh there and that data is also totally gone so now we can successfully send the data by using you know let me just make this one a bit dark and I'm going to be just sending the data like one hit send let's just proide two three and four right here okay so yeah this is how we are going to be building our basic Express CH I mean like basic chair application so now let me just close both of them and that was our basic chair application welcome to the final part of this course so in this one I'm going to be showing you how you can use a socket.io with reactjs okay okay so now what I want to do is that I want to open my terminal right here let me just zoom in a bit so you guys can see everything a bit better and yep like that and now the first thing which I want to do is that I am currently inside my desktop and I want to create a separate folder so I'm going to just create a separate folder given name of like react chat app and now let me just go into this react chat app and now inside that I'm going to just creating first of all the server folder and I'm going to be also just running this Command right here which is uh um npm create react or create we app latus so now let me just hit enter right here and it's going to just ask us a few question and let's just wait for that so what is your project name I'm going to just give it the name of like client and now let me just hit enter and I'm going to be selecting my react in this case and now let's just select our JavaScript just a basic JavaScript hit enter right here now the next thing which I want to do is that I want to use LS so here you can see we have a client folder and we also have a server folder right here so client has something but the server doesn't not so first of all let me just open my um us code right here so just going to open my V code right here let's just close that and I'm going to just zoom in a bit first of all and here you can see we have this uh client folder which have something but not a node modules folder and we just have a server folder which is totally empty let me just go to my client folder so for them I'm going to be using CD and then the client and now let me just use the npmi to install all of that um what do you call it reactjs dependencies and everything like that and now inside the server or you know what I can wait for this one I'm going to just past forward the video right now and reactjs is now successfully installed now let me just go outside from this client folder and I'm going to go into the server folder in this case so I'm going to be using CDN server so now I am inside This Server folder right here so the first thing which I want to do is that I want to use the npm inet Dy so it's going to just initialize my repository right here now in this case I'm going to be installing npmi first of all the course package then the express CH then also the normon and finally we also need the socket. iio let's just go back and these are all the packages that we are going to be installing so now let me just hit enter so it's going to install all of that packages for me and I forgot to show you one more thing we also have to install the socket IO client let me just show you this so socket IO client in this case okay so I'm going to just click on this first link and it's going to just brings us to this documentation but it will take a bit of time let's just make it as a dark and if you want to install the socket IO client so for that we are going to be just using uh this command word here which is npm install socket. io- client and you can learn more about there but basic it's kind of just allows us to work with reactjs so yeah you can just go ahead and read the documentation about there and so on and so forth so yeah let me just show you that I'm going to just close these and here you can see all of their packages are now successfully installed so now the next thing which I want to do uh let me just go out let me just go outside from there and now let me just go inside the client folder and I am going to be using this same Command right here which is npm install the socker io- client okay so now we are going to be installing there in this client folder right here okay so now let me just hit enter so it's going to also install this uh socket IO and yeah that was supremely fast let me just zoom in a bit so you guys can see everything a bit better and now here you can see we have these dependencies right here so we just installed the socket iio client inside this client folder and now inside the server folder let me just show you there inside the server folder we only have this course package expressjs normon and also a socket.io right here and I'm going to be also using that start part here let's just remove that and noron I guess I didn't install the noron yeah I did okay so now let me just use the index.js so now let's just save this file and now we are totally ready to go so now let me just make a bit of cleanup inside the client folder so I'm going to say a bye to the public and now let me just remove this assets also this app.css and then index. CSS now let me just go ahead and remove every single thing from this uh app component and now let's just save there I just WR my RFC that's because of the extension that I'm using let's just remove them and I'm going to also remove this one and also a strict mode you can keep that if you want it to but in my case I don't need that so let's just remove that and now let me just go ahead and use the npm Run Dev so it's going to just run my application on this port let's just click on there and guess what we are getting the error that we did not remove that index do CSS let's just also remove that s file and we are now getting the app baby we are getting the app so yeah that's cool but now the next thing you have to do is that we have to go ahead and go to the app component and here we're going to be writing all of our client side logic you can also create a separate component and reuse that if you wanted to but in my case this is going to be just a basic uh chat application using reactjs and socket iio so I'm not going to waste your time on that so the first thing which I want to do is that I want to import the used t and I'm going to also import the use effect as well so I'm going to be using the use effect and it's going to just import it from the react J and now the next thing which you have to do is that we also have to import the io from where from the socket.io Das client which we just installed a few seconds ago okay so now let me just create an instance or a connection between or server and the client so for that we are going to be using like socket and going to be equals to IO and we are going to be running our server on this port which will be HTTP and now let me just provide a local host of come on local host of 3,000 in this case Okay so that's then now inside this app component the first thing that you have to do is that we have to create our state and first of all we have to just write a messages and we are going to be sending or saving all of our messages in this ST which will be the use T and let's just provide the empty array and now we are going to be also creating one for our input message so we have a message input this is going to be for the input field and set message uh set message input would be f F like that it's going to be equals to just empty string so that's then now the next thing which you have to do is that we also have to use the use effect and we are going to be passing our call back function and for the dependency array we are going to be just providing this messages right here like all of the messages so when our component first renders it's going to just show us all of the messages and when it reenders I mean like if something changes inside that messages so it's going to just rerender the component and it's going to also show us all of their messages right here okay so we are going to be just receiving our messages by using the socket. on and we did not create a back end for that but let's just assume that we are going to be grabbing our uh messages from this message event and now let me just pass my call back function inside them and now let me just use the set message and we are now going to be sending that message which we are going to be grabbing from our back end and we are now going to be sending that to uh our stat right here which is the messages so now first of all let me just pass all of the messages because we don't want to mute head or St directly for first of all we have to get all of the messages then we have to just use our message right here I mean like that new message which we are getting from the back end okay so that's then now let me just also provide a return and clean up function right here so for the clean up function we are going to be using like socket. off and now let me just pass a message right here okay so that's then now let me just save this file and now the next thing which I want to do is that I want to take care of these jsx right here so let's just remove that and first of all I'm going to be just writing my H1 right here and simple chat app or something like that and now underneath that let's just create our input field and the type will be text and now let me just provide the value and the value will be there message input so this component or this input is now controlled because we are now providing what message input right here okay so that's then and now let me just also provide the placeholder so I'm going to just select type your message baby and let's just provide Three Dots and now when somebody change or when somebody type something inside inside that input field so for that we are going to be passing this um set message input field set message input and we are going to be getting that thing that the user is going to be providing in this input field so we're going to be just using like input. target. value and now let me just save there and here you can see this is how it looks like and now underneath there what you want to do you just want to create a button which will just say send and now let me just create the on click event handler on there and send message this is going to be the function which we are going to be creating in a few second but now let me just provide the reference of there okay and now underneath there render all the messages right here so here we are going to be rendering all of the messages so now let me just create a section in this case and now inside this section we're going to be iterating over through all of the messages which we currently have so we are going to be using the map method inside there currently we don't have any messages but we will very soon so now let me just pass the message and also the index and now inside them what do you want to do we just want to create a d and I'm going to be just providing my messages dynamically right here if you have a new message and for the key we going to be also passing the index right here so now let me just save that let me just go back and I guess everything is looking cool but we have to also take care of this send message so now let me just copy that and I guess I explained that very well yeah there's nothing else to explain so first of all we have grabbing stuff then we are just uh creating a connection between the server and the client then we are creating a St then component first rendered so it's going to just gives us all of the messages from the back end and now we are just sending that new message to our existing messages database or whatever you want to call there and finally uh we are just creating our jsx right here so we just have our input field and we are now providing all of their values to them and we have a button so it's going of just allows us to send our data finally we are now iterating over through all of the messages and we are now just rendering each of that message in the dev okay so that's then now let me just take care of this send message uh function right here so now Above This return I'm going to be just creating this function right here and now let me just pass my if uh we have the message input and let me also use the trim for the empty spaces that's not equals to the empty string so let's just remove one from there if that's not equals to empty string that's not triple equality operator so first of all I'm just writing this explanation mark and then double equal to signs okay so that's there and now let me just use the socket. emit method and now let me just provide a messages or not a messages but just a message because in this case we are working with a one message a singular message rather and now let me just pass my message input and now underneath that let me just clear out my messages input field right here so now let me just proide empty string to that let me just save there and we are now totally done with the UI or the front end or the client whatever you want to call there and now let's get into the back end right here so for the back end I'm going to be creating a file given name of like index .js and now inside this file the first thing we would do is that we are going to be importing our expressjs from the expressjs and I'm going to be also importing the create server come on create server from where from the node HTTP modu and we're going to be also grabbing our server from where from the socket.io okay so that's the and let's just also import our course because we are now making the connection between the client and the server or you know let me just also write a comment for myself so this is going to be the packages packages and this is going to be for the configuration so n i R1 yeah configurations like that and now let me just provide first of all my app and it's going to be just uh Express app and also let me just create my server by using the create server and I'm going to be passing my app inside there and now let me just create my IO from the new server from the socket.io let me just pass my server and we are going to be also passing our code CES right here for the CES we're going to be first of all providing the origin like what will be our client link or endpoint whatever you want to call there so our client is currently listening on this port right here which is HTTP and then col col Local Host uh of 517 uh 3 come on 73 there we go so our client is running on this URL right here so we have to specify that and then the next thing which you have to do that St optional but I'm going to provide it anyways we can also provide our HTTP method like get post and put and so on so in this case I guess that get and post will do let me just also provide one for the middleware and we are going to be just using the app. use and let's just provide our course middleware inside there and now underneath that let's just create our Port right here and our Port will be in this case 5,000 and I'm going to be just listening to the uh Port which will be a 5,000 port and now let me just provide my con log and server is listening on l i s t n iing listening on Port of this port right here in this case okay so then then now let's just create our socker iio stuff okay so now let's just take care of our socker iio stuff so now let me just go back and the first thing which you have to do oh you know let's just write a comment like socket.io Stu or something like that and run uh the server right here I'm going to be first of all creating a connection so connect ction and now what I want to do I just want to provide a client or you know let me just past the socket Right Here and Now inside that let's just provide our conso log like this is totally optional if you want to provide it you totally can but you don't have to new client connected when this is uh disconnect so I'm going to be using like socket Doon disconnect so when this is disconnect so we are going to be just passing or call back function and it will just say like client disconnect there we go and now here let's just put our socket. on and let's just uh receive our message right here so message and let's just put the cons log right here and message rece RC e i Ed message received and which kind of message we are receiving right now we are now grabbing that message from the client and now let me just push that once again to the client so we are going to be using like IO and then the message right here in this case and let's just forward message so that was the entire flow now let me just save this file and let's just test this out and this should be p a c k a g s let's just save this file and here you can see we have our basic chat app demo so now let me just type something inside there like something and hit enter right here and we're not getting there let's just see what's wrong oh my God I guess I'm going to have to restart my what the hell am I doing yeah I guess that's looking cool npm run there one more time let's just refresh there type something click on the send button and we are making some mistake I don't know which one but we are making some mistake okay so what are we doing wrong and I just found out the bug and the bug was here you can see we are now providing the 3,000 and we are now listening to the 5,000 because here you can see we are now listening to the 5,000 so now let me just restart every single thing so I'm going to be using npm rund there one more time refresh there type something send there still not working I'm going to just uh run both of them at once so I'm going to just use first of all I'm going to go ahead and go to my server in this case and I'm going to be using npm start and hit enter right here so now our server is Totally Running let me just go ahead okay new client connected and message received and this is the message and here you can see now it is working I forgot to just run both of them headphones so here you can see our client is running and also I mean like our client is running in this board and server is also running right here you can also use the concurrently I already have a video on that to combine both of them at once but I'm not going to show you that so yeah here you can see we have our basic chat application so I can just make that smaller and I can open my Google Chrome right here and I'm going to copy that from here let's just close that oh I forgot to close that one let's just reopen that and I'm going to hit enter right here and I'm going to type something inside there like hello hosan and let me just click on the center B so it's going to give us that hello hoseen right here and I can type something like what's good come on what's goody and now let me just click on the send button so it's going to also show us that message right here so yeah this is how we are going to be creating our chat application in reactjs and that was it about the socket iio so thank you so much for watching this video if you have any requests for any other courses or projects so feel free to comment that below and I will be more than happy if you follow me on GitHub and yeah thank you so much I don't have anything else to say so I'm going to just read all of your comments and if you have any other course suggestion or project suggestion feel free to drop that in the comment section I guess I'm going to just make a new course on something so say bye-bye for now so thank you so much from the bottom of my heart and I'll catch you in the new course bye-bye

Channel: HuXn WebDev

Views: 4,009

Keywords: socket.io, socket, sockets, socket.io js, socketio, socket io, socket js, wesocket, socket.io.js, socket.io node, websocket, chat socket.io, socket.io chat, web socket, tuto socket.io, socket.io crud, socket.io rooms, socket.io react, socket.io intro, react socket.io, websockets, web sockets, socket.io server, what is socket.io, nodejs socket.io, socket.io chat app, intro to socket.io, node.js socket.io, socket.io node.js, socket.io-client

Id: EtG0tv2a9Uw

Length: 60min 25sec (3625 seconds)

Published: Thu Feb 15 2024