How to use WebSockets - JavaScript Tutorial For Beginners

How to use WebSockets

How to use WebSockets

hey guys how you going my name is dom and in today’s video we’re going to be having a look at the basics of using websockets okay so websockets allows for two-way event-driven communication between a web browser and a websocket server okay so this makes it perfect for real-time applications so things like chat applications multiplayer games or even displaying live data okay so after watching this tutorial you should be able to create your own simple websockets application so i want to jump right into actually using websockets and of course sending data between this page and our server side okay so let’s go inside the text editor as we can see i’ve got this index.html file so of course this one refers to this page right here and we’re going to be sending information from this page to our server side so let’s firstly just create a new websocket server okay so we’re going to be using node.js as our server-side technology but you can use many different languages and technologies but of course node.js is probably one of the more popular ones okay so let’s go inside here make a new directory called server and of course you want to make sure you have npm or nodejs installed so we’re going to be going inside the terminal for this directory so forward slash server and we’re going to be creating a new node.js project by saying npm init dash y okay so now we can install uh one of the more popular node.js websocket servers it’s called ws so i can say right here npmi then of course ws so now that’s installed we can then make a new index.js inside this directory okay and of course right here we’re going to be writing up our websocket server so let’s first include that module we can say const web socket equal to require then pass through here ws and now we can easily create our server by saying const wss short for websocket server equal to a new websocket.server then pass through here a list of options so i’m just going to be specifying one option here and that is going to be the port which the server runs on so i can say here ports then specify something like 8082 okay so now this line of code is of course going to actually start up our websocket server so let’s listen for an event where a new client has connected to our server we can achieve this by saying wss.on then pass through here connection so of course you can pass through many different event types here we’re going to be passing through connection and of course it’s going to fire off whenever a new client has connected so basically when i refresh this page we expect this function right here so i can just say right here ws so this function right here this callback function for this event is going to run when i refresh this page now ws refers to a single connection to the server side if you have multiple different tabs open here or you have multiple different users connecting at once then you’re gonna have many of these connection events firing off and many different ws objects okay so ws refers to a single connection whereas wss refers to the actual server so now we can say console.log then pass through here new client connected for example okay so now once this is done like i said earlier if i refresh this page we expect in the console new client connected we can also listen for the close event for this particular client so for example we can say ws dot on then pass through here close then inside here we can simply just say you know console.log clients has disconnected okay so as we can see we are actually putting this on this single websocket connection and of course not on the websocket server okay so just keep that in mind so now this is all we’re going to be putting just for now so 11 lines of code gives you a very basic websocket server let’s now just go inside here and say node index.js to of course start our server just like that i’m now going to just go inside this tab for the html file i’ll just close this for now but it is still running in the background and now inside the html we can connect to our server so let’s say in the javascript const ws is equal to a new instance of websocket just like that inside here you pass through the url for your websocket server in this case we’re going to be passing through ws colon forward slash forward slash localhost at port 8082 okay so i do want to say first off for development purposes where you know while you’re experimenting locally ws is perfectly fine but for production you want to make sure you use wss which is the secure form of websockets okay but of course ws is fine for local development so now this line of code when executed is going to connect to our websocket server right here okay so we’re going to be saying in a similar fashion down here we can say ws.ad event listener we’re going to be listening for the open event and this one right here is going to fire off whenever we are connected to our server side so we can say here for example uh let’s just say console.log we are connected okay so now we have the server running i’m just going to maximize the terminal window right here then refresh the browser as we can see we get right here we are connected so of course we are connected to the server okay so now back inside the terminal we can see right here we get new client connected on the server side so currently everything is working to plan okay of course this event has fired off okay we are connected and of course right here we are also listening for the close event so if i was to go back inside the browser then refresh then go back inside here we can see in the terminal we get client has disconnected because when i refresh the page it closes the connection to the server and then of course it reconnects right after on the refresh okay so now let’s just go back inside the browser and inspect the network tab of the developer tools inside here we can see right down here when filtering by ws we can actually see not only our messages when we actually send some but also inside the headers we can see the websocket handshake be taken place so initially when establishing a connection to the server side it sends through an http request but then that gets upgraded to a websocket connection as we can see right here in the request headers uh the browser has said i want to upgrade so connection upgrade it is said upgrade websocket it is trying to upgrade the http request to our websocket protocol okay then the server has said yes i can do that so in the response that is it says okay connection upgrade upgrade websocket and now the hand check is complete so now we can officially start sending data between the client and the server okay so let’s now send a few messages of course between two so let’s actually send some messages or send a message from the web browser to the server side first so inside here let’s just let’s just stop the server then go back inside the index.js and we’re going to be specifying one more event listener for the server side so we’re going to be saying ws dot on once again this time the event is going to be message okay then inside here we can of course run this run this listener so i can say right here basically just data now data refers to the actual data which the client side has sent to the server okay so when the server side gets a message from this websocket connection the data is inside here so i can say for example console.log something like client has sent us then pass through here the actual data okay so now let’s save this and then restart the server by saying once again node index.js let’s go back inside the index.html and once we have actually opened up the connection we are now safe to start sending data so let’s say here ws dot send then pass through here for example hey how’s it going just like that so now it’s going to send this message the server side is going to retrieve it through this function right here and of course log it to the console so now let’s save this let’s just open up the terminal once again okay let’s go back in the browser refresh and right here we can see of course we get once again we are connected but also inside the network tab we can see also if i click on this once again we get a message right here data hey how’s it going and that just tells you that we’ve actually sent that message to the server back inside the terminal we can see right here we get client has sent us hey how’s it going that’s working perfectly fine so now let’s send data from the server back to the client so let’s just uh once again stop this server then go back inside here and in the on listener we’re going to also just say ws.send this time on the server side we can pass through here data dot two uppercase so we’re gonna simply transform the string into uppercase and send it back to the client okay let’s go back inside the index.html now and actually you know retrieve that message so it’s going to be done in a very similar fashion so we can say right here ws dot add event listener pass through here message then here we’re gonna have a message event object so we can say right here simply just console.log for now okay we can then start the server once again make it full screen refresh the browser in the console tab we can see right here we get message events okay from the server side and of course right here inside the data property we get our uppercase stream okay so to access that property of course you can simply just say you know e dot data something like that but you may also want to consider using object destructuring for example we can say something like this data okay then now data is going to refer to the data property on that object so now if i save this and refresh once again we can see we get hey how’s it going in the console now that’s basically how it works a very simple example sending strings back and forth okay now i wanna i wanna mention also that if i was to just duplicate this tab here and refresh we can see that we get of course many different messages uh in the terminal so if i or get right here we get one two three so if i do it again okay try again we now get four so like i said uh essentially this function right here this this on connection is going to run for every single individual connection just keep that in mind but that is the basics of using websockets thanks for watching guys and i’ll see you later you

Watch Tutorial How to Use Websocket on Youtube

About the author

Leave a Reply

Your email address will not be published.