What are WebSockets | How is it different from HTTP?

how often do you use chatting applications in the browser and have you ever wondered how's it different from a normal website let's see what are WebSockets and how is it different from a normal HTTP protocol press the bell icon on the YouTube app and never miss any update from tech primers the [Music] identify this particular session was how does the HTTP protocol work we are going to see what happens under the hood whenever an HTTP request is sent and received we are going to see what our WebSockets where and when can WebSockets be used real-time WebSocket implementations and also when not to use WebSockets so how does the HTTP protocol work under the hood take a typical google.com so whenever we hit google.com the request goes to a back-end server and this request goes in the form of HTTP or HTTPS so these are the communication protocols which our browser uses to communicate with the web server whenever there is a request sent to the web server there will be a response sent as well so when a request is sent there will be a TCP connection created between the client and the server and once the response is received this connection gets closed so every time you RL is sent to the web server that is the connection open and the connection is closed once the response is received so let's say a website is giving five different requests to the web server in order to retrieve five different information it is going to create five different connections separately and it is going to close those connections once the responses are received this is how a typical HTTP or HTTPS connection both if you take any rest connection it is also the same thing so whenever you are hitting a rest endpoint from your UI or from a different server it is going to create a separate connection it is going to request the data from the server once the response is received the connection gets close let's say there is a web client which is going to send hundreds of requests to the back-end web server when it is doing some trade processing it is good to retrieve those 100 information with 100 set of new connections so every time a request is made a new connection is made this is how a typical HTTP or HTTPS connection books so every time you hit a website it makes a request so a new connection is created every single time what are WebSockets and how are they different from the traditional HTTP mooned whenever WebSocket is involved there will be a client and server similar to how we have in our current day-to-day scenario this could be a client of the browser or maybe a different server in itself there is a bi-directional communication between WebSockets WebSockets are created using WS colon double slash unlike the HTTP WebSockets use this format whenever you see WS colon double slash in a website that means it is using WebSockets I'll show you that in a bit but understand that the difference between the HTTP connection and a WebSocket is that HTTPS are unidirectional so the sender has to trigger a request and he will get a response web circuits are bi-directional so the sender can send the data the receiver also can send the data so in this particular case let's consider chatting application so you have a chat window open you are sending a request to the server you are hitting hi to your friend your friend also has his browser open he receives the request from the server automatically whenever you are sending the request it is from you to the server when that is pushed to his UI it is done from the server to the UI same way whenever your friend pushes some message you also receive it in the same fashion WebSockets uses bi-directional communication how are they achieving it they don't close the connection which they open for the first time whenever a client has established a connection with the server the connection stays there until the client or the server decides to terminate the connection let's see that with the example let's consider client there's a client which is the web browser and there is a server whenever we initiate a connection between the client on the server the handshake is made and the client of the server decide that ok we will create a new connection and this is going to be there forever until I die once the connection is open the communication happens in terms of bi-directional message processing once the connection is opened the connection exists until the client or the server dies when one of the side decides to close the connection the connection gets terminated permanently from both the ends so this is how WebSocket works unlike HTTP where a connection is created response is received and the connection is closed here the connection is created and kept open and communications happen between the same connection once the client decides that I am done with the updates I don't want to receive anything from the server the connection gets closed where and when can WebSockets be used obviously it can be used with real time applications when you want to load the UI without even having to refresh the UI you could think about ajax ajax is the implementation over HTTP where we do HTTP polling or streaming it still uses HTTP so every time it has to open a new socket and then hold the data however in WebSockets there is already an open connection and the data is pushed over the same connection that's why deb sockets are faster I'll show you a typical example of WebSocket in the night next slide how faster it is the next one is the gaming applications if you're playing a game in the web browser you might notice that you don't have to refresh show you what the UI gets automatically refresh without even having to reestablish a new connection so WebSockets are very helpful when you're playing games chart applications as I said earlier with an example chat applications heavily use WebSockets so let's see some real time WebSocket implementation examples I'm just going to show you some websites which are using WebSockets even google.com uses WebSockets but I'll just show a little bit complex implementation so that you have an idea about what are WebSockets and how they are really used this is the Bitcoin exchange this is the most volatile thing which is happening so I just wanted to show you or make you feel how the communication happens and how quick it is what we are going to do is we are going to see the back side of this website so we are going to see what's happening then there then there are that question responses going in let me move this down a little bit so that I can show you or maybe if you notice here this is the G tax exchange their bitcoins and some of the crypto currencies are traded these are some different crypto currencies which are getting traded I just wanted to show you how WebSockets are used in this particular website if you see if you notice here the data is getting changed every second or every millisecond right there are so many data which are getting pushed to the client side so how are these happening so these are happening because there are WebSockets implemented in this particular webpage let me go to the network option here and let's park this a little bit whenever you click on a URL let's say this is a URL which got loaded as a part of this which then as a part of this website load if you notice here it uses HTTP connection so this is the traditional HTTP protocol however how the feeds getting updated that is using WebSockets if you notice this particular URL the request URL this is using WebSockets it is using W speed dodgy Dax and using the request method get the status code is one not one because the way WebSockets worker slightly different from how HTTP works let me load this website again when we load this website a connection is created between the client and the server and it creates a socket and keeps it there and further communications happen via the same channel let's go to the same WebSocket channel there is an option called streams where you can see what's happening now notice here there are lots of messages coming in and these are the JSON messages which are getting updated in the UI that's how whenever there's an update we are saying that there is a change in thee let's move this if you notice here the frames are coming in and you can see the data getting changed so this is WebSockets we did not refresh any page we are not doing any Ajax call we are not triggering any requests however the data is getting pushed to the u1 whenever there is an update from the server side so whenever there is a change in the stop the data is getting pushed to all these clients which are registered to the server our client is one of the register that's why the data is getting pushed to our UI this is a example of how WebSockets can be using the trading world let's see a chat example let me close this window let's do the same inspect here so that we can see what's happening when there is a communication happening with the server let me refresh the page so that the networks are loaded here so the transport happens using this particular WebSocket notice here there is a WebSocket here as well so WS : so this is a WebSocket you can go to the frames the frames show how much data is coming in and going up so see this somebody has left the chatroom that's why the data is gone let enter the chat room right saying tech primers see that there was a request sent to the server saying add user ted primers somebody else also logged in i think it's a login message saying 26 participants are there including us then i think we got some message 2 and 3 i think it went up and down right let's try publishing a message say hi once we say hi we sent 4 different messages the first one is called typing then stop typing new message and then stop typing so these are the different messages which we sent to the server and now if you notice the server send us some message this is how WebSockets work so we had created a socket connection between the client on the server if I just refresh this particular window these communication whatever we did already will be expired and there will be a new set of communication happening so the state is like lost once we reverse the connection once we recreate the connection so messages which we will be publishing will not have any internal dependency within the state so whenever a message one receives the client that message should not have any relevance to message two that way we will be able to easily get new and new data every time we reverse the you want that's how we are able to see only the new messages in the chat window and we don't care about the messages which we got some time back that leads to us to the next topic which is nothing but when not to use WebSockets that socket should not be used whenever we don't want to how only the new data if let's say we want to retrieve old information as well that's when you can go for HTTP because you can use some restful web services and hit the rest endpoint and then get rid of the data because it's going to be only one short thing WebSockets can be used when you want real-time updates if you don't want any real time updates then it is better not to go for WebSockets because web socket just needs a socket and then keeps it alive if you are not worried about getting the data every now on them and if you want to just load the data only once you can go for HTTP because HTTP creates a connection once we send the request and it closes the connection once the response is retreat however WebSockets keeps the connection online until we kill our connection as I said restful web services are sufficient to get the data from the server if you are getting the data only once if you are loading the data only once then it is better to go for restful web services however if you want to get real-time updates that's when you can go for WebSockets so what did we see in this particular video we saw how does the HTTP protocol works they should TP protocol is a unidirectional protocol you can create a connection using be they should it be a request method and the connection gets closed once the responses have seen we also saw what are WebSockets WebSockets are bi-directional communication protocol which can be using a single connection and it can send the data from the server to the client and from the client to the server where and when can WebSockets be used we saw the real-time stock trading application we saw chat application and also it can be used in all real-time applications which we created then not to use WebSockets we should not be using it when we don't want to have the connection retained for a stipulated amount of time that's when we can ignore using the WebSockets I hope you guys found this video interesting and you just got a basic idea about what are WebSockets in the future videos we might be seeing how to create WebSockets using a UI application or maybe a java application or even a JavaScript application that's it for this particular video if you liked the video go ahead and like it if you haven't subscribe to the channel go ahead and subscribe to it meet you again in the next video thank you very much [Music] [Music] you

Channel: Tech Primers

Views: 270,112

Rating: 4.8202987 out of 5

Keywords: techprimers, tech primers, http vs websockets, websockets vs http, what are websockets, websocket server, websocket framework, web socket example, websocket example, how is websocket different from http, secure websockets

Id: i5OVcTdt_OU

Length: 15min 42sec (942 seconds)

Published: Thu Jan 25 2018