websockets provide a way for a web browser and a server to communicate with each other continuously without having to close the connection after each exchange this makes it ideal for realtime applications like live chat or gaming where you need quick back and forth Communication in this course Nishant from cybernetico will teach you all about websockets with socket.io hey guys I am Nishant and welcome to websocket 101 in this series we are going to learn all about websockets if you want something brief check out my video on web sockets in 150 seconds so let's get started but first of all let's understand the basics what is a websocket and why do we need to use it so let's understand this in simpler terms if you are Developer and I know you are you must have have heard of HTTP which is the communication protocol widely used in web development so let me write this here HTTP it is the communication commuication protocol protocol okay fine it is a communication protocol widely used in web development for example example when we want to communicate with the back end from the front end to get some data or to post some data or to update some data or even delete it we make a request to the backend server this request is done through arest API or representational state transfer which basically connects the back end and the front end through a temporary link when we make request to the back end to get some data we use this HTTP protocol so let me write it here where is the arrow Mark I guess this one so when we make a request to the back end we use this so minute we use something called rest API which is basically getting the data from the back end using get request or sending data to the back end using post request so it has multiple types let me write them we have get we have post and so on like put delete patch all of them so these are done through something called rest apis so when we use HTTP what happens is one way connection is built from client to server so let's say that we need some data from the back end let me write it here let me make two squares this is the front end or the client side let's say this is the client similarly we have a server which is the back end so let's say we want some data when we submit a form or I can say when when we submit a form we want to send some data to the server okay this one second of form let's say we submit a form we will make a post request when we submit a form so the data will be sent through the payload to the server where it will be stored in the database from the back end so if I write to [Music] the DB so this is what we do when we call rest API we make a htb connection from client to server or from server to client so when we make a request like a post request using R API this will send us some data back also like a success or error message and code and we then see this data here true or anything or let's say 2011 or 200 also anything so in this case when we make a connection what is happening is we are making a request to the back end to store some data in the database and once it does it is sending us back a request code of 2011 it means success like this it means success this is known as R API call which is done through http connection which is the communication protocol as I said before so this whole thing makes one connection and once the success message we have seen on the front end this connection is closed so I can say this connection is temporary it is a temporary connection because once our data is back in our hands or let's say we get some Response Code of 2011 or 200 or in some cases error codes the connection is closed and this means we are having or we finished one connection and it is closed correct it is closed this is known as a HTTP connection if you see on the screen now this is called HTTP connection and this is a response and request based type and one thing to notice is this is a one way communication because either the client will send to server and the server will respond back or server will send to the client and the client will respond back this means it is a oneway communication and the thing is this connection called HTTP this protocol it is stateless what I mean is each and every time we make a connection we have to specify some headers like tokens origin cookies and much more every time we make a request we need to repeat all those things tokens headers cookies Origins all of them it means it does not have any data where your header can be stored and the and the channel is closed when the communication happens or destroyed it is like sending someone a letter and expecting the reply back which could take days even months or even years in some cases this is called a HTTP connection now let's jump onto the web sockets what is a web socket so when we use a web socket we make a connection between server and the client that is similar to http okay let me just clear all this or just make it here let me write this as HTTP HT TP correct now let's talk about websockets that I have started web sockets so similar to http it is also a communication protocol but the thing is it is not so similar it has a major difference so when we use a web socket we make a connection request between the server and the client or the client and the server so initially what we do is we make a request just like this so let me just repeat these things here we have a let me just copy this so we are having a client and a server like this so initially in websockets what we will do is we will make a request connection from our client to server like this correct this is known as a hand check the initial connection if I write this as handshake this is the initial connection request from client to server initially so when this happens when the client will send a request of hand check to server the server will check all the things like headers Origins cookies and all like we do in HTTP request like in rest apis but the thing is this will happen only once at the beginning so basically what I want to say is with websockets we don't need to keep making connections each time the client needs something from server or the server needs something from the client the connection is like a permanent connection between the server and the client or the client and the server until we close the connection so what will happen here is when we make a request which is called a hand check if it is successful let me R this to a back arrow here so when this is successful we will get something called a success message here one sec wa which is mean which means connection established so now the connection between the server and the client is done it means our data can flow from server to client any time or at any time or from server to or from client to server as well what I mean is this is a permanent connection which means it is not it does not close so when a web soet is done when we make a web soet connection the connection is long lift connection until we close the connection so first of all we make a request from client to server and that's all any data from client to server will flow without any hasle or data from server to client will flow without any hassle it's like we socket is a two-way street allowing The Interchange of data between server and the client simultaneously in other words the client and server can send data to each other independently at any time this is called a web socket which is like a phone call initially when we call a person the connection is made and you can say pretty much anything which is received on the other end without any latency or delay but but why do we need to use websockets and when let's say that there are sen in real life where you want to have real time data which type of data real time so there is a tool called Google Docs which is basically a document editor from Google which uses data in real time what I mean is if you open one tab and use Google Docs and open another Tab and use Google Docs both on the same user then what happens is when you edit it on one end it will be on the other end so what I mean is when you edit on one end it will reflect on the other end without any latency imagine if Google Docs used HTTP we have to refresh our page every time we make a change on a document or if you want to receive some data on the document let's take some more examples where we prefer websockets over HTTP connection and they are if you are building a chart application or a trading app or a multiplayer dashboard because if you use HTTP we have to keep calling the apis to refresh the data which doesn't seem a good option The increased latency would have us want to throw our app in the dpin and this is why we use websockets now let's learn how to implement websockets so here I am having a library called WS which is a not just library for websockets but this is not what we need we need this a library called socket.io which is a improvement over web socket Library I mean this library because if you check documentation here let me open this introduction or we can say how it works no this introduction sorry so if you go down we have features and some of the features we don't have in WS it is a simple implementation of websockets so this is why we don't use this so throw it now this has long polling it means this will fall back to HTP Connection in the case web soet connection cannot be established then we have automatic reconnection it means under some condition the web socket connection can be broken between the client and the server and vice versa so this is why we have heartb mechanism in so IO which checks the connection status periodically then we have this packet buffering which means when we disconnect our packet will not be destroyed it will be buffered and sent to the server or the client upon the connection now if I click how it works this will tell us that this soer IJ sorry uses something called in IO for connection between client and server then we have something called a handshake which is basically the client telling server then we want to have a connection between us so this is the beginning of the socket connection now let me show you how to install socket. iio into a node just application by the way we can use this anywhere like any language on server we have JavaScript Java python goang rest and on client we have browser V chat I don't know what that is Java C++ swift. python. net rust cotlin PHP all this stuff and here you will find documentation of how to integrate so let me now come to installation and install the server and initialize it so first of all let me make a folder here called server now let me open Terminal and just do CD server clear the console first now let me initialize a package.json file using npm it will ask us the name of package so you can say just server uh version Let say same description of web socket implementation sorry implementation implementation entry point say server.js no test no no Nishant no yes so if you open server now we will see the package SN file here let's make a file called server.js where we will have our server code for this socket. iio Library so to install socket. IO we can just have npm install socket.io type it in here and enter and this will be listed in the package file here now we can choose the version as well now what we need is to have initialization on our screen click this tab we can have stand alone now we need to have HTTP server using nodejs so we can use this thing called create server from HTTP so if you open server let's make Con what is it create Server create server from HTTP which we'll use a required keyboard because it not as6 module we are using common J so we can make HTTP the next thing we need is to have server capital S equals to require what is it the name is socket. iio now we need to initialize our server from HTTP as it says here we need to do const HTTP server equals to create server which will store its instance in the HTTP server variable we need to have this Io const Io or I can say socket equals to new server and then we can pass this H server in here with a bunch of options that I will add later so the options are optional we don't need this so in some cases we might need them now we need to have IO Doon sorry not IO socket Doon and then pass a event key this connection is called a event key which will tell the socket. I liity that we need a connection so just make it then this will take a call back fun function and then we can just have socket and just console it now let's make a HTTP connection so we can just do HTTP server dot what is it listen port number 3,000 and a call back function as second param or argument to say server is connected we can check if everything that we're doing here is correct yes it is correct so let me now run node server doj and we will see Server is connected this means means our server has been connected successfully now on the client side let's check close server and open client we have installation so here we need to include a CDN as a script but first let's make a folder called C make a file called index. HTML so I can just do this and say socket.io client so we can leave the body as it is but we need to add this CDN so just do and click save now this CDN is done we can also use npm for the client let's say in react or angular or something okay we also need to create a client server file so we can say index.js here and include this as well so I can say Crypt SRC okay SRC index.js and we are done here now we can run this as a live server here will open up in the browser now if you come over to index.js file we need to have the address of server which is sttp local L 3000 so to add it we can just make something like this Con socket equals to IO what is it HTTP local local host 3,000 then save the file now this is done what we need is to have socket. on using the connect event key and also we need to have a call function now here we can do something called Data or let response and do a console log of response so let's save it and check in the browser what we are getting if I open the browser open the console but we made a mistake here and that was we need to have this script after our CDN because this will load first and then this otherwise we can get some errors that we don't want here we are having this thing and if you now check the console we will see this errors so if I refresh once we will see access to xhtml request at this and this is blocked by course policy so when we get errors like this what we need to is just go to server and add CS with an origin of this which is the address of our client application save this file refresh this or memory restart server so let me do this again it is connected and now we are seeing this stuff if you in server.js we are consoling the socket object here and that is what we're having here this events server name all the stuff recovered data connected D because they're connected and such then we are having handshake headers which includes the host connection accept keyword and these stuff time secure it's not secure because I guess it is not https it's HTTP only now if I open the console on the content LIF refresh we will get undefined here because we're not sending anything we're just connecting here to our server now if you come to inspect open the network tab we have a tab here called WS for websockets just like f XR now let me refresh the page and we can see the initial handshake when we make a connection we have eio transport and Sid this is the unique ID for one user or a user if you open the soer io go to the how it work tab we can see this thing that we are having we are having Sid we are not specifying ping time interval and time out that is why it is not here because this is for hardbeat for pinging so this is what we can see here if we are connecting to websockets now let's send a message from our server to client see how to do that what we need to do is in this socket. on we need do socket. Emit and let's say we use a message event key call message and send some message like hello now if you come to here we can just do socket Doon with the same event key which was message that we are having here basically we're creating a room with a message event key and when we have the same event key in the client we can get the message and then a and then a console log here so we can just do data now if you open the console now we can see hello now we are sending a message from our server to client using this emit function that you can see here this emit now how to send the message from our client to server so in the socket on we can just do socket. emit again with the event key so let's make it message as well and let's send hell hello there in the server let me remove this console log and in here we can do socket do on with that event key that we are using to send data from client to server which is again message so we can just do message and then a console log so we can say data CG data save it and let me run the again and we can see this thing called hello there which we're sending from the client this message if I do this this will change automatically and let me just do hello there I am Nishan and we can see the message coming here in real time whenever this changes so this is how we can Implement websocket from server and from client side now let's build a multipl dashboard using websockets and react on the front end so first of all I will be using this Suite to create a react app so let me go over to vs code go to the client folder so CD client clear the console first now let's create a VAB using or for react so if we go down we can see npm create weit at theate latest so npm create we at theate latest to create the latest V tab so just give a DOT for all the project files to be installed and added to the client folder choose react here we will use JavaScript and we are done so now let's move to the client folder and see all the files here now do npm install it's installing all the dependencies from package as we need to add the socket. io client Library here so if you click where let's say initialization and if you go down we can see something here maybe not here go back and then click documentation then click client installation and if you go down we will see how to install it for react using nbm so just do this and you will see this in the package and file this socket. iio client here now let's start the react app using npm run Dev it's hosted on this link so if you open this you will see this now let me clear some things from app.jsx which are this or these things just let me clear this and rename this to let's say react multiplayer dashboard save and we can see we also don't need this so remove it we only need this and this H1 that we having the styles are inside app. CSS so I guess we don't need to have this or maybe if you open main. jsx sorry index. CSS we should have minan height as 100 so if I clear this they should go on the top but the body okay one thing I don't think we need to just leave this here okay the name is here also let me remove also let me remove this count State and we logo and such also the we need the you state we need the use State letter so leave it here we can see react multip dashboard here now let me explain how it will work so for example let me have have two sides here one will be client so let me write client here where is the this one suppose that this is a client side so if I make this Excel place it here this one is the client side which is a react app our react app then we will have a server here so if I make some text here called server how to increase font size manually I don't think we can do this this one I think yes if we do this it will be big now we have client and we have a server first of all if you open server.js we already have a server connected here or the code to make a connection so the origin should be now this to avoid any cords errors so just place this origin here fine now when we make a connection and we don't need to have this as well so we now have a simple connection for socket. iio on the server using this code if you want to know how I did this just go back to my previous video in this playlist now how it will work is let me explain so we will create a form on the client side so if I just do a form here let's say we need to have a form on the client side so when a user opens the application he will see a form which will be input tag and once he puts his name and the score it will go to the back end so form will contain two Fields let's say name and form will have a name and core so suppose that a player playing a game and he wants to update a score like manually because we're not creating a full game so that we can upload or the scores are updated automatically when a user is playing a game he must submit his score with his name once it does that this will go to the server and this will be captured using so. so I can say this form data will be inside an object so let me write something like this here it will be inside an object and this object will have a name let's say P1 or player one and his score so score let's say 1,000 so I can make this smaller I guess maybe not smaller let's put it here so that we can see so yes this will go to the server here and then this core will be updated on the client side like we will send the data from client to server and without refreshing we should get them here as well on the client that was the purpose of websockets so it will go and display them in our application so I can just put it there and I can say this UI let me have the name and score so let's say name will be P1 in a table with a score 1,000 this is how it will work once we will have a form on the screen in the react Tab and once a user submits the form using his name and score this will go to the back end server here I am bad at creating vs like this so forgive me so it will go in the server and it will be sent back to the client in real time and it will be updated here on our screen now on the client side we need to have this IO from socket. IO client so you can just say IO from socket. IO client yes now we need do const socket instance equals to IO dot Non DOT just put the address here just like we did in the previous video so the address will be Local Host where is it Local Host 3,000 this is the address of our socket instance on the server this port number that we are using on the client side here now let me have a US effect hook and inside this effect we will learn a function so let me make it function connect socket not an add function this will be a regular function so we can say so. on connection and a call back then we can say so just take up aam from this call back say socket and add it here save and then run the function in the US effect H so are we running the client yes we are running so let me check in the console what we're getting okay we are not getting anything because we also need to run the server so I can just say CD server and node server.js it is now running so refresh and I guess we're connected here so if you see this on our server because we are also consoling here the socket object it means we're connected now the thing we need to do is we are connected here so let me collapse this console okay now according to this design we need to just have to create a form first so if I create a form using input TX save we will have an input now instead of creating input Fields directly like this we can make components so if I come to Source folder and make a folder called components let's make one now inance now instead of having input fails directly like this here now instead of having input Fails Like This Here directly we can make a component for input field so make a component what is spinning of comp component component folder in here make a file called input. jsx make it a functional component and then simply return one input tag here this will have a placeholder I can say which will come from props so if I get props from here and then the structure let I can say the name which will be placeholder from the props then place the placeholder here or we can directly pass the placeholder here so I can say placeholder then we don't need to do it because we're restructuring it directly now let's pass the placeholder here in this input component that we just made input from components input automatically imported here Place Holder will be equal to let's say enter you name and now we can see it let's style it a little bit so I can just give this a class name and then we can do input field so we can make one we can make a file for styling but let me do it in the app. CSS itself so I can just do input Field height let's say 10 RM okay too big maybe 2 RM yes this is not fine then padding left 1 RM h no one is too much say5 yes this is not fine also we can REM the outline as none fine we have entered your name and let me give a width okay do we have input fields somewhere here because we are seeing the previous Styles the button button hover media rout these things where is the input I guess not here where where where where where fine it is better if we don't have so we can just make width as 20 R like this now it looks better we can type anything in here similarly make one for uh what for one for the score enter your score now let's have a little bit margin between them so come to app. CSS and here just give margin as 1 RM one is too much say 0.5 now we have a name and also one for score correct name and score this is we are having here fine now what we need to do is we need to create a function to capture the value from the and score so I can just say function uh handle input this will take an event fine so let me pass them in these components handle inputs similarly in the second one as well save in the input also D structured this and then just say on change handle input so we need to have the name and the value for name we need to pass some Dynamic names so I can say name which will be equal to name the field name and this will be equal to what score now get the name prop as well in the input the order does not matter matter so I can say name equal to name now if I just come to handle input and do a console log of the event we can get the event captured from the input field so if I type say Nishant we getting the input event here I need to filter through it so I can select the name and the value from this event do Target so basically we will Target the current element and extract the name and value from here then we can just do name as value so that it will become an object so also add an object parenthesis here if I type something like this again refresh it let me add my name Nishan so we are typing in the name field so we're getting name if I type score we will get score because this field this field is for score now we have a name and a value let's make a state using the use State hook which will be const data or we can say score set score which will be an object so use State and object so what we need to do is just set it but first let me grab the current key value pairs so I can say current object equals to an object with the properties here like this remove the console lock for now now we need to set this current object like this now if I console this current object we should get both of the elements inside for one user so if I refresh something is wrong current object is not defined sorry score not this current object because scope is the scope will not work outside the function because of closures so let me add the name Nishant Kumar and samsh called sorry not AG score called 1,000 like this now we're getting the data here properly like this and now we need to set this data or I can send the data to the back end server using socket.io so I can say function I can say emit data or you can say send scores so I can just do a console log of here here fine and we need to have button so I can say okay sorry a button we need send score or I can say publish score on click of the button we need to run the function that was send sces here so once we click the button also give it a class name and say send course and just give some margin on this button margin top say one RM as well fine now if I type this score we can see data here that is the object data from The Forum now what we need is to emit this data to the back end I mean the score data so we can just do it like this we are having a socket using this socket I can just do socket. emit this is a score for scores and then the score now when we click this button of publish course this will be sent to the back end using socket. imit function so save it and now we have to get it here and one more thing I want to do is make this socket as simple as IO so that we do iio Doon and now in this we can say socket. on so we are setting the scores using this key event key called scores so I can say scores and then a call back we can say sces and just do a console log off here sces like this open the terminal in the vs code open the server we can try this out but first I don't think we need this conso of socket just restart it once it is running refresh it here let's try it out let's enter the name called Nishant and score called 1,000 or 10,000 click publish course and it is indeed here the server sorry the name my name and the score let me create a global object so let and we have to store our scores inside this object so I can just say course equals to what we can say here okay in this course we need to store this data so I guess this should not be an array because we can have multiple scores so we can say this is an OB as an array so scores do push this scores so I can just rename this as player what happened player sces and then push it inside this now we can just do a console log of players scodes here and remove it because we can have multiple play players and then we can see it here but this will not work inside we need to just have it here so I guess restart server once more it is running let me open this in the new tab and just do name as Nishan or just say P1 for 1,000 or 10,000 click publish score it is here in this array now for second one let me do Play2 which is player two score 20,000 click publish score and now we're hitting both the scores here in this array that we are having in this console log it is now working I can say but the thing is we need to have some IDE as well which is which will be provided by the scores not the scores I can say socket so this socket is also having an ID so if I just do CLG socket. ID which is a unique ID for each socket connection so for this socket connection we are having an ID for this we are having an ID that we can see if I refresh both of them and I think we need to restart it again so restart just click P1 some sorry click P1 some score 10,000 click publish score and this ID is the socket ID that is unique for each socket connection so we can also store this here so with the sces we can sue we can do socket ID which will be ID simply and just destructure it now if I restart it once more we will have one extra socket ID field which is unique for each connection so if I do player one some score 20,000 publish it we have name as P1 scored as this and ID as this try for this one say P2 score will be say 30,000 click publish score and it is indeed here now that we're getting our scores here as player scores we need to imit this scores back to our client so I can just say uh socket emit I can say players sces and the value players sces so need the console here we can just see directly in our client so where to get it so I can just do it I guess here so we can say socket do on player SC okay what not on what do we do here socket. on yes the key name sorry event key name and say players codes then just do a console log of players codes now we will see this on our consoles so better to start our client server sorry better to restart our server I refresh them and let me try this as P1 score 20,000 publish them nothing happen happened okay the thing is we need to just have them when we click our button so if I type P1 30,000 publish it this data will be here and try this again with different player say 30,000 publish it his score will be on the scoreboard here but the problem is when we click publish the score for P1 or in P1 screen for P2 should be displayed in the console so what we will do is we will run this emit function on socket using set interval on every I can say 5 Seconds set set interval say 5,000 milliseconds and do socket. emit so that it emits the scores on our client side every five seconds so that if I now refresh the page or maybe start server once more after closing it it will limit the scores every 5 seconds in our client side or on our client side so let's wait see what we're getting so currently we have nothing but if I type Nishant and the score of 30,000 publish the score now it is on line number 27 like in m to jsx and I think every 5 Seconds we will get the score updated but the problem is in our server we should have it outside because it is not getting triggered if we don't submit the score so I can just do it here as well like socket. emit so once weing the connection and and submit the form of our scores we can see our scores so what we can do is restart the server once more and do this this let's set P1 20,000 publish same with P2 say 40,000 click publish every 5 Seconds seconds you will get the data displayed see I mean updated P1 and P2 let's start third one called P3 refresh it and let me just have P3 here and then score of 50,000 publish it we now having score of P3 as well and it will reflect edly in the score of P2 and in P1 as well see let me show you the scores and the names all we have left to do is display it in our UI so just make a state which will be an added state so const scores set scores equals to use State and empty array okay one problem is set all scores let's make it then just do this in our socket on player sces to map it we can just come here after publish button and do scores. map let's do the table so if I come to I can say table say HTML some simple HTML table from W3 sces like this so map current score and just return this table like this let me copy this table code will write so we need the TR first but the TR will be okay which where should we show the TR this this should be outside so just WP or just copy this entire table and copy the scores mapping function and we all need to do is just leave one TR which is table row save it and just do this so just let me paste it here and in here we can just map one TR with the okay this is the name what is this it is company contact and Country so in here we can just have only two of them score dot name is it name or something else I guess it is name yes and then the score not score we don't need the third TD so remove it and we need to have t T body as well because it is giving us an issue so just Place one t body as well so Place one t body as well refresh it is still there TR cannot appear as a child of table okay tboard should be after table now it is gone now let's just paste The Styling so if I just copy tdtr and table also th paste it place it and now we have the table the only problem is I think I am doing some mistakes our scoring if I check we have name and score okay it is fine but still we are not seeing anything so just make this as name and score refresh it once so let me try entering on my name called P1 core 20,000 publish it okay the problem here is we don't need to have background color for this and child so remove and now we will get this one more thing I want to do is just show the table only if we have scores otherwise just hide it so I can just make a condition here show the table when the length is more than zero otherwise simply show empty fragment okay table this should be here else empty fragment like this and we're done now let me just add P1 score 20,000 publish it the data will be here let me try for P2 for 30,000 publish it we can see the data of both P1 and P2 and it will be updated automatically let's try for P3 the score will be 40,000 publish it it will be here in some time whenever one user publishes this sces it will be automatically displayed for other users as well and this is how we can create a multipl dashboard using react and and socket. iio now let's perform CR operations using react nodejs and websockets but first of all let's understand what is cred so cred basically means create read update and delete that we perform on web applications so first of all let's create a react T here so make a folder called client that I already have let me navigate into that folder and do npm create V atate latest we need to have in the folder so just do react JavaScript nbmi or install and let me also open socket.io documentation client installation this we need to install in our client so install it so basically we will be using no database just a UT variable here we can say let's say data which will be an array or we can make this as crud let's start the app npm run Dev it has been started let me open client Source clear all the things from app so we don't need these things I mean we don't need this div and this div this card div so let me rename this to cud operations save it let me remove these two things as well fine now we have this on the screen crud operations so crud means as I said it means creating data reading it updating it and deleting it from the database or from some yes from some database but we don't have a database here we have a simple variable called C data so we using this to store our data no database we will use so what we need to do is now create a input field here or multiple input Fields so I can say input let's make this as placeholder enter your name save we will have an input enter name give a class name on the input for some styling say input field so let me copy this input field come to app.css let's write something here which will be height 1 RM or 1.5 RM what about this yes then padding left 5 RM fine let's give a width of 10 VH sorry 10 RM 10 RM we have entered your name let's also make multiple Fields like age interior age but we need to have them in different lines so I can just strap it in a div and give the div a class name of let's say what can we say form let me copy form Fields come to app. CSS and do form Fields display Flex Flex Direction column let's enter it align item Center we have a gap between them Gap one RM now we have inod name and age so we have two input fields we can add third one let's say interior what can we say inter youred age intered phone number and we have three Fields name age and phone number okay so we will use these three fields to send data from the UI to the server so how to do that first let me have a form Handler called let's say handle input let's hook it up on on these three input fields on change handle input let's also pass a prop called name on the input so this will be a name prop because it's a name input field this is an age input field this is a phone number input field so name let's say just phone this will take an event now when we destructure the name and value from the event to Target in this handle input now we need to make an object to store the key value appears as an object so first the name and its value now if you type let's say you type name Nishant the name will be the name because it's a name input field and the value will be Nishant like an object so let's me let me create one state here input or form inputs set form inputs equals to use State empty array no empty let's make it as an empty object Now set form inputs we'll take the previous input as well that it had and it will seure the previous and add the new one this object now we need to have a button as well so make a button and give this a name of add data save let's make a function con handle submit now let's use handle submit on click handle submit on this on click event on add data button we can console this form inputs in the handle submit function so when we click the button of add data we should see the data in the console so let's check name Nishant is 50 for number 1005 click add data we have object okay I think this should be destructured as well sorry now click add data again let's refresh first name Nishant is 50 phone number 105 now we will get all the input Fields like name Nishant age 50 and phone number this so let's send it to back end I in the server and it will be stored inside the Credit Data but first let's configure socket. iio so first import IO from socket.io client now let's create an instance of the client so const socket equals to IO and then we will use this server address which is Local Host 3,000 we need to start server as well but yes so just go into server folder CD server do node server.js it is running now now we are using socket here as our instance now we can just do socket. emit so let's say data and then just send form inputs here save now this data will be sent to the back end server here now we have to store this inside the credit so if I do socket do on to listen to the changes that we are sending from front end on the client we can just do this key name called data we are sending the data for inputs using emit function with the key of data so we will receive it here as well with same key name and to check the data we can say data and CLG data which will be in the console in the terminal in the server so let's check Let me refresh once and enter the name Nishant age say 86 phone number 999 click add data and we don't see anything here I think we need to start it again now let's check again name Nishant age 86 phone number one click add data and here it is we are seeing the data in real time in the console this data now all we need to do is push this data in the Credit Data array so push data now we can console the credit data which will be array so we can do it here as well cred data but will it be okay let's check is start the server it is empty initially now what we need to do is just refresh Nishant 86 900 click add data okay we don't see anything here because I think we're consoling it at the wrong place so we can do it in here as well so clear start refresh name Nishant 0 999 add data and we have the data in the array let's try for one more called UD let's say 90 and 9999 click add data and now we have another field called UD here in this array so we have done this create part so let's make this as done fine the second one is called read this read it means raing data and displaying this on the UI so we can just do it somewhere here after the form fails but first we need to send the data back to the front end this CR data this array to do that we need to do socket. imit say crud data and cred data to Simply send it now to get it first let's make an array const C data set C data equals to use State and array so we have cred data here which is an array now when need to get the data when we submit our form directly which ins inside the handle submit function so we can say socket do on set cred not not set cred data just cred data and crit data let's say CLG crit okay let me make this as data or maybe even response will work anything will work any variable name so if I now check the inspect refresh let's add the name I think restart it again the server here it is running refresh let's add name AG 100 number 999 add data now we're getting an array of object which contains our name age and phone number correct so we're getting the data now just set it in the set cred data and we need to map through it here so after the input fails and the button but the thing is we are seeing nothing here that is because we only set the data when we submit the form now to get it up periodically at some interval we can just set that interval set interval with 1,000 milliseconds or 1 second of interval and then just emit the cred data on every 1 second save let's see the console and we can just do a console log here and one thing we I also need to do here is just do a use effect hook here and simply catch data coming from the server response now refresh so let's try again name Nishant is 0 7979 click add data and we get the data here so let's make this as an H2 not H1 now it's perfect similarly let's add for what the second data it was like age and one more called Data dot we have name age and phone number so it was phone save so we will get all the three datas so let's make a table so just like before let me grab a table grab this table from W3 schools so we need to have this table again let's paste the table here and save it then wrap the entire table contents in t body because it's outdated this documentation on W3 schools T now we need to have the styling tdtr t table and such just add that we have a table here like this now in this table let's name this as name age phone number save this we have name age and phone number now we don't need to have all these tis we can only have one TR and map it so just go pick R data remove this div come over here paste it copy the TR and simply paste it here so that it repeats itself so now we need to just do data do name this should be data do AG this should be data do phone save now we'll have three input Fields here but we also want to give a margin so I can just say Style Just margin top 1 RM this should be a string yeah we have the table here with the data now we also need to clear the input Fields when we submit so I can just do set CR data to empty object sorry not set CR data set form inputs like this now this will not work unless we give a value in them so value should be what the name form inputs. name and such so this should be a this should be form inputs dot name one sec do name this should be age this should be phone now refresh it and one thing you will notice is we will not get the data unless we submit the form so what we need to do is just call this in our use effect hook so use effect which will run on Mount and it will just do socket do on C data and this response now we'll get the data here on every one second so if even even if I refresh the data will be here let's try for another one called UD AG 90 phone number something click add data we have there but the data is not getting disappeared from here so I guess we need to do it name as empty age as empty and phone as empty refresh let's type UD no not UD why should we type let's say Raju age 9t phone number 77 something click add data now we have done the second one called Le operation so let me Mark it as this now that we have added how to add data and rate them let's work on edit and delete functionality so first of all what we will do is Let's Make a function e const get edit data so once we click this button that we have added edit and delete button I mean once we click edit button we should get the data that we are on for examp example let me explain again just first pass a data here so let's say that we clicked edit on this Nishant field this data should go to the function let's add data and set it inside this form input so I can say set form inputs data like this save we can try click edit and the data is here now let's make a state here called is edit set is edit it will be false initially a Boolean value so once we click this button here at the bottom edit button this text add data should change to edit data so we can do set edit as true like this so set edit is true for now and now let's handle the conditional logic here so if is edit is true we will show edit else it will show add simple data so click edit and it is now Ed data now we have to do same thing on this on click event as well but let's create one function here const uh let's say handle edit one sec no yeah it's fine handle edit and once we click the button we should send the edited data to the server first let me have this here where's the onli event on ADD here if is edit is true we need to trigger handle edit else handle submit now let's come to handle edit function and let's console this form inputs so I can say CG form inputs open the console if I refresh let's click edit on Nishant let's make the age to 30 click edit data and now you will see the edited data here and we have IDE as well that we need to add data and we also have ID that I have added here using a library called uu ID V4 from uu ID basically it generates a unique ID for us which is a number basically like this so we will use this ID to edit the data so we have the for inputs on handle let's send it to the back end so to send it to the back end we can just do socket. on edit data and then do form inputs now let's come to server and here on the connection we can do socket do on edit data this event key and we can simply console the response so if I do response CG response we need to restart the server again for this to work open server rest start so if I refresh this initially we have no data let's add age and okay fine let's now click edit and add the phone number click edit data and it is inside online number four okay we don't see it here okay the thing is we need to make emit here not on sorry so that data is emitted from the front end to the back end click edit data and now it is here the name age ID and phone number so in this function let's edit it first of all we need to find the index where we want to set this object in the array which is a Credit Data array so we can just do let current index equals to CED data do find Index this method find index will be used to find the index of the current element using the ID so let's say data data do ID if it is equal to response do ID we have ID in the response and we have an ID in the Creditor for this current index we have the current index let's check if current index is not equals to minus1 it means the index is valid and all we need to do is set it inside so I can do uh thre data current index equals to let's use this object which is a response and we also need to pass the previous data so I can say CCT data and current index let's add a comma and also destructure this so we're setting the previous data with the new data in this cred data array so if I just clear the console let start the server once more let's see what we have when we edit something so add the name age phone number add data so data is there let's edit it let's make the age to 90 click edit data and see the age has been changed to 90 and in the console as well now let's try to add something else like make this number as 5: 1 instead of 5 to 0 edit data and it has been changed so one more thing we can do is in the handle edit function once we submit we need to set this data back to false like we need to set is edit to false so that the button that we are having is changed to add data again so make this as false and let me remove this console log and last thing here set form inputs like this here save now let's change it again refresh click edit on Nishant no no sorry they should not be here they should be here where should I add this yeah here on handle edit now click edit change it to back to 5 to0 click edit data and it has been changed in the form the data is gone we have no data populated here anymore now let's work on delete one so to delete our operation is similar let's make a function con handle delete this will take one ID only nothing else we need to pass so we can just do on click handle delete as we pass the current ID of this object that we're clicking so pass the ID like data do ID let's save it come to server let's make one for delete socket do on delete data and let's say we have a ID response now just like this we need to find the index of the current item we're clicking on using the current ID but here we won't have to use response. ID just use ID like this because we are getting only the ID now if current index let's add if current index not equals to minus1 we just need to do c data do splice let's add current index comma one because we want to remove one element from that so okay here we are having handle delete which is this now we have to pass this I to the server so what we can do is socket. emit delete data so this event key and simply pass the ID and that's all we can try this but first it needs a restart so do it it is running let's try it out say age name age and phone number let me add one more there age phone number add delete let's say UD deleted let's add one more called Raju AG 90 phone number some random phone number let's add let's delete Nishant and it has gone so that's how it works the delete functionality as well so now we have covered create read let me Mark update and delete as well that covers our C operations using react nodejs and websockets using socket.io
