socket io crash course | easy way

hey there everyone hates here and welcome to the late night show and this is almost one o'clock in the night i just got up and i thought before starting working on something let's record a video and what's a better way to start a video or put up a crash course on socket io it has been in the demand for a while and finally i got some time of course in the late night but let's get started with a socket i o now before recording this crash course i have done a little bit of the work so that i can actually focus on the socket i o so i have stripped off a lot of functionality which is not related to socket io yet we are able to build something so that we can understand where the socket io is and most importantly what socket io is not we will be using some of the dependencies like express and nano id but these are just to make sure they are bare minimum there to perform the bare minimum chat application but it is not going to hinder our experience to learn the socket i o i dedicatedly wanted to focus more on socket io and hence we are going to be doing that i will be walking you through with reading some of the documentation i know some of you don't like that but this is the most important aspect of being a developer so don't worry i will walk you through along with me and we're going to create a back end for this chat app as well as a front end in the react or in the chat app so no don't worry nothing uh super fancy just the basics to understand the socket io as well let's go ahead and get started with that i have got some of the documentation for you so let's go up here and also there's going to be a link which is going to be useful for you so let me just open that up let me search that quickly and that is going to be for course so go ahead search it up on the blog section of learn code online and this is going to be helpful for us later on so i'll come back on to this one so the first thing that we're going to require in order to work with this application is the express we won't be creating any route like slash or slash chat surely we can do that but i don't want to hinder the experience of learning socket io so you'll be having it but we won't be using it too much apart from that of course we will be using socket ios so that's what we'll be studying and we'll be using that and apart from this we'll be using a nano id nano id is like almost uuid but this is just to give our every user who is connecting to this socket a unique name nothing more than that you can definitely skip this one but i thought it's a fun library to explore and i'll show you some of the aspect of it as well and later on we'll be working on a little bit on the course which is always a nightmare for almost all developers to handle around so we'll face that as well okay so let me go ahead and open a new vs code extension here and we will be creating a new folder let me go ahead and call this one as lco socket i know you cannot see that it's on my other screen let's go ahead and drag and drop this lco socket that's all what we need and yes i trust this entirely let's go ahead and expand this and we'll be working on this okay looks nice and easy first let's create a couple of folders here let's call this one as backend and let's create another one which is front end and seems like i have uh entered this folder in the wrong place and no worries we can fix that up here let's bring up the current terminal so because everything looks good in terminal let's go ahead and do a ls we have back end so let's move into a back end or let's first move the folder around okay let's hit ctrl l and we're going to say that i want to go ahead into the back end let's move into back end first cd back end and now i want to move this front-end folder to one directory back and that should be yeah this is what we want moving up first let's handle the back end part so we're going to simply say npm init to initialize a repository i'll just say dash y to just get everything as a default option and let's go ahead and open up this package.json there is nothing too much fancy going on in here we have this index.js and we have backend and everything is nice and easy let's go ahead and install a few repositories that we are going to need so we're going to say npm install of course we are going to need express we are going to need socket dot io we are going to need nano id and just for fun we are going to use nodemon as well now its not really compulsory or you can also use nodemon as a dev dependency i'm trying to make things much more easier so i'll be just installing it let's go ahead and wait for the installation okay that was ridiculously fast but we have got all the packages up here again let me remind you you can definitely put the node 1 as a dev dependencies not as a main dependency but let's just i'm going to be pushing it up on github so everybody can follow along so i'll make things easier a little bit and also i'm going to go ahead and change this to server.js nothing very much specific but we got to do this let's change the script to start and we are going to go ahead and say hey nodemon just take over to this server.js that's all the things we need to change in the package.json save that and we can close this and now further done in the back end we are going to create a new file let's call this one as server.js now surely i can start writing the code just right here but that's not a good way of handling the things so let's go ahead and explore a little bit of the documentation so coming up here express it's a pretty simple one we can go ahead and say const express require express and we can create an app from that we will be doing that in a minute that's the basic role and that's the only part of express we'll be using up most importantly we are not going to create a server from the express so we are not going to say app.listen this is the most important crucial part of it the server that you create with the express and the listener that you create with the socket i o are a little bit different so we won't be using this one we'll be using the one with the socket i o the most important thing let's go up into the introduction and by the way i love the diagrams that are there in the socket i think they are somehow unique and the font style loving it the most important thing i want to bring your attention here is the first line that socket io is a library that enables real-time bi-directional and event-based communication this is going to be the entire part of our crash course that it is event based so you do the regular stuff with the event you do connection with the event you go disconnect with the event you emit these events you broadcast these events so all the things related to the event and you carry forward them into your client as well an event which is expected to be listen up in the server your client also need to broadcast or emit that event so that they can talk on to the same guys okay apart from that one important line is here which is most important in case you have you are going to understand it that's fine otherwise you can leave that so what socket io is not remember socket io is not a websocket implementation it also covers additional metadata to each packet we'll see that packet or a payload in a minute and that is why a web socket client will not be able to successfully connect with the socket io server so all those guys who actually work already into the web socket this is not a web socket implementation so keep that in mind in case you are looking forward to go more in depth of this socket i o that's basics of it okay let's go up first into installation we have already done the npm install socket io so that is all done moving up into the initialization part this is how the initialization work will be working with the es modules here so we need to first import the create server from http we also need to import server from the socket io and then we can go ahead and initialize an instance of that so we will be actually kind of a shortifying or compressing them together you can use the exact same copy paste syntax here as well no big issue and then we see that inside this when we create an i o from this server it is based on the http server but there are some options given to us we'll explore these options when we'll move into some of the troubles that we'll get through in this course so that is going to be the important part let's go ahead and figure it out this much and then we'll see the rest of the stuff so let's go up here into the server so let's go up there so first we're going to go ahead and say i need an app which is going to be coming up from require and we will be saying i need express for that we are going to initialize it on the go you can go ahead and do this in the separate line but i think this is a shorter notation pretty fine okay let's go ahead and create a server and this server will be coming up from require let's go ahead and go for http and we are going to go ahead and say create server and this server will be based on app so what we have done just right now okay i know this is a little bit too much so let me try to explain this a little bit more so the first thing that we have done is this line so we have said that uh first we can bring express and can say require express and based on the express we can initialize a variable app so instead of doing this in two line i have done it in just one line i have created an app based on the express and i have initialized it on the go you'll see this kind of coding style as well so i thought let's give it that as well but again in case you are not comfortable you can go ahead and copy paste literally these two lines instead of that one line moving further when the server initialization is happening again same thing we are going to require a method create server from http so that a method is coming up directly from here i haven't actually got it yet so this create server this is exactly that same method create server and apart from that we need a server from socket io so i have just gone ahead and will be using that in a second but right now this is the first line okay moving on let's go ahead and create a connection so we're going to say same thing so i o is going to be connected based on require and we're going to require socket i o and let's go ahead and use directly s server there we go so this is exactly same as i told you we're using a server from socket io and then here in the i o we are creating a server so this is just exactly same i prefer this as more cleaner approach of working with the things but let me also walk you through there is one more thing notice here there are some options given to you if you can see that these options are always going to be handy for you so as soon as you create a new i o from this server using the http server of the basic node modules these are most essential and we are going to explore them without this it is almost impossible to create a production grade server so you should really know about these options what to go or what to put inside these options that's going to come up a little bit later okay let's move on then you can actually create these connections or you can create these events and there are many of these events the one we are working on or we are looking forward is the connection and then based on this http server or maybe you have called it something else we need to listen on this port so let us go ahead and finish up this part of the implementation now okay i'll be removing this options because i'll come back later on and we'll finish this part okay so that is all good now let's go ahead and say i o dot on and yes by the way there are many other options as you can see create server require that there's a lot going on we'll be working with on and we'll be saying that i need a connection make sure your spelling is correct here i have done a couple of mistakes uh before this one and here you get your uh arrow functiony thing or callback whatever you like to call that no big offense there and it actually gives you a socket back which is actually a connection now this socket includes a lot of information and we can go ahead and put up a log here to explore it further let's go ahead and say what is socket i know there are better ways of handling the situation but i think we'll be going with this way so there we go now we can actually print this on the log and whenever somebody makes a connection on this we can explore what the socket is more apart from this we will be saying that socket needs to be active so we need some log information here so we'll be saying a socket is active uh to be connected there we go a couple of nice log information now comes up is the most important part you have just kind of enabled the connection but this is not enough you need to make sure that you are listening to certain events so that you can pass on certain information with that so let me walk you through with that so we have this socket remember this socket is coming up here after the connection is being made and on this socket you can actually listen to variety of these events and the good part is that you can call this event to anything what you like i'm going to call this one as chat but feel free to call it as superman batman whatever you like the whole idea is understand this that some of these strings are by default like connection disconnect these are given to you by socket io but it also gives you some of the ability to connect on these events that you are naming it so that you can be consistent throughout the server and the front end okay so that is basic now of course just the event is not good enough event will also carry some of the information like some text maybe some images maybe some json data whatever is being passed on this is usually called as payload but it's not really compulsory to call it as payload this is just a packet of information that is coming up so that's what it is usually payload is a good term for using that again this is your arrow thingy uh which is also a callback so we got a payload up here okay uh also it is important to know and figure out what is payload so we're gonna do exactly same what is payload and we will be going for payload there we go nice and easy but this is not enough now we are listening to this event but we also need to uh respond to this event the way how we respond to this event we go ahead and against use this i o always always no matter what kind of event you are going to create the syntax is always going to remain same we need to emit and we need to emit on the same chat event because this is what we are looking for and whatever the payload user is sending i'm gonna just throw that back so this is the whole idea of the chat that we receive all these information and we throw that information back so that it's kind of a broadcast level of chat again you don't need to broadcast you can add more additional logic here let me walk you through with that as well what we are doing is kind of an open uh room of a chat that we are building up that's why we are throwing the entire thing back as a payload you can extract some information from that payload and can selectively send that information to okay moving on a little bit what i would like to bring your attention here are some of the events uh into emitting the events so notice here some of the events like connection and some more here which i hope i can find but there are a lot more events like disconnect and all of that while reading the documentation i found out but notice here we can actually emit the events like hello and on the client side we can look for these events as well so this hello is a representation that you can name your event anything that you like now a little bit more on to that you can also we will be using this uh listening to the events and there is a emit cheat sheet as well so notice here there is a room one and a whole bunch of things going on i think that is too much but what i would like to bring your attention is a little bit of the adapter let me search for that adapters because this is most important thing you should be knowing for that let's go look for mongodb adapter but there can be radius adapters or anything i think the diagram is going to do more justice than explaining so this is what it is so let's just say you want to save this chat into a mongodb or any other database notice here we have successfully able to create a server and you can put multiple server instances for these things then you can also engage a mongodb adapter or any other database adapter which will pull the information from these socket and will save that into the database and the same thing can happen up here in the server b as well so eventually what's happening is you're storing and you're retrieving everything from the adapter i think that's going to go too much in depth for this crash course but again depends enough of your comment comes in we can actually do adapter here as well it's not that much of a crazy thing to go on okay moving on now let's move on to the part where things are being mistakenly being done by initial developers and i have done that as well since you have created an app using express it is kind of a habit that we go ahead and say app.listen and we go ahead and say i'm listening on 3000 or maybe some another port let's go for 5000 and then you receive a callback just like this and you go ahead and say that i'm going to do a console log and i'll say server is active dot dot which is very important so let's go ahead and work on with that now let's go ahead and say npm start on this one and what you're going to see that server is active now this is deceiving this is very very deceiving you have done everything so good but you have actually initialized the server using the express which is not the case this is not going to work so make sure you don't do this i'm going to go ahead and comment this so just to make sure that you remember that this is not how we create a listening server on this we go ahead and use this server remember this server is actually coming up from the create server and everything is being injected in the i o that is the most important thing you need to listen on to some another port so that your chat can happen not on the main server so we're going to go ahead and say listen on this server instead of this app and we're going to go same thing we're going to go 5000 and let's go ahead and do the callback thingy and call it as log and let's call this as a server is listening at port 5000 and of course three dots are very important so there we go that's all that's all you need to make sure your chat application is working on the back end yeah literally nothing more is required remember let me give you a summarize these all are just required statement and initialization of the application the meat part is just from the line number seven to line number 15. we are making a connection ready so that somebody can connect on this uh server and on this connection once the connection is happen we are creating a separate event for ourselves which we are naming is a chat and on this chat event we are emitting that whoever listens to this we will respond you back with the chat event and we'll throw you off all the payload that you have sent to me i'll give you that back so that's kind of a broadcasting thing that's it that's all you need and we can even close this one up here okay so that's the back end part we have all done with that and i'm going to open up a new terminal okay let's go up here and let's go into the front end part and we need to create a react app now it's not really compulsory that you create a react app you can create anything i'm going to just go ahead work with the npx react app so we'll be doing create react app and we will be calling this one as chatty that's a fine name let me go ahead and quickly hit enter and let this be complete okay so seems like our react app is done and just now i realized that actually we will be using the nano id in the react itself i have accidentally installed that in the back end so we can remove that later on the big issue uh there we go okay let's go ahead and move quickly to a ls and let's move into chatty and everything seems okay-ish let's go ahead and see that how the things are going to work into the client side let's first figure out the installation so we need have we need to have some kind of installation going up here and notice here it says installation you can do a standalone but i'm looking for is an npm base so this is what we have npm install socket io dash client so this is a client we'll be going for that let's go ahead and paste that and we will be needing a nano id as well so let's go ahead and say nano id my bad i installed this on the back end but we'll be using it in the majorly front end so let's go ahead and hit enter this should be a comparatively smaller one so seems okay let's quickly go ahead and start that let's go ahead and say npm let me just quickly see that how this is working in the package.json we can shrink this up a little bit and we have npm start that's nice and we have socket i o as well as nano id being injected nice npm start there we go and this should be running on the port 3000 so let's go up with that should be taking a little bit while there we go nice and easy now let's go ahead and remove some of the stuff from here not all because we'll be using and taking advantage of the css of the app itself we won't be removing header but we'll be removing everything inside the header let's go ahead and remove that and let's go ahead and use an h1 call this one as chatty app there we go okay nice dark theme that we got right out of the box we'll be using some of the css we'll be modifying a little bit of the css directly up here but first let's remove the logo because we are not using it so that is fine let us import some of the stuff that we will be using so we will be using some stuff from the react itself so there we go react what we'll be using is we of course need to manage some of the state so use state will be injecting a hook as well so we will be using use effect the hook for updating our ui for the new chat and the state to manage all the chat state of the input field that will be having so of course no big deal will be just having an input field which where we where we can write the message and the send button that's pretty much it no big deal okay let's go ahead and start with the basics so first let's move on to the socket io and see that how the initialization works on so this is server initialization we are going for the chat initialization so here it says you just need to import that and there are a lot of ways you can do custom names and different domains so you can use this syntax here cons socket io and directly connect with this but there is another option you can use io.connect here as well so both options are totally fine i guess let's go ahead and try to connect with that first let's import all the stuff so we're going to say give me an i o which will be coming up from socket io client let's also import the nano id so nano id which will be coming up from the noid i'll walk you through with the nano id documentation in a minute uh but right now this is all good and also we'll be using uh no dot env so usually these urls and stuff go into the dot env file we don't have that we'll be going directly for that let's go ahead and create a socket and we'll be doing the same we can go ahead and say socket just like this and can say here http columns colon slash slash local host and this one is running on port 5000 so this is definitely doable uh totally okay as we just saw in the documentation that this is exactly the syntax we go for but you are also going to notice that in some of the docs that i did read they mentioned that this is a better approach i haven't yet verified that which one is the better approach documentation says directly go for io but i'll show you that it doesn't really make any difference at all so we'll be going for that another id we won't be using it as of now we'll go for it later on okay let's move into the app itself so inside the app we need to manage the state of a message itself so let's go ahead and say use state and the first thing is going to be the message itself that we'll be sending the initial state of this message is going to be empty now not only that this is the state of the message that we are sending to the socket and that will be responding back that whatever we are saying we also need to maintain a state of all the array that will be throwing back because the chart is going to be long list of array and we need to just pull through values from it so let us go ahead and use that so we'll be saying use state and here we'll be saying the entire chat and it's going to be initially an empty array but as we get more value we'll be pushing the values into this array and thus making it a larger array so that we can work on with okay this is all nice and easy so far let's go ahead and work on with now with this chatty app component so we'll need a form in this one so let's go ahead and grab a form there we go this is the form and inside the form will be having an input which is going to be of type text so basic stuff the name let's call this one as simply chat we don't need an id so let's go ahead and remove that now we need a couple of values up here so first placeholder so we're going to say the placeholder is going to say send text something like this we also need to have a value now this value need to be binded with something so this will be bounded binded with the chat the state that we are managing so message so anything that goes up here will be getting up here as well and apart from that we also need to have an on change event so this on change event will be really simple we'll be getting that give me an event and as soon as you give me an event a method will be fired up which i haven't yet defined let's call this one as set message and e dot target dot value this shouldn't really surprise you this is the regular stuff we do so any change that is happening is using a method which is set message so set message is responsible for changing the message and the actual value is the message remember set message is a method given to you directly by the use state and the message is actually just an just ordinary variable or a constant okay so this part is all done uh that's great but we also need this form to go somewhere and it cannot go before a button so we need to inject a button here let's go ahead and say i need a button just like that which is going to just say send and this button will be of type submit okay so this should look uh decent as of now let's go ahead and see that how is it looking like uh it's really really small so what we're going to do is take advantage of the css directly given to us by the react itself and make it a little bit bigger we'll go into index.css and let's write a little bit of the css we'll be saying input and let's make you bigger so font size not like that font size is going to be larger i don't use such values directly but in this case it's fine let's go ahead and use something for button as well and for this button let's also go for font size and let's call it as larger as soon as we do this minimum stuff this is now uh bearable compared to the previous one so this is okay let's give this button a little bit margin as well on the left side so margin on the left let's go for pixels and that should be fine okay doable we can do and we can still work on this one okay now moving on to the stuff let's go ahead and utilize the basic mean part of it which is creating an event and sending all of that so let's go ahead and work on with that moving into app.js we can close this one we don't need you let's go up here just below where we have defined the state let's create a method which will be responsible for sending the text let's call this one as a send chat there we go this will be able to receive an event and based on this will be doing this stuff the first thing is prevent default there we go so that form doesn't automatically sends to any places we are going to hold this one up here okay this is all good and fine as of now but one thing that we need to do now is make sure as soon as we receive any chat values we need to emit an event what should be the name of that event we need to call it specifically chat because that's what exactly we have done in the back end as well so how we're going to do that it's pretty simple we have got this socket which we have enabled and we just say emit told you it's really the same syntax we always go through with that so as soon as you go with this you need to call this one as same chat and now here you can pass on any of the payload that you want in my case i'm going to pass on a payload of object of message so as soon as this message gets updated it will be passed on up here but it's not really compulsory to just pass on one thing you can just pass on key value pairs this is technically like this but i'm pretty sure you are aware of this syntax here but feel free to pass on something like user and call this one as something like you can go ahead and absolutely do this we will be actually doing this but later on so there we go we have passed on our payload on to the event chat that is fine and once this is all done we need to actually uh remove all the values from this message inbox as well so we'll be calling up this set message and will be making sure that we update the value with the empty one here okay that is fine and that is nice now let us go ahead and inject this form just right up here so let us go ahead and say that when this form actually go ahead and say on submit we're going to go ahead and use this one just like this not like this like this and call the method up here so the method is sendchat so let's go ahead and say send chat that's all what we need to do now this should be all okay but it is going to give us couple of errors and issues let us go ahead and see them as well ok we are trying to connect where is the connection string there we go we are trying to connect and we need to figure out some ways of understanding these errors as well now right now this is all looking good and nice and we can see that inside our socket so let me go up here this is also looking fine and everything but there are a couple of issues that you will be facing up let me open up right click inspect and go into the console and you can see that the socket we are not able to connect on 4000 5000 because we are having some of the course policy to understand more about the course and why it is happening make sure you read about this article at blog.learncore online this is really in-depth guide and understanding whole lot about how the course actually happens and stuff in this case we'll be going for the course situation directly by searching i told you those parameters will be really handy now so course handling notice here that apart from this http server we get this object up here which is handling a lot of course situations so let me go ahead and copy this and inject that and show you more about it let's go into the back end and server.js and we are injecting it up here so this is the part remember if you can figure it out this is the http server and socket io so this io we are injecting it up here so this is exactly the same line up here we can go ahead and use an object and inject the course up here so this is how you handle the course the origin that you want to accept in this case it's localhost so there is no dot something localhost.com or localhost.n i cannot actually use that as a localhost i need to inject a star here this is not recommended but this is the only way i can show you the demo here you can also inject the method if you have some of the allowed headers maybe the login information is required so you can actually inject that and you can also mention the credentials and stuff so a whole lot of information is given to you right now we'll be removing all of this we don't need it but this is all what we got to do up here and this is all active and should be all fine let's go up here and see that so we need to clean this up and hit a refresh and you need to sometime refresh couple of times so that you remove these errors so again the course issues is now handled and we have resolved the issue now can i go ahead and send a hi to this something yes we can and notice here our state is now getting emptied so somehow i can see that this method is now working where is our method not in the server.js here so this send message is now working we are a client and we are emitting this event so somehow we need to actually expect that this event is broadcasted to ourself as well and thus we inject this use effect hook here so anything that is being changed we need to respect that and we need to fill this chat array up here so let's go ahead and do that this is really the easy stuff let's go ahead and work on with that so use effect there we go this is not going to be dependent on any input so we're going to remove that part and we basically don't need anything here as well so one thing we'll be doing is the sec the socket so we'll be listening on that event what is the event that you want to listen on in this case the chat is the event the chat event also uh takes a whole lot of payload and we are going to work something on this payload so how we are going to work on this i'll be calling a method which is set chat which is an array so let's go ahead and take that array let's use all the previous values all the previous values are now being filled up and we also want to add one more value which is payload so what is happening now as soon as we send some of these events notice here we are not listening directly to uh this message here this is the most important thing to remember we are not listening to the message we are taking these values from the event which is socket.on most important thing and we are listening to the event on the chat and we are listening to the payload and we are you get the idea this is basic stuff i've already covered this in my javascript series but you get the idea now the most important thing is we are able to send this stuff and all and basics is all right but now we need to loop through this chat array and show all the messages as well so i'll do that just above the form let's go up here let's go ahead and say that i want to inject something i have this chat array i want to loop through it feel free to use any loop value for each or anything i'll be going for the map because that sounds the easiest one in here we are going to receive a payload because every chat is itself a payload and we also are going to receive an index the reason why i am using the index because there is a key that needs to be injected whenever you are looping there we go nice and easy now here we are going to go ahead and say that we are going to return since we have used the curly braces we can use the parenthesis as well but let's find let's go ahead and work with that the first thing i'll be doing is i'll be just using a p tag and inside the sp tag i'll be using the payload now i told you payload is a big object so it's not like you can directly say just the payload it has a lot of properties that need to work on one of the property that we have injected is the message remember how we or when we did that ah remember this is this is the payload that we have injected so it's an object which is having this message right now so we are just destructuring it kind of destructuring not exactly but yeah this is what we got let's go ahead and try to play around with this much and again this is going to give me a warning so before the warning i'm going to go ahead and say hey here is your key so please don't worry and index so now it's not going to complain me much let's go ahead and save this and hopefully things are going to work just for safety measures let's hit a reload and send up a high and i can see this high value and i can say hello this is not the best of the work so let's go ahead and add some additional information to give you more idea about this payload because this can be a little bit confusing so this is the time where we actually use this nano id okay how we're going to do that so this nano id is really simple as soon as user connects with this socket we are going to go ahead and give it a user name you can ask the user to actually enter a username but we'll be using a nano id for that and this is the time where we actually studied the documentation of nano id i go up here and i can see this nano id actually always gives me this big of a value now notice giving this much of a big value is not really a great thing for the user so we can actually read more about the manuals and stuff and there's a lot more to study in here and one thing which caught my eye for this particular project is i can create the nano id based on some of the fields it's a little bit difficult to find now because i'm recording the video yeah this is you can actually do custom alphabet but i saw that we can pass on values here as well seed not seed anyways i'll try to find that and put a screenshot sometime it's difficult to find it again but what i can do is i can find and inject values like force so that it will give me a random values between 1 and 4 so you can go ahead and shortify your username up here now what and how we're going to do that now you have actually passed on a message but now you can put up a comma and you can pass on a username as well again it's almost like past sending like this but you know the syntax so now we have this username as well further down the road i can do that this chat i told you this is not just a chat it's entire payload that we need to loop through the values so we can go ahead and say that i want to inject this one so we'll be doing we'll be doing a span up here so let's go ahead and say put up a colon just like this we'll be having a span and inside this will be calling it as id colon and then let's inject another javascript here and payload dot username there we go nice and easy now we can go up here back on to this and notice here the ids are blank because the connection was already established so it's not going to inject now this is where i'm expecting to see and i'm still not able to see this id looks like there's something wrong yep my bad typos i'm known for that and there we go i can see the usernames up here okay now a little bit more to this let's make it a little bit beautiful not too much but a little bit let's go into index.css and let's go ahead and say that if there is a span we are going to give it first a padding and the padding is going to be a 5 pixels and 15 pixels to make it look like a little bit buttonish and we are going to say background color i usually don't do this but this time i'm gonna go ahead and say orange okay let's see that how this is looking up so there we go now we can see the chat is happening now the most important thing to work on with is we can take this one up here and let's shrink it down chat up and in open up another incognito tab there we go and we can just go ahead and inject that and i can now connect to this so there we go now our socket is emitting the event and since we are hooked up to that event remember in the use effect we are using socket i o events to capture those things that's why the server is coming into the picture and we can say this is a chat room and we are having a nice chat room instant everything is going fine and we are seeing unique ids as well and hi there so everybody's getting a unique id this is a fun exercise to work on with that now i would like to bring your attention a little bit more on to the documentation part so we can just actually expand this some more so what we have studied so far there are a lot of ways how you can initialize the servers and rooms and a whole bunch of thing notice here handling the course i have already gone through with that but there are a lot more to study up here especially the middlewares this is where the things actually comes into the picture if you'll be working anything here like you're building any chat application or something you want somebody to connect only with the person who are logged in or to the user who has accepted this is how you inject the middleware this is the most important thing so in case you are looking forward to study more about the socket io go ahead and study a little bit on to this so just like we have studied in our other courses as well the next is given to you and you can pass on and inject the next and next moves on to your second next statement second middleware okay i know this is quite a lot to take up but i'll throw up all of this code on my github repo as well so that you can study more about it you can add more features to it or maybe do more fun stuff with that and in case i get enough of the comments or requests i'll try to make another similar crash course but that time will be injecting an adapter of mongodb so that we can store all of this chart into the database as well so i hope you have enjoyed this one if you have enjoyed this one please let me know on my instagram that you are studying from this crash course and you're enjoying this one let's go ahead and catch up in the next video [Music]

Channel: Hitesh Choudhary

Views: 18,159

Rating: 4.8822088 out of 5

Keywords: Programming, LearnCodeOnline, python, javascript, socket.io, nodejs, express, building chat app, reactjs, tech jobs, tech interview

Id: BAZ-tJOYhlA

Length: 40min 57sec (2457 seconds)

Published: Wed Jun 30 2021