The Complete Guide to WebSockets

what is going on guys happy new year this is a very very small gift from me from me to you in this 2021 uh this was one of my udemy courses is called the complete guide to websockets and i'm making it available here for free on youtube it's a little bit more than five hours take your time enjoy and uh the reason i'm i'm not making that a free on youtube because guess what udemy sucks as a platform and they change their rules so that only two hours you can only make courses that are two hours or less free so huh so alas anyway so that's why i i privated that course on udemy but it's now available here for youtube in youtube hope you enjoyed guys and uh so let's talk through about the curriculum on this course a little bit um first of all there will be and you'll start seeing chapters youtube chapters where you can jump to the interesting part of the video at any time your leisure so the first section is just an introduction to http and web servers stuff like that because this is very critical in order to understand what sockets the second section talked about an introduction about websocket what is this thing uh why do we need it stuff like that with a little bit of practical uh slides and code and all that stuff the third section talking about scaling web sockets how we can actually go you deploy reverse proxies and load balancers to scale whoop sockets because that's a little bit tricky since bob sockets is um a little bit uh stateful so it's has it's not easy to scale right and um then there is next section i'm going to talk about securing web sockets because a little bit different than http but nevertheless it's it's very easy to secure you can use tls on top of websockets then i have a final section which i called advanced websocket topics which is just a collection of my different youtube videos where i talked about websockets and the future of websockets and then advanced topics of websockets like like websockets on top of hdb2 and and what's the future of websocket and how would as wob socket really look like under the hood with wireshark so all these fancy stuff that are really optional but i hope you enjoyed this course i'm gonna see you in the next one and let's just jump in the course qn http is a protocol for transferring web pages text images media binary files and much much much more it stands for hypertext transfer protocol it is what the internet pretty much runs on everything you're using that is pretty much runs on the http in this video we will learn how http works how it is secure with https this green lock that you see when you browse for example google or gmail right or any website that is secure for that matter we'll also learn how to spin up your own http web server we're going to talk what is an http web server to begin we're going to talk about that we'll also learn very quickly about the evolution of http 17.10 what changes what bad decisions those guys made to 1 1 and then http 2 which google basically helped with speedy and eventually http slash 3 which is still experimental by the way as of the making of this video right has been up i think approved by the internet engineering task force but it's still under experimental if you're new here welcome my name is hussein and in this channel we discuss all sorts of software engineering by example so if you want to become a better software engineer consider subscribing hit that bell icon and like this video if you like it that's it let's just jump into the video guys so here's the agenda we're going to talk about the http anatomy right so the essentially this layer 7 concept right and how it is actually a client server architecture mainly and uh we're going to talk about that a little bit we're going to show you how our http request show looks like how a response looks like and then we're going to talk about the http 100 over tcp okay so that's the first version i think it was 1996 when it was first released there was a version before that but i'm not gonna go through that that's like pretty much that's the was the popular version oh no then there was a lot of problem with this thing they invented one one still for a long time 1.1 most of the site now running still 1.1 over tcp i'm going to talk about what that mean really over tcp right and uh http 2 over tcpn and finally we're going to talk about http 2 over quake which is a udp version that google is experimenting on so it's a udb protocol okay and it has actually has more features right and i'm gonna reference a video that movement tcp versus youtube i really highly recommend you watch that guys it's like a like a mini course 40 minutes it's a free you can watch it and i talk about the details of tcp versus udpn and i really really if you know the basics you can jump into the video that's okay but really take some time and watch that tcp versus udp this is the experimental version they're renaming it to http 3. all right so it is client server architecture we know how client server architecture works there is a client somewhere there is a server somewhere you as a client request something that is only available on the server you send the request the server responds with the response okay that's a client server architecture for the web for the http the client is guess what your browser most 99 of cases like you're browsing something right if you go to google.com you're making an http get request okay and there is eventually a server that lands that request goes through proxies and switches and go through tcps and and get packets final reaches the destination server where it is an http web server okay that finds that request you want index.html you want a js json file you want an image and that takes that shoves it up back to this vehicle which is mostly tcp and then sends it over to you okay it's a client server it's a request response architecture it's always been the case okay does that mean that's the only thing i can request with browser no you can make a http request from python you can make an extruder code from a javascript application you can make an http works and you are actually making an http request from your phone if you're watching this in your phone for some for some reason ios or android you're making http request to the service right if you're watching through through youtube for example there are some http requests going to the back end okay so http request essentially is is this medium that we we just uh shove everything it's a standard everybody knows how to understand it right and how to talk through it that's why we're using it everywhere there are some limitations we're improving it google has a huge contribution it's actually almost scary how a lot of contribution has google on this thing okay like especially with speedy with 200 and 300. it's like almost most of the thing is just google is going to take over the world dude all right so server i don't know if you're from the 90s like me right when i started the university in the 90s you probably used apache somewhere all right php right the lamp stack or wamp stack we didn't have linux mac i i worked with one dozen mainly but lamp stack wamp stack whatever right so apache that's a web server iis this is internet information services that's a windows thing that comes with your windows you can enable on windows features and you get boo you get a web server you can write your own web server from scratch using node.js there's certain apis that allow you to do that right and there's like a when we're going to show that you can actually build your own you can just use a ready-made web server and node.js we're going to use the shittyb dash server to show that python tornado i made a course called python on the backend little plug here guys check that of course out it's just showing you how to build a web server using python and details about how you can serve content from python it's a it's a i i really proud of that course go check it out it's going to help me all right i'm going to leave a coupon code right here python on the backend i think it's just on turn dollars don't buy it from udemy it's going to show you like 200 or whatever so use my coupon code if you want if you want to check out that course right http request fewer american requests these are the four items properties in http request there are many others but i would like to just talk about these things only right there's the url obviously right you're going http husseinnowser.com http google.com okay example.com that's a url slash whatever twitter.com that's that's a url the auto has a lot of components it has like the whole path the arguments all right we don't really need to talk about that i made another video i'm gonna reference it here just breaking down the url really yeah it's a it's a long thing okay is this url you're making a request you have to tell me what you are you're gonna make you have to tell me what method you're talking about and these methods are really interesting i made certain videos like to explain the differences between these detailed methods basically mostly get post put delete and i think options and there are a lot of http method and each method has some semantic git mainly says hey please give me an a page or an image so reading essentially like almost like if you know sql database there's like this semantic where select is actually a query right get is the select version of the sql if you want all right and insert is basically post and update is basically put and delete is basically delete right so that's kind of if you want to it's just a different semantics right get we made a video about uh git versus post and the details differences semantically between those two okay but you're gonna tell me what do you want right what method are you executing okay and then url method right because these two things will give your essential results headers what kind of content are you sending to me uh are you sending any cookies it goes in the headers uh what else it goes a lot of things here host where which host are you going to if in case of proxies right you want to if you want to use a layer 7 proxy and to kind of navigate yourself you need to support the header host here and location other stuff as well buddy certain method types have but that's where the difference comes right here like get has doesn't have a body it will it will give you an error if you try to send a body with a get you have to send it through the url and we talked about this in the video git versus post all right and uh post will have a body because hey i'm gonna upload an image that's a post right okay the post request you're gonna send the content type of the image's image and then you're gonna send the binary stuff in the body so it's gonna be long right the body http response i am going to hopefully make a series about all the beautiful stat status codes that are there are oh plan i'm just gonna talk through uh one video as each status quo to win video i'm gonna make a series i'm really excited uh tell me in the comment section if you were excited to see that series showing i get motivated to make it sooner okay but i'm gonna make it anyway so static code this is guys you probably know it if you make a request to a web server it responds with three things status code headers and the body so the body is the actual image that you requested the actual json content the actual index.html file or html form headers is hey this is the content type is actually application slash json application slash text whatever and applications like octa binary status code is actually whether that succeeded or not or warning or all this kind of things 200 is basically hey success okay that means you're cool 201 means oh hey you created it 404 it's very popular status quo it's pretty much used everywhere 404 i couldn't find that url that you requested whatever you requested here i couldn't find it so we return 404 and the web server has to be authored in a smart way to actually handle those things iis apache pretty much http server node.js is going to do that for you but if you're writing your own web server right which we kind of did in one of those videos i'm gonna find it i'm gonna reference it here okay then you have to handle those status codes for you which is which is pretty cool if you ask me right so if you're like you're creating like if you're building a service like a normal service a web service a micro service right you want to handle your own status codes right you're writing everything's from scratch right you're making a request you're getting a request you have to return and you tell me that what kind of status you're returning based on that so that client actually understand other clients understand all right let's show some example guys we're going to show two examples we're going to show you how to browse because you guys obviously don't know how to use the internet i'm going to show you how to navigate the internet and just browse using the browser okay because that's what you came for this video for i just kidding all right we're going to show you the browser going to show you the request that's going on right i'm going to show you how to spin up your own hdtv web server okay let's get into it i'm here open to chrome and i am i just want to incognito just so i don't have any caches or anything right so i want to just start from scratch and i want to go to my website which is www.husainnowser.com can't even spell my name okay and this is this is the request that we made all right we went to husseinus.com and this is what we got back okay let's analyze that if you go to this three dots right i think it's called burger button whatever more tools developer tools let's see what happened here you go to network and you say if you go after the fact that you browse you're not gonna see anything but if the movie refresh you're gonna see the whole those requests oh my god look at that look at that my website actually sucks man i'm using blogspot and look at all this this request this is slow right because you're making a lot of requests but that's the first request that goes here okay and let's talk about these things real bit okay that's the request okay so we made a request to hussein also dot com right let's look at the request headers what do we have we have a lot of stuff guys we are going to say nasa.com the method that we talked about is git the path the url is just slash right uh whether you're using https we're going to talk about a little bit about https actually we talked about tls and another video we're going to reference that as well but what do you expect except as a result okay encoding and cache whether you want to cache it or not and so many other things the user agent so this is a request right the response is the actual the response headers right say i'm sending you back what text html because that's the index.html or whatever the page was as you can see you can even tell that i'm using blogger right and uh the date etag for caching we made a video about etag i'm going to reference it here how cash actually works pretty cool stuff really guys and the status 200 i mean it is coolish that means it is coolish and this is just like a general uh summary of all the requests right so we have status 200 git and all that stuff remote server like what is the remote address actually served you this could be a little bit uh different because it could be actually it might be the proxy ip address but nevertheless right cookies whether you have used cookies whether the server created cookies guys i'm going to reference oh my god i referenced a lot of videos right we made a lot of videos cookies we made a course about cookies actually just it's just a free course check it out it's just talking about the different kind of cookies you would think a simple concept like cookies is just a simple thing but it has a lot of thing and we talked about that as well and the response look at that that's our html for you and you can see this is just the first request guys right after that after we got that we got a bunch of index.html and the browser says ooh that's just there's a lot of url here right i need to stop pulling some stuff so the browser said oh let's go ahead and make other requests started with css for some reason right so it looks like it looked at the first thing it looks like the headers of this thing right and started pulling one of them one by one manually oh css let's put the css and then the plus one dot js what's this thing plus one.js i don't even see it but somewhere here okay so start pulling all these uh files or resources okay okay now let's make another get request to blogger.com css right plus1.js and then images now let's talk about images how does the image looks like here yay the content type look at that image png right so you're going to receive different response response things here and some of these will get cached based on your e-tags right if you receive an e-tag or not it's going to hit cash so the browser doesn't have to make these requests obviously it's more performed this way and then you get the idea right so we get a lot of requests do we have any other kind of status quo that i can show maybe if i refresh again do i get any fancier status codes no it's all yeah there you go there you go 302 found right so i don't remember what that means three or two found obviously it's found i think this is um this is the redirection thing there was another request that actually shows uh the the three two all four there you go what is this 204 so 204 yeah i forgot what that means okay guys all right so this is a request we talked about requests we have a response how do i spend my own web server this is this is connecting to a server that already exists i want to spin my own servers sir okay let's show you how to do that what i'm gonna do here guys is actually i'm gonna open visual studio code you can download it for free it's the best editor out there in my opinion okay you can disagree with that if you want to but and i'm gonna spin up and i'm gonna write a simple html page and now i'm going to spin up my own web server on my machine and i am going to request it from the browser let's do that okay so let's go ahead and open a new folder all right guys so i'm gonna go ahead and create a new folder call it http tutorial and then i'm gonna open this folder i am going to create a new brand new index.html doesn't have to be index.html but you can call it anything you want i'm going to do html5 tab and i'm going to go hello world and i'm going to do it i know hello guys this is my first website then yeah right and then i'm gonna use the terminal here and this is a trick here i have installed a plugin with node.js called http server you can go to the same path to the folder that you have and you go to terminal then when you do that is your http server done i'm gonna reference a video that it's like literally a three minute video to show you how to set up this thing it's literally install node.js do i think it's called npm install g http.server to install it globally and then voila we have running web server on port 8080 it's a little bit ugly it's not just without a port but we talked about how to forward ports and on other videos check out the other content of this channel guys there's a lot if you consider subscribing you're gonna learn a lot of stuff so i'm gonna use my own ip address localhost 8080 and if i do that oh that's my beautiful webpage look at that let's take a look at the request there's one should be one request right that's it one request there's no other thing to request and then there's like these are the requests that uh that chrome sent you can make the same request using uh using the fetch api which we talked about the fetch api i'm gonna reference it here so let's go ahead and actually show you how to write javascript code to actually pull no not necessarily uh the browser right but i'm gonna write code to pull this thing okay so i'm gonna do http localhost 8080 the fetch api and then close this thing and then then if that's okay go ahead and i'm expecting text back right and then go ahead then console.log just printed that thing and then boop look at that guys so i just made a request using javascript here because javascript is the best language ever okay because you can open a browser on any machine and you can write code immediately no plugin no have to install anything it just works right that's why i like javascript okay python it's a great language but that barrier that doesn't allow me to work on any machine i want this thing any machine just walk in a library and you can start writing javascript code right there without installing a single anything okay that's the cool thing about it okay all right guys let's jump back to boring slides how about that all right so we talked about http responses requests web servers we showed you how to make a feature request we showed you how to make a web server spin up your own web server redo all of that stuff but how does it work how does it really work how does this http work usually you have a client that's your browser or that's your javascript application or that's your python application or that's your i don't know c-sharp application that makes a request that's your mobile app that your ios app that makes a request to a server you get the idea right and this is our aws or the web server or anything that hosts a web server an http web server has to be an http web server understands how to deal with http requests okay and here's what what we really need to talk about it http is the layer 7 protocol so what does that mean what are these layers that you talked about i'm glad you asked because we made a video about this osi model opera interconnection uh um interconnection protocol and model which has this desire layer seven is the http smtp and all that stuff we have layer four which has the tcp udp we have layer two which has the data link the frames the mac addresses and physical layer one which is the actual fiber optics or or or ethernet the actual electricity going down or the light okay so we talked about this in another video i'm gonna reference it here okay gonna reference the osi model please please take a look at it so it will actually explain to you how how this tcp connection works what are we how's this russian doll effect where we can put a packet inside another package or another packet and then unpack it and shows another it's exactly like a russian doll thing http is this layer 7 protocol it's the logical layer where we have the application where we we talked about headers and what we talked about urls we talked about method types we talked about body the wires the actual internet connection if you look at that layer one it's just a bunch of ones and zero and you probably know that guys it's like okay oh you know this is one since we're always saying you didn't see anything new right but it is actually a bunch of phones in zero but that's at that level it is actually literally it's just electricity to be honest right or just light and that light has some ones and zeros snuck into that and to it that only the destination actually can parse and make sense of it there's a lot of garbage so there's a there's the devices that switches actually just can extract meaningful data of this light and electricity once we do that the layer two that actually takes actually makes a logical frame which is still doesn't make sense to this application because it's it's still ones and zeros but it has metadata called mac address which is a physical network layer network address okay then upper leather level ip address oh i i know what an ip address is at the layer 3 you start seeing ip addresses and the layer 4 you start seeing even more cool stuff you start seeing the ports port 80 i don't think we talk about ports but ports essentially is the application level concept right once you see at the tcp layer you start seeing these ports okay and then what we're going up that other layer this encryption layer session layer and then go all the way and then unpack all the dolls the session doll until we found a bunch of blob string that actually looks like an http request tcp is the vehicle that transports this blob of string for us the http that we talked about right it's just blindly transport this thing it does it has no idea what it's transported it's a stupid layer it is it's a smart layer i'm sorry there's a smart layer that does its job very well okay let's rephrase it okay but it's just like a bus just like a bus send send me data i'm gonna receive it i'm gonna send it i'm gonna send it in a way that it is received correctly at the at the other end and we talked about tcp and udb tcp is a little bit expensive because to ensure this integrity it has to do a lot of stuff it has to do a lot a lot a lot of stuff okay and uh congestion control and all that stuff but tcp it uses tcp in a nutshell okay that's what i want to talk about so a tcp as this vehicle is that the the the boss that carries this data right around okay so it just chunks this data and then into packets and then shove this data into tcp and shoot but to to start the tcp connection we really need to essentially do some sort of a handshake first okay we have to like essentially a three-way handshake okay open a connection to open a connection between the client and server and that's the first thing we do we open a connection because we're about to send a get request we just we're going to hussein nasa.com right and we're going to that site and the first thing i do get slash dot com that's the only thing i sent okay this string of thing will get converted into bytes and as bytes will become such a bits bones and zeros and zeros tcp and then will get sent across to the server and then the get request will be received by the server and the server will make the process this request make sense of it responds with the headers and the index.html send it over to the tcp connection this could be one package it could be multiple packets if you have a lot right because tcp just breaks things down okay but that's the idea make the request send it back close it that's what http actually does okay we're gonna talk about the differences a little bit differences here between one zero and one but that's that's it open tcp close dcp that has a cost open and close okay https it's exactly like http but there is something happens at the beginning it's called the handshake it's a tls handshake or ssl handshake and we're going to reference the video that we made on tls guys talk about how we actually establish a secure communication so all of the reason of this hashtag is for those two to have the same key that's the all what it is tls and we talked about the details that we actually zoomed in in this thing and we talked about it in details in that video so i'm not gonna go with that in there but essentially the the goal of this is let both party have a key the same key symmetrical key encryption okay and then let them exchange it now if the client want to send as usually encrypts where to encrypt that send the request get request and then the server will actually if someone if someone starts to sniff it will not understand it take that request response include the response send it back and then close the connection okay now talk about http www.https now what is http 1oh the first version 1996. for some reason okay it was a good idea right so remember guys this is 1996. ram was what i think the maximum number of ram was it was 64 megabytes right back then i think that's the first computer i got right so tcp connections established tcp connection was expensive in in terms of ram because htc actually takes some memory okay and we didn't want to leave all these tcp connections open so what do we do we we thought that we are smart back in 1996 and said okay let's for each request we're going to open a connection send the request response and then once we're done we're going to close the connection and not 100 available where it has like marquee text and and what with blinking things and you know the 1019 96 kind of websites if you're from that era right so it doesn't have a lot of stuff but as internet became more popular people start putting images in their index.js you know people start doing a lot of stuff so this index.html has a lot of stuff so guess what that's not the first request and the only request we're going to make yes you just closed the tcp connection here right by the way the cp connection is actually both side right so this is here and there's another one here so i just didn't show it but that's the most critical one the one that is here that's the memory second so we close it so we receive the reserve the memory and then the memory can be used for something other thing like playing minecraft or where minecraft wasn't invented in 1996. never mind playing playing prance if you guys know that game friends prince of persia so close that thing and then guess what i'm about to send another request because there's an image that user need to see that image i have to request it at some point so go ahead and open another connection request that image1.jpg the server will open that connection on that side and then responds with the image and then guess what we close it again and then hey by the way i forgot there's an image you want to and then we close it you can see how expensive this gets right if you watch if you watch my tcp versus udbv tcp is very slow to start it is literally there is a problem called with tcl tcp slow start okay because it has to do a bunch of things and tcp is slow in general because sending it has to do all this congestion control or reordering packets and all that things and making sure everything is in order so that's very expensive so http 100 didn't last a year right 1997 that doesn't make any sense guys we really need to fix that right so we'll see how to fix it so it establishes a new tcp connection with hr quest which is slow and what it does is like it is buffering the responses okay at the back end so if you have like a large uh results like that like a huge index.html what it's gonna do is we'll literally buffers wait for the server to build all that index.html and then sends it slowly to the service okay uh html a little bit improved on that using streaming but instead this is using buffering okay one one all our problems are sold this is the only protocol that survived what 20 years because 2015 http 2 became the dominant ones i don't know if this is still dominant or not but 2015 let's do the math 2015 to 1997. that's 20 years old more than that even okay this guy survived 20 years okay and it invented something called keep alive header so it's a header but the server it's a server the header for the server to know that oh i probably shouldn't close that connection huh right so we open a connection normally we send a request but we send it i forgot to add it here i keep a live header which is part of the http request right and then at the server what we do is we will leave that connection we're not going to close it i'm going to keep it for you sir right as long as we d as we as as long as we agree that both this connection are kept on both sides so that's why the client's always the is the person all right that's tells the server hey please keep it alive please don't kill me right and then we made another request i don't need to create a new stupid connection right fast fast stuff guys right and then finally when we're done right we close it and whenever that means right when we're done okay http one one introduced caching with tags i forgot to mention that so so one o didn't have really good caching this etas concept which which we talked about right so in the description guys there will be a bunch of links to my videos right to talk about all of that stuff right hopefully youtube will also suggest some some of that stuff for you from my channel which will be if you go to watch it you're gonna support me thank you so much right one one we moved to this persisted tvs db connection or persisted connection model if you heard this term before that's what it means we persist now we're gonna persist the connection so we have lower latency and then we have streaming with truck transfer that we talked about instead of buffering so the moment we have part of the html page we're going to send it we're going to send it through the connection we're not going to wait right okay so that's and then we're going to tell the client that hey by the way uh this is part one part two part three part four so so at least if you want to show an image you can show part of the image i don't know if you guys remember back and when you had a slow dial up connection the image will literally just you can see the image loading okay and that's because of the streaming chunk transfer okay which by the way has been replaced with two all with a better multiplexing functionality but that's when you when you remember this is like the images just do i'll try to put a jeff here or something the image loading showing you the image actually loading remember dial up days no you don't okay sorry pipelining i don't want to talk about this because this is like smooth uh it was it was a smart idea i won but it made more problems than than good like this http pipeline it has been actually disabled by default and and think of 2015 or 2017 so you don't watch gtp live point lighting is having this problem called head of line problem which where where clients keeps waiting for the packets to reorder themselves and which is which is i might make another video just talking about that actual problem but pipelining where we send in this request right instead of sending and then waiting for the response sending and waiting for response sending in the waiting for response that the the three blue lines will come first and then the three red lines will come after okay so we'll send them in parallel essentially okay this could be multiple threads because this could be like the loop event the loop mechanism where we actually send them all of white once and then wait for the result the problem with that is the ordering really so we have really to guarantee that all that and that and that become really problematic that's essentially pop lining in a nutshell right let's hopefully we're gonna close the video a little little short here right i know i talked a lot but i hope i hope you guys uh really enjoyed this video i know my videos are long in general but i hope there are a lot of content for you that actually valuable right i don't make two or three for fair five even seven minutes video i think i couldn't i i'm not good enough to make that short video delivering good content for you that's why i i need to talk about a lot of other things because if i made a seven five six minutes video then i'm gonna cut a lot of things and and to me that was that isn't a valuable video because this channel is designed to make me a better software engineer to make you a better software engineer so you need to understand the details and nuts and bolts of things right that's why i need to talk about detailed things okay and and and that's okay and if you disagree i i totally respect that right but that's why my videos are long a lot of people complain about that a lot of people of you guys love that i have made 20 30 minutes videos but that's essentially my my points of this right so i make longer videos because there are a lot to talk about okay i can make break them into multiple videos but you have to jump through multiple hoops to get one answer uh http 2 i don't remember the timeline i'm sorry guys for this but uh it was designed to solve our problems in one one and one one no one but one uh compression is one of them but i really should put multiplex as the first one multiplexing is id essentially an idea where multiple requests come and get shoved into one channel that's that's what multiplexing is like you go like a lot of wires coming into one place and you multiplex them into one okay that's the same thing here so if you remember our request think of multiplexing like the client will join these requests and shove them into one tcp request one tcp packet if you will not one tcp packet multiple tcp packets as a one request it goes as a one request so logically the http protocol two two oh well which is called speedy by the way and then it was renamed to http2 it was just shoved into multi one connection and that's you can see it just just like doing that we solve the head of line problem which is like the ordering of thing because i'm saying one request right it looks like three requests but it's actually uh it looks like one request but it's actually three requests or four or five right so we start doing that stuff multiplexing and then we find a way to compress these things because everything is now uh protocol buffers which is that uh pro the open source uh format for um was like google that uh designed it instead of using json or anything so it's using uh binary format it's not recently portable buffer you can't support that if you want to uh it uses service push so if you don't have to wait for the the request to come the actual server will push request because it's a bi-direction almost like a bi-directional request again that looks like a request response to a fetch api to a browser but internally it's a server push which is slightly faster okay i'm really think i'm still thinking http 2 is stateless right i although under the hood it is stateful because of think about it all protocols are stateful because using tcp which is stateful but it gives you that the impression that is stateless at the end and i think http 2 is still applicable to stateless because if you if you destroy the server and you spin it up again i can it doesn't hold information about that or even it can resume my session my http session quickly right without me even noticing that something has broken okay that's the idea it uses speedy and it's always they does this those guys decide to secure by default so it's always https okay because and the reason because of this protocol negotiation and the protocol negotiation is because we have a lot of old servers now 1.0 and 0.0.9 right but we have to really negotiate guys the protocol that we're going to use with the server okay so the client have says okay can you support 2o can you support http 2 please so this protocol is called next protocol negotiation and which has been replaced with the application layer protocol negotiation which is a little bit better this this thing was trying to encrypt uh the the requested protocol which is kind of useless right because like but this one is like transfers and declare right so i'm going to make a video just about these two essentially all right but essentially an idea is like you make a request and say hey this is the list of protocols that i support okay the server picks one and then that happens during the tls negotiation okay there's tls handshake which that's why these two things which is just let's talk about this because that's the new version and that's an extension of tls alpn is actually an extension of tls that allows you to pick that and and it does it very quickly because it's part of tls and because part of tls always is always https right right if it's not then they have to do this other stuff to pick the protocol and all that stuff right guys finally http 2 over quick okay or recently actually i think 2018 september has been renamed to http 3 it has been adopted by the internet task force internet engineering task for i etf right iatf okay it's been renamed to http 3 now okay and the idea is it's exactly like hdb2 but it's instead of using tcp which is slow because of all this uh frame ordering and and and the conjunction control and a lot of other pro cons of the tcp protocol the slow start and all that stem from they decide to use udp instead they use their different but the problem with udp just using the udp it is lossy right you're gonna lose you don't guarantee that you're gonna receive the request in in intact right correctly right it doesn't have conjunction conditions i have anything just send the data and you just hope that you're gonna receive it correctly right so google came up with a quick right which i think stands for quick use udp internet connection which people don't like to you call it that is that's not an acronym for anything it's just literally called quick okay and then udp with conjunction control that's what it is essentially and there's a lot of going on i'm not going to go through details but it has all the http features but it replaces the tcp as this vehicle that transfers thing instead of this tcp let's use quick which is the udp with some features that makes it uh uh reliable if you will okay this still this is still experimental it did not uh hit the road yet right uh google is still i think they're still using it though internally in google server but uh it didn't see a wi-bet option yet right so it's still experimental http 3 is still experimental but if you saw http 3 that's that's it it's just hdb2 over quick okay uh if i missed anything guys do let me know in the comment section below right obviously not perfect yeah this is my research this is the research i did and then that's what i found okay we talked about http and now tell me it's a long video we talked about request response we talked about 100 we talked about one one over tcp http 2 over tcp and all the problems that we solved the speed that we got with each one of those right and then we're almost here hdb2 and we're moving to http 3 in the future all right guys hope you enjoyed this video if you enjoyed it give it a like subscribe to this channel hit that notification bell to uh check out the other content of this channel we have we talked about all sorts of software engineering right that's the goal of the software this channel right i want to become a better software engineer i want you to join me in this journey right we're gonna learn everything that is to software engineering and uh i know that we're not gonna get there ever right because there's a lot to learn and that's the beauty of it it's an unlimited game it's an unlimited game we can never be the best because there is literally infinite information out there okay and it's like pokemon we're gonna catch them all okay hopefully but you know ash never caught them all did he i don't know there are a lot of pokemons out there but we try to cut or catch all the software engineering uh pokemons out there but i don't i really doubt it but that kind of make me want to push more and learn and learn learn more all right i'm going to stop talking right now guys sorry and thank you so much if you really made it to this end thank you so much for making it all this way to the end of this video you guys rock leave a comment in this section if you want any say anything okay if you want to troll me feel free good for you if you want to say that you suck feel free if you like this video say so all right and uh love you so much stay awesome gonna see you in the next one goodbye a web server is a software that serves web content through the http protocol it is the foundation of the internet and any website out there must be sitting and hosted by a web server web apis like rest apis can also be hosted on some sort of variation of op server as well web servers can serve static and dynamic content we're going to talk a little about that and you can use an out of the box web servers like tomcat or apache or lighty as i would call i think it's called lightly or you can build your own from scratch like you build the using a framework like node.js or express.js or python tornado right you can do all that stuff with a web server okay in this video we will explain what is a web server how it works and we'll go through and spin off two types of web servers one of those like ready-made web servers which you can just install and just put static content on it and let it work and we can also we're gonna also explain how you can write almost your own web server from scratch using the web framework we're gonna use express.js for that okay but i've made a lot of videos about python and web vendor known to check out the content in this channel right so speaking of which if you're new here welcome my name is hussein and this channel will discuss all sorts of software engineering by example we have tutorials programming we got software engineering concepts like what would observe was it proxy nat right anything that particularly interests me i just added as a thing to do in this channel and in order for me to learn if you're interested in that kind of things hit that subscribe button and hit that bell icon so you can get notified whenever i upload a video that's it let's just jump into this video guys all right let's just jump into some uh hopefully go through this theoretical part so we can show you some cool-ish stuff and i'm gonna add some jump codes here you're gonna see it here so you can just jump to your favorite part of this video all right we're gonna talk about what is a web server in this agenda we're gonna talk about how uh web servers work and we're to show you the examples right this is our agenda for this video okay what is a web server it is a software essential that says web content period okay define what web content could be your html pages could be just images pdf right anything that can live as a web and transferred as a web content is defined as web content okay your api could be web content right your json document is a web content okay anything has sent back text right can be web content that's that's the and uh that's the definition of that okay and it's consumed by clients who knows how to consume up content okay let's talk more about that that's why it uses the http protocol and guess what we have made a video about the http protocol i'm going to make it a reference here so if you want deep dive into what http exactly exactly exactly is with examples go watch that video i'm going to reference it here but essentially it's the hyper text transfer protocol quasi design and there's different versions the different semantics right but we are now in http 2 http 3 is coming http 1 1 has been living for almost 20 years and essentially this is what the web runs on okay right and that's when you say like http slash that's you're using http vertical okay if you don't want to more learn more about it go there and uh all right static versus dynamic content so what does that mean okay if you're like me born a millennial born in 1983 or a little bit earlier a little bit after that you would remember the early days of the web where those flashy marquee texts and the moving stuff where the web was essentially just you consume stuff okay you cannot really change anything in the web as a user you can just consume it's a static content there's a just a bunch of static content html pages right most of the off watch or run on apache by the way all right so that's like the the state state-of-the-art in the 90s if you remember okay so all these flashy images and and essentially static content is like index.html index pages html pages pdf images css right i don't know if the css existed in the 90s or not javascript files also considered as a static files which is funny because it's actually code but it is not nevertheless it's a static file it's a file that you can download and that's it okay and uh here's the interesting part with that static file so you can host a web server and you can put static files on and you can serve those very easily we can show that okay that's the cool part of the webinar so you author content you paste it in a folder in your web server and then your web server will immediately generate that these nice urls for you as http slash whatever the folder you created and then blah you can you can host your pages which is pretty cool right so people instead of sending files by emails you can let just be send people link you are else or you are eyes okay and then they will go to your content so static files are cool because they can be cached because no matter they can if they change you can detect this change using e-tags and caching okay and i'm gonna reference this caching concept here if you want to learn more about it dynamic content on the other hand is is when things like blog posts right it's a it's a query to the database and will retrieve certain results so based on the login user you can get different content different page facebook is an example of this right it's a dynamic you know nobody has the same web page ever okay so caching this is a little bit tricky okay so that dynamic content dynamic content is generated as a part of a language that you write you write code in the backend that generates different content different page or web content based on a different context like could be the user or it could be just the location if you're coming from uh asia you're going to get a certain like look and feel if you're coming from america you're going to get different look of it so that's the dynamic content essentially okay all right uh used to host web pages we talked about that right see we can use to host four pages you can use that's the one oh era just web pages yeah you used to have you can use blogs and forums right where you can that's the web 200 right web210 is everything static tool is when things started to allow users to actually interact with these pages like create a comment post it post right do something and then and then you can see these changes so there's an interactivity between the web right and you can also build apis right we talked about apis on this channel i'm gonna reference some videos here we made about how to build the rest api uh with python you can also check my course there python on the back end if you're interested it's all about apis and how you can write by phone on the back end little plug there all right so how absorbers work guys how do this thing work i'm going to talk about concepts here that i explained before so i'm going to gloss over them like tcp or tcps right so if you want to learn more about tcp connections check it out here but essentially what happens here is if a web server there's a client this is your web server this is your client it could be a laptop could be a mobile phone and it's requesting a page and what it happens here is your ip address have you you have an ip address that site will have a domain name it could be having a host name and then it is running on a port usually this port is 80 for web servers okay that's the default port and if you don't see a port on the url that means it's port 80 but you can also run web server on any port you want okay that's not that's just the standard 84 http 4434 https all right so and when when you have a web server running and listening on this board that there is a tcp socket or connection ready right and if you make a request let's say git that's the http semantic we talked about get me the index.html page on the example right and this is a syntax for http and when you do that the server will process that request perhaps maybe query the database if it doesn't need to just pull it from a cache or or just pull from the directory and this serves you back the result and then when you send you back since you're the index.html or whatever that html page and it also sends you a bunch of stuff and that response we call this the hitters and status code okay and the status quo is like you might have seen the 200 okay or 404 not found things like that right so the web servers have this http codes that and i want to make a series about all type of http codes hopefully okay so that's the nutshell of that but let's go dive deeper for those who are daring to dive deeper into this okay so another example of a web server one example of this is what i call a blocking single threaded web server and i i decided to explain that because it's the easiest to explain okay obviously none of the web servers work like that and well i take that back so some web servers work like that and there's benefits of that but most work servers have different implementations so let's let's talk about it what exactly happened when i make that get request okay so this is my web server i just made it into a box so we can draw stuff in it okay and then when you first a client makes a request whether this get request there is something happening before that okay http oracle runs on a transport layer called the tcp transmission control protocol okay so a transmission control protocol what it does is it establishes a two-way communication between a server or client okay but the http protocol is just a request response so if you make a request the first thing it does is establish this tcp connection so this is like handshaking going on if there's a tls you need to establish the tls there's a secure thing and once you do that the server creates in its memory and very important here memory let's focus on the board memory every client that connects reserves a little bit of a memory on the server okay that's where things can get a little tricky right that's where all the attacks denial of attack happens because of this reservation of memory okay reserve a lot of memory and your server crashes okay but okay your client connects you reserve a little bit of a memory and this thing is called tcp socket you just have a socket for that client okay okay and once you reserve a socket for that client now you see okay we have one thread one process with one thread that is allowed to execute stuff okay you can have 10 of those circuits but they are sitting in memory they are just idle okay but your process can only execute one at a time okay so let's oh i'm free your thread is three let's say there's a thread here let's start executing and says okay oh you want me to get in this html okay let me go do an io desk or whatever right and then start getting busy that thread means it's it's this sock is busy it's doing something that process is busy doing that and that means that thread cannot do anything else while it's doing that okay so based on that request that's a very simple request but there are many requests that actually pulls from the database or or does a processing i don't know prime number right do do your web api thingy okay that's the tricky part where you need to do short circuit uh breaking say a circuit circuit break and just break the circuit if if the client executes for a long time you execute that you release the third is back and it's back in normal there's the client guide response and we're good to go so what happened now okay so let's say i wanna the kind works on another request it can use its the existing tcp connection it doesn't have to create a brand new tcp connection which is kind of fast so having a connection tcp connection open with the server is a kind of nice thing there's a bad thing about it is just you have your reserving memory on the server so if you have a tcp connection that is open and you're not using it you're wasting server memory okay but yeah pros and cons of this and we talked about the http and then we go execute and then release all right let's make this a little bit spicy let's add another client okay one client may makes a post request that's the right request to the server okay so i want to write something like i want to create a new to-do list in my api and the web server takes that start processing and guess what as a poor joe slob here want to connect to the web server okay and the server is a little bit busy and now the web server implementations shine what do you do what do you do as a web server implementer apache does one thing tomcat does the same thing right node.js does another thing python does another thing you can do whatever you want if you write your own as well okay you can do whatever you want and but here's what here's what a blocking single threaded does okay it creates that tcp socket for you and that's it it just just does that it creates a place of memory for you but guess what sorry i can't serve you yeah the only thing i could do is just create that socket for you yeah you have a tcp connection booyah that's it but i'm busy serving this guy now okay that one thread is busy serving that okay and then once you basically done right this guy can be served and then you release and you're done okay some you some of you might say now okay can you just spin up another thread sure that's what apache does is spin up a new thread for every single request okay and that's why you will you'll see when you go to apache or tonka there is a parameter called maximum thread numbers or maximum connections right how many how many of those do you want right i cannot just have unlimited right well you can change the element if you want if you have unlimited memory here but think about that when you really work with web servers i like you to think about all of that stuff it is really interesting to know how stuff works especially web servers because we work with these as with software engineers i mean writing rest apis this is very critical to understand guys okay so your implementation of how looks like is very critical so you might be happy with a single threaded blocking okay but you might say okay i'm gonna spin multiple observers like that okay so i'm gonna put them behind a load balancer and that's fine why not right i don't see anything wrong with that must be some limitations right you can put in docker containers you can spin up as many containers you want off single threaded i find this way more simple than having complex thread multi-threaded app web server right uh let's have a discussion in the comment section guys what do you think is is a better way of doing things okay there is no right answers or wrong answers here okay people still debating this okay don't think this is set on stones right don't just absorb information discuss right challenge everything that you read okay nobody's perfect example all right example i love this part i love so much okay so i did a google search on some of the web servers right the one i knew was to be honest i knew http i didn't know it was called http by the way it's this is apache it is the other name for this called httpd i know iis i work with iis most of my time i work with tomcat almost at a daily basis my current job right uh i use http server all the time when on my youtube videos because it's the easiest thing ever in life okay light httpd which i think they they force you to say glighty i don't know why it's called lighty there's there is there is an h there is a g there is a p there is a d as as a foreign like non-english speaker this is all wrong by all means you know so write your own that's another way of writing so so you can you can use an existing web server or you can write your own you can you can just use node.js as a framework a web framework or you can use python tornado so guys you can write your own web server as well right and you can use node.js for that you can use python tornado and that gives you the bare metal bones of things again it gives you how to listen to a port gives you how to send statuses it gives you how hey there is a request and a response game do your thing okay it can div so it gives you essentially a blocking uh single threaded okay server but you have to write all of that stuff to yourself okay these guys does most of the work for you if you have iis you can just write an asp application i forgot what asp stands for asp.net active server pages i think says that i think something silly like that so yeah for microsoft you can just really enable iis and just copy i asp.net pages and then there works like that for the demo part of this guys i'm going to show you how to spin up apache 2 which is httpd also okay and we're going to show you i'm going to show you how to spend that in my raspberry pi because i have linux there okay that's the easiest thing all right and i'm going to show you how to do your own web server using node.js express all right guys so here's what i want to do i am logged in here to my raspberry pi which has a debian distribution and i'm going to install apache 2 which is httpd which is the apache web server okay and this is one of those would ready made web server where you can just throw a web content at it like html images and it just will serve it for you very simple stuff right and uh so that's like the easiest way of hosting a web page or hosting in a blog or things that if you want to host a web page or some some like a company website this is the easiest thing you can do right so let's let's let's learn how to do that okay so to do that since i'm using debian i'm gonna do the apt-get here sudo apt-get install it's called apache 2 for some reason okay maybe the first version sucked so they made another version it's called apache 2. okay uh if you're using docker it's called httpd maybe maybe we'll show you how to do that on docker so let's go ahead and install it's going to take a while i'm going to pause the video show you back whenever this is done i really can't believe that this is only 361 kilobytes which is pretty amazing if you ask me right this is really it's written in c i think so or c velocity i forgot last time i checked it it's written in c so it's like very very small footprint right unlike tomcat tomcat is driven written in java and it is really heavy stuff but you can do way more stuff in topcat obviously but yeah it's done that's it okay we just installed it well in your case i haven't installed it before and then i just uninstall it so you might know what to do and so do up apt-get updates and then sudo upd get install apache 2 and then you will have it so what do we do once you install it you go to a folder called var www root and there is a folder called html okay and there is literally a page called index.html they give you for free to test your stuff so let's go ahead and see if that works alright guys so i am here on my mac my mac and my raspberry pi on the same wi-fi so i can access that stuff right so i'm going to do go with raspberry pi dol local and by default the apache 2 listens on port 80 so this spins up the server on port 80 by default okay so if i do that and then runs and you can see it works and i'm using debian obviously okay it tells you that you hey you have your debian distribution but as usual tells you what to do as well copy stuff in that and you get yourself a web server that can serve anything you want okay so since we guys are curious let's do that okay first of all uh i'm not the owner of that thing for some reason so what i want to do is i want to change the owner of this thing all right guys so before we create our own html page and do fancy stuff i want to own that html folder here because uh i'm not the owner of it okay as pi the user okay so what i want to do is go back a little bit and then i want to do a pseudo channel which is change owner and the channel this thing in from pi on this folder okay so that means the owner of this is okay moi can now write stuff in it because previously i couldn't so first thing i'm gonna do first order of business remove this file okay and i'm gonna create a one from scratch called index.html okay and uh it's fancier it's gonna be fancier i'm going to do hello world this is my page hosted on http or apache 2 because the first version sucked okay buddy uh did we close that yes we calls this and then we do did it and then that's it we just created an index.html let's go back to my mac all right we are in my mac i am about to hit refresh hopefully my server is smart enough to not cache that page and guess what it worked it worked alright and you can pretty much put any stuff there and it will just get hosted for you okay and let's say for example i don't know let's do a main.js file here and that does literally an alert hello world i'm js okay and then we can edit more indexed html and then we can do fancy stuff like that here in the body saying script uh source equal what's it what's it called main.js since it's in the same folder we can get away with that so let's do that and then when we refresh we're gonna get an alert because my javascript got executed so what happened here if you literally took a look of that right when you refresh two requests made right the first request is to get the index.html this is the 200 okay obviously we talked about that we got back and index.html it's a text right and that thing when paused by the browser discovered that there is another thing that needs to pull so that's back to our tcp connection thing guys so if initially 0 these two was two tcp connections which is extremely slow because every connection every request will start the tcp connection and close it at the same time now there's something called keep alive i'm alive oh my god this video gonna get demonetized all right keep alive all right so it's gonna keep it alive keep the connection alive baby that's what it yeah keep the spark alive so once it's keep the connection alive the second request okay we'll actually make that request to get that main dot ajs okay obviously when you write your own observer there you have to do all of that manually you have to do the caching manual you have to do all that stuff but this guy that apache does caching for you okay and let's prove it so 304 not modified that's the e-tag okay guys i'm going to reference the e-tag here go check it out what is what the concept of that but in a nutshell this is a caching mechanism so what what the first thing the first time let's disable caching and let's let's show you that if i the first time i make a request okay to any content i get back an etag okay and the client then use that e tag with every single request it makes okay so if i make a request now and it sends the client since that request says hey if not match tell me did this detect change tell me if it didn't change coolish okay but in this case the javascript didn't change so it says nah you're good whatever you have is good okay so let's see how good the apache implementation is so i'm going to go ahead and do main.js and i'm going to edit that thing to say alert hello word i am js and i just changed baby okay and sure let's do i don't know another alert message because that's the only javascript code i know i'm kidding guys i'm kidding oh my god all right that's another gis right let's see if the implementation of the thingy is smart so i'm gonna go ahead and what was the our original i lost it gosh okay no problem it wasn't certainly tag the client will attempt to send the same e tag but what what what what what look at that we got the new stuff that's another js right so what happened here is we sent it the same he tag but we thought nope nope nope nope nope we got a new a tag okay i don't know what gzip is we're zipping this thing that's what it's just like the implementation of the actual observer here okay so the web server says nope it has been modified all right so that's that's essentially the trick guys that's it simple stuff let's show you how node.js works how about that right so we're gonna write our own implementation here so in order to write our implementation we need some decent editor we can we cannot do use vim i mean we can but yeah it's just a lot of work oh yeah all right so i have visual studio code here i have node.js and installed go ahead and check it out i'm going to reference a video that we have installed with node.js and all that stuff what i what i want to do essentially is just create a brand new folder with visual studio code let's call this web server from scratch okay and then just a brand new folder there's nothing in it okay and you go here and then you click on this guy and you will create a new folder file and that file because i'm writing javascript on the backend you have to write your own code here to do everything okay to server what's the content here so i'm going to say index.index.js and i'm going to create our index.html page here and since we are in the editor we can actually write the entire html with just one click instead of having it to write everything hey h1 hey i wrote all of this myself no js babes okay so that's the html that we want to serve but we need to listen to a port we need to receive requests we need to send requests we have to do all of that stuff so let's get into it guys so and you pick then at the end of the day do you pick what what is the favorite part for you okay so i'm gonna do an app here const app equal require express okay and that's just the bundle so we need the app we spin up a version of that okay that's like literally a function call or con constructor or tor con see tor and why every everything is an abbreviation with people okay constructor can't you say constructor really you have to type torque ah i know man api people guys i'm telling you app dot is what i'm gonna do app.listen you're gonna listen to port 8080 because 80 is kind of reserved for highly privileged apps and i'm not one of them so i can't listen to them i have to run as a rules and i don't want to so let's just dress in 8080 and when you're done you say console.log sup i'm listening yes what what do you want okay this is just for what the heck is happening okay this is just for us to know that we're listening correctly but that's not enough okay well the restaurants can show you okay i have expressed and installed globally so that will work right but that's it sup i'm listening yes sir what do you want okay that's it okay but that's not enough right we need to really accept the request that's if i do that now let's see if i do that and let's say run let's just say localhost right see the error i'm getting so now guys if i go and try to go to localhost which is my machine 8080. i'm getting this error cannot get why because you didn't implement anything right there's nothing there okay if you refresh there look at all these errors forget about those but look at that 404. because that's the only thing that the application does it says hey i there's no there's nothing on that server the server is dead okay so here's one we need to implement to implement a get method a git slash method on the root okay so that's the first thing we need to implement remember we didn't have to do any of that okay we have an index.html it didn't get served we have to tell it to get served how we can do after get on the slash if someone visited me on the slash on the root i want you to call this function and this function always has to take two parameters request and response okay and then what you do essentially for simplicity is you don't really care about the request sometimes you do obviously but here we don't there's nothing in the request i just want if someone visited me i just want to send file and then you send the index to html file okay and to do that we have to do all that stuff where it's in my directory this is to avoid hackers pulling all your stuff so you have to specify you cannot use relative files here so you have to do that okay so that will take the directory name and then index.html okay so that will serve the index.html page okay let's try this restart and now if i refresh hey i wrote all of this myself not just bibs okay you like this babes you like it this is the best right this is the best and if you've served another file you have to do the same thing again okay anything okay there's obviously regular expressions that you have like any if someone visited anything then serve them anything a little bit dangerous but you have to do know what you're doing but that's essentially how you write a web content can you do something else sure sir you can do get slash sub anything you want really then request response you can do we have the function here we can for example just send a result anything we want text hello okay then if i do that all right if i go to localhost 8080 i get this if i do sub i get hello and let's see what what did we get back from the headers what did we get back from the headers we get bad 304 not modified and we got back the results okay and now can i change that yeah sure you can you can do result dot status code and instead of 304 you can change it to anything 404 what is the 404 you guys know right 404 is not found although it was found but you can tell it whatever you want that's the flexibility you get when you write your own web server okay although the document is there you can you can have an if statement hey if this this exists do that if let's do that you can add all of kind of stuff like like 201 code which is i forgot what it has i think accept it or something like that and create it right you can do anything you want all this stuff if you change this to 418 for instance right this is one of the april fool's status calls that have been created look look what you get i'm a teapot i don't know what the heck is that you can actually change it to whatever you want okay good 401 it i am a teapot that's one of the status quo that is being documented and it's going to be there forever all right guys that is our video today hope you enjoyed it give it a like you do and if you learned something subscribe to learn more and share this with your friends and i'm gonna see you in the next one you guys stay awesome websocket technology is a bi-directional full duplex protocol for communication between the client and server over the web it has been standardized in 2011 and it's fully compatible with http this protocol enables real-time applications such as chatting notifications live feed multiplayer gaming and other use cases as well in this video we will explain what web circuits are why it was invented and we will build actually an example would websockets a client and server using websocket i'm going to use node.js for that and we will also talk about the pros and cons of websockets because let's be honest guys there's no technology that is perfect everything has a pros and cons right if you're new here welcome my name is hussein and in this channel we discuss all sorts of software engineering by example so if you want to become a better software engineer consider subscribing hit that bell icon so you get notified whenever i head and you video with that said let's just jump into this video guys websockets here's the agenda here's what we're going to discuss before we jump into any technology i like to go back and say why did we invent this thing okay and that brings us back to http okay i need to talk about http a little bit okay we're gonna talk about http what is it okay not in details just a little bit okay because we'll this will allow us to jump into why we have web sockets now we're going to discuss this concept of a sockets handshake then we're going to discuss a little bit of a use case of websocket we're gonna talk about an example some code yay i'm gonna show some code and we're gonna show you like the pros and cons of this technology we're gonna talk about these pros and cons of this technology and you guys are going to see the jump codes here under the screen where you can just go to that for minute seconds to watch any of these topics that you're interested in you don't have to watch the whole thing so it's really up to you okay guys what do we have we're going to talk about first of all http 100. okay he was like why why are we talking about technology from 1995 very good point okay there was a lot of wild research in this video was watching a lot of videos and there is a lot of misconception and wrong information okay so i just wanted to just literally just clarify some of the things http 10 which is the first technology that was invented and there here's how it works okay http recalls obviously guys it's built on the tcp protocol and we made another video about http i'm going to reference if you want to learn more about it but in a nutshell it's built on the tcp current when we first invented this http first version we said it's going to be a request response system so the client always makes a request and the server responds to that request it's not the other way around okay the server doesn't just randomly send the information to the client it always the client has to initiate the request and it worked great and it's still working great however when we built this the first version we said okay let's be smart okay tcp is expensive it require memory it require all these descriptors to be saved in the server so when the client opens the uh the tcp connection and sends the first get request okay and the server response let's say hey i'm going to get the index.html the server responds back with the actual data and then what we're going to do we're going to be smart hey we just finished the request let's close the connection and then if you wanted to make another request just go ahead and open another tcp connection okay and then request the second thing you want okay and now imagine guys you have an image you have a website okay with like three uh 30 images and you can open and close connection for every single thing okay we just literally killed the performance okay that was quickly revised and this model of opening and closed connection did not scale at all okay so we said one one to the rescue okay and and i want to talk about one one because this is what the websockets was built on and you need that you cannot do web sockets on one zero because of what we're going to discuss now so we said we're going to be smart about it if you're going to make one request the first request you establish a tcp connection and leave it open make all the requests under this tcp connection okay do not close it unless you're absolutely done with it okay and that was using the header called uh keep alive okay and it's kind of i think it's an ephemeral header so that means it cannot be propagated through the proxies okay but what happens here is like you send a request you get the index.html and you find that there's images that you need to load css files javascript you go ahead and request response request response and that that's great works fine and we close the connection okay this model still working fine till today but there are use cases that need some real real-time interaction from the server there are use cases that the server needs to send me information despite me not requesting it okay as a client okay and that's why we invented other technologies the before websockets but websockets is became the dominant one here okay let's talk about web sockets now so what whoop sockets does it essentially uses the http one one this persistent tcp connection as a vehicle to send data from the client to server and the server and guide they both aware of each other that means it's no longer stateless it's a stateful right because the server is aware of the client the client's aware of the server the moment this awareness happens it's a stateful okay it's a stateful thing http i don't know on the other hand is stateless because you don't really have this awareness you can kill the server restart and the next request would just be served normally so how does web circuits work the first thing happens we do the same thing right we about to send a http request we do the web socket handshake which involves a little bit of information that we're going to talk about it's still an http request okay an upgrade request with some salt and pepper there but what will happen here this handshake will first happen between the server the client would say hey i would like to do a websocket connection if you would mind okay the server say hey i don't support it or hey i support it cool let's do that and then what will happen is there's no there's no order it's a binary protocol this web socket becomes a binary protocol it's detached from http okay and then it's the wild west anyone can send data to anyone the server sends client decline the data because both know of each other now they have the api access to the underlining tcp connection okay with a little bit beautiful apm it's not as ugly as tcp with segments right so the server sends permission to the client client sends information to the server client sends another stuff to the server server sends back something client sends that there's no order okay and the server sends twice and client and server sends information concurrently who cares that's what websockets okay and based on that interactivity a lot of use cases were born okay so let's talk about a little bit more about the handshake itself and when we talk about the handshake and the first thing we need to talk about is this protocol which is ws which stands for web sockets okay and if you do what websockets on tls then it becomes w websocket secure okay we talked about tls i'm going to reference it here go go watch that video but here's what we do guys here's what makes websockets really awesome the first request that we make is an http normal get request right that means when we make that request it's an http11 so i mean i'm gonna establish the persisted connection that we talked about but here's the special thing there is an upgrade header in that um in that request and that's really powerful stuff okay so it's really a good request a simple request the server takes that because it's a web server we talked about web server i'm gonna reference it here we talked about a lot of stuff in this channel right and it's a web server so it consumes that but here's what if the server knows that there is the client is trying to upgrade this one one connection to something else to websocket in this case the server will reply either cool i'm switching the protocol and the code status code is one 101. you know the status goes guys four 404 200 201 this is a special status quo says 101 switching protocol you cool and once we switch the protocol then we start communicating with this binary protocol so that's the handshake essentially and it has to work on one one because of this persistence that we talked about guys right it will never work with one zero okay and recently i think uh also websockets work with http too because it's the same concept right it's still persistent connection and we close the connection and here's uh here's how the actual handshake looks like right i took this from wikipedia okay and then you do a get request on for example any endpoint doesn't have to be chat you can name it literally anything you want it has to be http one one and you say hey i'm this host uh you can block this host if you don't want to and you wanna upgrade this to warp socket you wanna upgrade connection upgrade that's the special hit and there's these keys right and using these keys the server will take them will do does some seeding and hashing and then send back a new websocket accept okay so that you take the value and the client will verify that it's actually that server is the one who sent me that value okay this is just for the server receive information from the actual client we got that websocket and that's it okay so we receive 101 switching protocol and we're good so that's you can build your own web server or socket server that does know how to deal with that but you can always use an existing library that does that for you because it's a little tricky to do the binary protocol right and uh use cases why do i need this duplex full duplex or whatever you called it hussein why do we need that chatting right you know chatting is not something great for request response it's not you're not loading a page the client can receive a message like whatsapp right someone can send you a message without you requesting it right you don't want to say hey is there a message for me is there a message for me is there a message for me is that you don't want to ask for that right you want the message to get quote unquote pushed for you when there is a message right so channing is a perfect example for this right and uh having the client request something only to find out that there is no chat for you is just not working okay and live feed hey i want to connect to this feed and whenever there is a blog post just let me know okay or any any notification facebook notification all right i'm not saying that what facebook uses websockets for this but i'm saying that's one way of doing it i think google wave when it first launches i do remember them using websockets and was really amazing back in 2011 right and i like i still remember that video and i was watching that video and they were just typing and the immediate window you can see that oh type the person one is typing a message and that was really mind-blowing because i know that http couldn't do that obviously right so it was a little awesome to do the interior of that multiplayer gaming obviously you can build gaming multiplayer game is like hey multiple players they send input and the second client can receive information right so here's a little bit tricky okay when you when you have multiple clients connecting to one websocket server this whoops socket server have to maintain multiple connections multiple tcp connections with each of those guys okay and that was makes it also more stateful and statefulness means what guys we talked about this you cannot easily horizontally scale stateful application because the moment you destroy the server all those guys just dead right you can obviously write it in a stateful way but it requires not it's not natural right you have to write more code to make it stateless in order for it to horizontal scale doesn't mean that it cannot horizontally scale okay show client progress login you know when you upload a file you want the server to send you updates that hey the file has been seventy percent uploaded eighty percent uploaded or you're rendering a video you're like make this mp4 into a jeff or gif uh whatever party you are okay so if you upload that video you want the client server to send you information about that okay so yeah you can use websockets for that you don't have to though i want you to keep that in mind websocket is not solution for everything okay don't get attached to anything guys don't get attached to that technology core time websocket example here's what i want to do guys okay i want to show you an example of a raw websocket client server okay and to do that i'm going to do it in a very bare bone if people make the mistake of when they want to learn websocket they go download some sample that has a chatting application and that's like to me at least it was like the worst way to learn okay because what chatting application is not it's not easy to implement into loop sockets because you have to have multiple array of connections and all that stuff too it's not easy to understand so in my opinion i'd like to show you how this server talks to a client client talk to server with with the very basic stuff so we're going to write the server and the client will be guess what it will be the browser from the console window because we can write javascript code there and it's beautiful guys how powerful javascript is because this websocket client is available literally on your browser so i'm not gonna allow you to i'm not going to let you ra forces you to write html code and script tags and all that stuff right so we'll try to write as as less code as possible let's just jump into it all right guys so i have visual studio code here because it's the best editor ever you can argue with that if you want to but visual studio code i really like it because it's very lightweight and supports a lot of scripting languages python javascript typescript name it right so i like it and we're gonna build our own web circuit server okay using visual studio code using node.js okay so we're gonna build that so you have to install you have to have node.js installed obviously on this machine in order to build that okay so let's start with that i'm gonna start from scratch i'm gonna obviously go to open i'm gonna create a brand new folder here on my javascript folder here i'm gonna create uh let's call it web socket demo okay and then just like that open and then here's what i want to do i want to create a new file called index.js okay because it's the node.js right and then what else do we need let's initialize this project with npm so go to terminal and then literally we don't really care just do npm dash init dash y that means hey initially let's initialize this project with whatever and this will create us the package.json we don't really care about that this is just for us to debug okay and then here's what we want to do guys okay let's zoom in so you guys you can see we will create uh the http server here and this is using the http library here and that will have that persisted web server that we talked about okay so that's the web server that we're going to create we're going to create a server using this native thing okay which is the http server we're going to spin up a little bit of a mini server mini web server and then take that server inject it into another library that will allow us to do that handshake we talked about so let's do that guys so http and here's what we do right const i'm going to create http server equal http dot create server and that essentially takes a request and response function and then i am going to just literally just log it here we have received a request and we will add a break point here because here is the first call of the request will come here because specifically if we create a new websocket the first call is what guys the get upgrade remember so i want to show you that get upgrade here and when we have a server we can just listen unless you use a port that i never used before i think 8080 is free okay and then let's just say console.log my server is less thinning on port 8080 don't make fun of me okay listening it's funny because that's when i first learned english i used to literally read this listening and it was it was funny okay yeah laughing guys okay so that's the first thing we need to do right let's just run it make sure it works okay obviously there's nothing hey okay my server's listening that's not a web socket though right guys that's not a websocket let's make a websocket and here's how we do it okay we're going to do web socket let's make it capitals because it's a class websocket server equal require web socket dot server okay and that will give us the class which will have this beautiful uh events let's say hey if you receive that message do this if you received a connection do this if you do this and all that events which makes it stateful obviously guys right so we have a websocket server here's what you do next we're gonna create a web socket if i can spell it right web socket server and here's what it takes it takes a json and that json is http server and you pass it that http server you just created it's it it needs that it's just remember guys this is just the handshake part and the messaging right we're going to use that protocol to to actually uh authenticate right do the handshake so we need to send it the http server that we just used which underneath it has a socket which has the tcp connection so we send it that thing sweet what else what should i do next next what you do is you have to have a an event here on request if someone requests this websocket right go ahead and call this function here's what happens here guys so the first thing we do we make this guess request right and uh that'll get workshops have upper grade it comes here and then you decide as the server whether you want to accept this websocket request from the client or not and guess what guys i'm gonna accept it i am going to accept it because i accept everything and then this this uh this parameter is interesting you can create your own like fancy protocols like if your server supports like gaming you build like a gaming protocol you build like a chatting protocol you can you can accept whatever the client sends you you cannot just accept any websockets that that won't be secure right so you can you can kind of accept the things that the client will support okay and we're gonna accept anything because it's just an example here so no okay and then the origin here which is request.origin do you want to you can check the origin if that origin is not trusted or you don't like it you can just say nah i don't want to accept that and here is the interesting part guys we're going get a connection of this connection okay i know people make fun of my accents like connections and i don't know how to say connection connection okay okay so connection we're gonna get the connection i'm gonna make this is it to code and call global variable whatever right so let's connection equal no and i use let here because i'm going to override it i cannot use const because i'm going to override this literally so i'm going to do connection equal that and then here's the thing if you do connection you can add other stuff on on open if the connection has been opened call this function right console.log open let's zoom out a little bit i think you can read it in this way guys right then if the connection is closed do this close right and you can do some other stuff here maybe notify the database to do something right so you can write any function you want here you know we don't really need to do a variable here right and here's the most important function of them all it's called onmessage if you receive a message get me that message and here's what i want to do with this message what are we going to do with the message okay i'm not fancy this message will just literally print it right i'm going to print whatever i receive from the client and it has to be an event guys right so uh received message and then we can say message dot i think it's called utf dead or something like that all right we'll find out okay i don't remember what the property is but we're gonna find out guys don't worry about it do not worry about it okay and then obviously that's it i think that's it we receive a request open close message and that's it right and here is let's let's run let's run let's run we got an error can we find module websocket well what what do we do guys simple npm install oops socket in the same folder so we can install this technology install this model for me okay that's one of the modules guys there's socket io there's other other stuff but that's that's what i saw that it's like the simplest one really uh it's big though i don't know why can you build your own of course you can go ahead and try that download the uh the rfc and then write your own but it's up to you if you want to write your own okay but okay let's try it i'm going to listen to 8080 and we're listening okay our whoop circuit server is ready guys okay let's go through the code a little bit quick before we jump into the client and write that so we have the http server which is like that raw server okay we have the web circuit server which allows us to do this uh what uh the handshake right because because exactly this thing right on request when i do accept that will send back the switching protocol that we talked about and we get a connection as a result and that connection we're gonna do beautiful stuff with it and that connection we're gonna take that connection there is a method called send and we can use it to send information from the server to the client remember guys i am in the server here this is the server code okay let's go to the client i'm going to create a new page here and literally go here and then more tools developer tools or in firefox you can i think build web console or something like that and here's the beauty of this thing guys since this javascript since websocket comes with every single browser you can write this websocket client right there okay and i'm not gonna bother writing html code let's do that okay so i'm gonna do a let ws equal new web socket guess what that's that's what you do what's the protocol ws right because this is a websocket what's the ipl what's the host name it's localhost it's on the same machine what's the ip address 8080 right i was like this is the thing we're running on it's running on 8080 and then when we do that let's make sure we have all the let's make sure we have all the breakpoints so we don't miss anything so here we are gonna do hit enter the first thing we get what we got a request guys we can use that request so guess what we get the origin we have the chrome search wherever the origin is that and then when i do that i accept the connection i just got the connection now right and then we set the events obviously just why are the events and guess what we received it here's what i want to do now guys i'm not going to stop i'm not going to stop debugging i'm gonna go back to the client and here's what i wanna do when i do ws i want to wire the events on the client which i did not do on message if someone sent me a message i want to take that message and then guess what i want to print it i want to print that message we received a message from server and the message is let's have by the way how do you how do you do what is called the text which is like inline formatting so i just want to print the message.data i think that's how you do it okay and if we do that nothing will happen we just wire the event so when someone from the server from the server sends the client a message we should get something printed here how about we test guys i'm going to go to the server here and in the debug i have access to that connection right guys i'm gonna do connection that's send what hello client it's me essa and then hit enter go back what look at that we received a message from the server hello client it's me as of how about that guys should we do should we do the other thing let's do it guys let's continue to continue that let's go back to this to the client and then say ws dot how do you do that send hello server it's me client baby all right and then let's make sure we have the break point we do have a break once so this function should be called because on message right on message is the function that will be called when the server received the message let's receive a message and send we sent a message and we didn't get it what's going on so apparently i i typed the wrong event name it's not called on message or on open or on close it's just message close open right let's restart and let's try again since we were starting guys obviously that's just proves my point that is this thing is stateful look at that there's a word state there okay so it's just dead so how do we do this again it's okay just come on again let's just do it again all right so let's establish the connection once again okay let's just do le ws whoop we go come here we forgot we removed the connection then that just like that we have a connection now let's do the message and then we have the log here let's go ahead and the values to send hello server it's me client baby this time it should work what look at that immediately boom boom all right got it and now here's what uh what i didn't know is like what is this called right so message is essentially a json object and there is something called dot utf-8 data okay so that's where we sent utf-8 data so we can do dot utf utf 8 data okay so now if i do this it should just print it okay let's start it one more time one more time right one more time guys we'll get into we're gonna get it all right whoo request accept that request let's do this again do the wire the message on the client and then how about we clear this and then soon and we get it we print it and there you go we have the message here receive message from the client it's me client baby all right guys so here's what i want to do now okay i want you can you now you can take this and run with it right the trick here is the connection if you want to build a chatting application you have to build an array of connection and every time a client comes you add it to this array you push this connection to an array and then you start maintaining these states of connections pool of connections and then every time someone sends a message you can send the group message back to all the connections okay so we can build something like that i'd rather build it in another video and we focus on just the raw web sockets here i want you to understand that it's a connection you can send information from both states okay and let's build one more function here i want to build this i want to configure the server to send a message to the client every five second like a random number so how do i do that okay so i want to build a function like stop this function uh function send uh every five seconds okay and then here's what i wanna do i want to literally do connection dot send and then message i'm gonna send the message and then math.random literally any random number i just want to send a message to to this to the client okay i don't know this could be logging this could be anything you want right so we're sending the connection to the server uh the client messages right all the time after every second how do we do that set timeout okay and literally just call yourself every five thousand milliseconds and that's it that's it but this function is never called so after a connection is accepted go ahead and call this function which will always send a message to the client let's do this again guys so guys can we build an application that have a decent client our client is lame but you can you get the idea right you can't build a script that actually does exactly what we're writing i just want i don't want to write a lot of code i try to minimize the number of code that we write okay obviously this thing is broken now right the ready state is three we need to establish a brand new shiny object go ahead and write that and now the client by the way the server started sending us messages but we cannot receive them you know why guys because we didn't wire their own message event here that's what confused me on messages in the client right on the server it's not called a message just called message okay yep let's do this now yep we got a message we received message from server message function random yikes i know what's going on here guys we're sending the entire function jason all right let's fix this yeah i forgot to invoke the function you know the difference guys right i am sending literally the stringify json of the function right i didn't invoke the random function to give me a random number i literally just sent off the function which was dumb okay guys let's do this again by the way guys i'm gonna make the code available so don't worry about having just to pause the video right but yeah we received a message accept that let's go ahead and accept it uh wire the message and there you go one two three four five five there you go one two three and four and five all right guys okay you got the idea guys so you can we send something in there to the server while we're doing that sure hello babes you can oh if only i can write if only i can write yeah sure we can receive a message just remove these break points and you can see that babes receive a message we send another babe message we can get it here right we get the messages and there's it's a two-way communication between a client and server so now guys if you want to build like multiple clients one server you're gonna you can always do that right okay our server currently does not support multiple client if you do it will accept it but it's going to be very bad because we're we're having just one variable one object maintaining the connection and whoever last twins essentially and you're gonna leak stuff and it's it's really bad okay if you close the connection obviously let's try that close the connection is that how you do it close and if you close essentially closed and you know what how this what happened here right we called this function essentially okay sweet guys let's go back and talk about pros and cons all right guys we learned about websockets we saw an example now we need to learn about this pros and cons of this technology because there's nothing perfect there's always pros and cons okay so what's bad about this what's good about this what's good about this pros it's full duplex so if you are building an application that requires the server to send you updates okay you do not need to do polling essentially and you do not need to ask the server hey server do you have this do you have this do you have this do you have this are we there yet are we there yet you don't you don't have to do that and that's you have to do that with http with with http because it's a request response system right full duplex on the other hand you don't have to server can send you information client can send you information right and you can build it for gaming and you can build really cool apps with this technology it's http compatible because of the upgrade header without that proxies will fail things can go bad nobody can know this is actually a websocket right if you started just creating a socket right and then sending binary information the the the firewall start blocking because it's like what the heck is this right what are you sending me all right but because it started with an upgrade with an legit http request and then we upgraded it to a websocket that kind of passes all the internet infrastructure and it will should should work with the with anything right there are problems there but we're going to talk about it it's far more friendly because it's a standard http it's only 443 or 80 well you can listen on any other port and that's how http works right htv web server you can listen to any port you want but usually it's just 40 if it's just uh 40. usually it's 80 when it's insecure it's 443 when it's suck your okay and what else oh we're already out of good things i can probably think of more good things i just didn't add it cons proxying is very tricky guys engine x just recently started adding this to to the to its uh socket support right it's it's real tricky to know that hey you're you're you're you're receiving a websocket request and you have to do like http upgrade and the client the server has to respond to the http especially if the proxy is a layer 7 proxy because you know we talked about layer 7 and layer 4 load balancing and proxying guys i'm going to reference the video here and what happens essentially with layer 7 is proxy has to break the tls right it has to terminate the tls most of the time in order to look at the layer 7 data which is http and the moment it does that it has to create its own tcp connection with the destination server and god knows how you can handle this whoop socket and and because there will be a bi-directional between the proxy and the server and then another bi-direction between the client and and the and the proxy is just a mess all right okay so i really recommend just doing a layer for load balancer or proxying and just never worrying about it okay yeah layer seven load balancing is very challenging dealing with timeouts because proxy http or normally have a timeout right server timeout okay but sockets shouldn't have timeouts because you're using the connection yes of course it's going to take a long time it's going to stay open for a long time even if it's not used you shouldn't terminate that for me because i can use it at any second right so timeout is tricky right and you probably don't care about these things but it's good to mention it's a stateful protocol right we talked we saw this literally this variable called connection it is literally on my server so if i sort of start my server my connection is dead the client is dead and you just you just lost the connection essentially right you have to re-establish that okay so since it's stateful it's really hard to horizontally scale okay does that mean you cannot horizontally scale no it does not mean that you can write web sockets in you can persist the sockets you can you can write smart application to use a third like a server a database service like a postgres to kind of persist the connection ids and have numbers in them and then you read the connection and then you have to maintain the state in the database and even if the database died it will just if this another if the server died it can read back all the connections from the database and do a smart thing and re-establish those right if you want to right it's still it's still not easy the client has to be written in a way to do the statelessness thing okay it's not impossible but it's very tricky okay so that's essentially pros and cons do you have to use warp socket guys do you have to use it no okay i know i know all right it's a cool technology but it doesn't mean we have to use it okay it really depends on what you're trying to do right the question is like do you absolutely need bi-directional communication that's the rule of thumb that's i just came up with that right so if you want the server to send you information and the client to send information to the server like gaming absolutely it's cool you can use websockets but if you only want like request response like you're hosting a web page don't use websockets right because why just use a normal beautiful stateless http right that's why http survived this long because it's so beautiful and simple simplicity rules guys simplicity rules okay whoops it's also simpler right but still it's more complex than http right so if you absolutely need to move to bi-directional communication i was a terrible british accent i'm sorry so if you absolutely need to move to bi-directional communication then you use websocket but there are still stuff that we invented guys that is long polling okay i don't i don't think i made a video about long point but essentially the client can send a request and just wait until the server has information okay to to essentially uh to avoid this messes right if i if i want to make a request to get the data and the data is not available yet you can use long polling it's against tricky but the server will not send you information until it gets you it gets some information kafka uses long polling and they have good reasons about that okay because web sockets the problem with whoop socket is the server doesn't know that the client has disconnected as well it's like it's like really weird to push data to the client if you don't know if the client is there or not you cannot assume that you can use the circuit connection obviously to to tell you that but you cannot rely on that okay long polling is one event source is another thing i'm going to make a video about it but it's it's pretty cool if you want just the other way you want the server to always send you information like notification you don't have to use websocket it's the one way but the other way it's the server sending your request all the time okay you can send client server but the server always pushes your information if there is informat if there is data like notification or push notification that's perfect and you can use event source so it's like the other way okay long polling is just hey give me information if that's available but event source is really powerful stuff so we can make a video but most most most most used cases you can solve them with a different source except chatting right where i mean even chatting you can solve it with even sorts because if the server receive information just send it to me okay right so complexity versus simplicity guys okay summary what we have done what we have learned on this video guys we learned http okay we talked about http the basis of all things the simplest protocol ever the most beautiful protocol ever and then we talk about websockets this bi-directional full duplex thing right we talked about that we talked about the handshake which is the upgrade protocol switching protocol 101 code we talked about use cases real time live feed right you don't have to use websocket but you can use them for that right really think hard about use cases guys now example we've written a node.js application that is a web server essentially a websocket server okay the client was so simple it was just literally three lines of code and we did not even open visual studio code to write that code we wrote it in my chrome browser how cool-ish is that guys say with me it's cool-ish okay it's very cool-ish so there's a difference between cool there is not cool way in the bottom there is cool way in the up and cool-ish is a little bit below cool right it's almost cool but it's just coolish right it's the ultimate state of the mind you want to reach you want to reach coolish you don't want to be cool right you want to be coolish so whoopsocket pros and cons we talked about olessa and we talked about when do you use websocket all right guys if you enjoyed this video give it a like and share with your friends and hope you really enjoyed this video and you learn and uh subscribe to learn more about software engineering to become a better software engineer and i'm going to see you in the next one you guys leave me a comment and below if you want to learn anything if you want a new video about anything that is in your mind um then do some research and talk about if i if that interests me right all right guys you guys stay awesome and i see you in the next one goodbye what is going on guys my name is hussain and in this video i want to talk about how you scale websocket connections guys to run on multiple servers and i'm going to show you how uh first illustrate that how websocket works i'm going to illustrate how you scale websocket connection with a with a reverse proxy such as a haproxy or nginx and once we do that i'm going to show you exactly a demo or some some code that i wrote that simulates a live chat application that is scalable with docker right so i'm going to spin up a little bit of a multiple servers with multiple websockets servers and one redis connection and one reverse proxy and we're gonna distribute all this beautiful connection websockety stuff and that's gonna be fun right how about we do that right you can skip to the code part if you're interested i'm gonna put the jump code below and that's it let's just jump into it alright guys so a whoops whoop sockets connection here's how websocket can actually work i made a video about websockets go ahead and check them out if you want details but in a nutshell if you have a client here and you have a web server that's the normal observer the first thing that the client does is it tries to establish just a normal http connection and it does hey i want to do a get request but that get request has something very special in it it has something called the upgrade header right and that upgrades here is like hey sir web server i know we just established a tcp connection for the http session but is there a chance i can upgrade that to a websocket the server says wait a second upgrade websocket yeah i do support that right go ahead and let's reuse this connection for websocket from now on that http session is now hijacked just for websocket now this is only true for http 1 1. this is not true in case http 2 http 2 a little bit more nuanced the one stream of http 2 one almost like one thread of http 2 right the stream will be used for warp socket connection because this will will be just a waste to waste the whole tcp connection just for a warp socket right but that's another topic for another day all right so what are we gonna do is like the server now can send information just randomly to the client the client can send information to the server it's just a bi-directional thing right and that's how websockets generally work right so it's a very stateful thing so we're using we're aware of this connection we are aware of this connection and the client just sends information to this connection it checks the state of the connection right so how do you scale something that is stateful right with http it's very simple right because it it's uh just make a request to the reverse proxy and the reverse proxy can load balance and hit that request to any web server by the back end and they will be able to re serve us my website is a little bit different right so let's let's take the same example with whoop socket and here's what we're going to do i am going to simulate three clients the first client is the red client right we have red here's what we're going to do we will have some sort of a reverse proxy here and listening certain port let's say 80 or 443 probably 443 for security reasons and that reverse proxy will establish that connection on our behalf to the backend server so these guys are the websocket servers now right websockets websocket websockets right so these are the websocket servers so how do i scale here's the interesting part here if the first client made a request and says git upgrade right that reverse proxy if it supports websocket and there's a big f not all reverse proxies support uh whoop socket connection so you need to find some someone that does right so i know hi proxy does nginx does i think uh i'm not sure about the rest right so now we have a request here and it checks the reverse proxy says oh you want to upgrade the header huh i know how to deal with this let me just a second let me let me connect to one of the servers and let's say the load load balancing algorithm is round robin so it's going to connect you to this server and now there is one tcp connection between the reverse proxy and that and the backend server and there's a one tcp connection between you and the reverse proxy right but since this is warp sockets right protocol that reverse proxy will act like a layer 4 proxy so it will stream every single packet that you send from now on to always go to the server that's it that there's a dedicated tcp connection to this client so it's like an almost almost act like a one one tcp connection but it's really not there are some implementation that where this is physically one tcp connections where this guy acts like a gateway just like a router but this is outside the scope of this video but let's just say for simplicity you now you understand that right okay let's pick my second beautiful yellow client my yellow client here now makes another tcp connection well once a websocket right so that reverse proxy will say okay round robin i the first request was to this guy so now the second request goes to this guy and so on right so let's just go the blue guy sha this guy this is the websocket connection so now let's just uh simulate what would happen here if i start sending a request right that's what happened if i start sending so let's say the server starts sending information to the client right so we'll start sending information the reverse proxy will say oh wait a second this is part of this so it will link it somehow to this right so it's like almost like one connection any request that you send will go to this client now this client if it sends information to that tcp connection it will go through that pipe right and let's say the client the yellow client now sends information here it will go through this and the blue will go through where this right so frequent request will not be load balanced that that's that's what you need to understand with warp sockets because you cannot just the yellow client suddenly jump to go to the other server because there is state here guys there is state that these guys agree on like if you're building a chatting application or a game there's a state that is here you cannot just abandon that state and just jump to another one you can but it's it's really really hard to build right it's just it's almost impossible to do that right so you do that and that's the idea that's how you scale websocket connection so you're this guy's acting essentially as a layer 4 load balancer but the configuration is technically a layer seven because why because this guy actually looked at the header and says oh what um this is upper grade connection how does it know it's upgrade it looks it looks at the header and sees right so and uh i'm no i'm i'm i'm omitting a lot of details guys i know this probably this guy is a tls terminator where it actually has a secure certificate serving the certificate but at the back end you can either be secure or unsecured really up to you guys all right all right guys to the fun part the coding part so i'm going to spend a few minutes explaining the architecture of the application the live chatting application that i built and then we will essentially just show you the code how about we do that guys all right so here's what i have here i have a redis instance here right and i have the same thing these guys w web circuit servers right it's a bunch of uh websocket servers and this is the reverse proxy which in my case h a proxy these are the clients so these clients want to communicate with each other right they all entered at like a lobby and they want to start chatting with each other so that's the application so the red guy connects obviously which will obviously be streamed to one of those servers and that's it now one tcp connection almost like a logical tcp connection between the client and this server one okay let's take the second client which is blue in this case communicate it's the second server and the final client is the green client so this guy connected this guy and this guy to connect to this guy right and that's that's absolutely fine so the first problem here if this guy started to send chat messages says hi right how do this hi propagates to this guy and this guy the client number this these two clients right these are completely different servers guys so here's what i did right i used redis as a pop sub system in this case i know i talked about writers guys check out the video i made about writers and whoop sockets i i really generally encourage you to to read about this back in technology it's really really pretty cool technologies right i'm gonna use another color here for the back end and here's what i'm gonna do i use the pops up technology and we talked about pops up in this channel guys right and what we're gonna do here i created a channel called live chat right and i made all these guys when they spin up i made them subscribe to this live chat channel to this channel okay and when what does it mean to subscribe that means if someone published something to this those three guys will see it immediately and here's what we're gonna do so this client sends a message says hi which will be transferred to this guy which then is responsible to publish the high message to the live chat which will the redis uh code will trigger and it will say okay who's subscribed to the live chat oh this guy this guy's this guy so this guy will get it this guy will get it also this guy will get it as well and what will happen is like okay there will be code that would say whenever we receive a message from the channel go ahead and push it to all my clients so in this case hi hi will be transferred back to everybody so well this is a decline this client will get the message this message also this client will get the message because we'll just get his message back right because we don't know right we just subscribe and the message will be distributed to all of these guys how about we actually show you the code that's the most fun part it's really really simple because i just use docker for the whole thing that's it you just need docker and visual studio code to write the code how about we jump into it so here's the code guys i'm gonna go through the docker compose and guys you might say what the heck is docker compose check out the video i made here micro services and how to spin up all this stuff so the first thing is the load balancer which is this puppy right and i'm going to use hi proxy and i talked about it your proxy in this channel go check out the course i built and share proxy and we're going to listen in port 8080 and here's the hi proxy configuration we'll go go through that and what we're building here we are spinning four or three actually four huh four websocket servers right and the websocket logic server is actually in this image which we are about to show that that's the code we written that oh connect to this redis instance and and publish and connect and send information back to all this logic lives in that in the world circuit deserver itself and i'm just sending some app id here so we know which server we're connecting to it's just uh mumbo jumbo nothing fancy here and then finally there is server that does all this magic right and here's the host names these are host names essentially okay and now go let's go to the it's a proxy configuration the hi proxy configuration you see large timeouts and these are very very critical because the hr proxy will terminate the connection if nobody's communicating for x amount of time right and we don't want that because this is a stateful connection and there will always be some people not sending messages for a long time right so we need to keep this connection open so what do we need to do is like configure a back-end and this back-end will have four servers server ws and ws1 ws2 ws3 ws4 listening on port 8080 8880 right and this is just like logical server names that is for the configuration all right and what is the final piece the docker file which will build our application all right this will be building a node.js application that will have the websocket server which we discussed in another video right how to build it and this is the node.js application itself we are using http module we are using the websocket module obviously we need the redis as well and we're taking the app id and here's what we're gonna do we'll create two connections from the websockets a subscriber connection and a publisher connection and that's too bad because i don't like this but i think i guess this is just the limitation that the red esteem have right because this is what we're talking about because this guy is also a publisher and a subscriber you need two tcp connection and the reason is the moment you subscribe you cannot publish on the same tcp connection for limitation reasons obviously quick will definitely solve this problem i have no idea if freddy's team will ever move too quick but that's definitely one solution right there will be one tcp connection well udp in this case but a stream will be reserved for a subscriber and the other stream will be reserved for a publisher i think that's a great solution uh rabbitmq came up with the idea of channels so i don't know why uh the radius team can also implement that channels in the tcp right so they need to augment their risk protocol to do that anyway so sorry about guys guys i just ramble a lot when it comes to these technical details i love this stuff guys all right so we'd have publisher and subscriber for each one on subscribe if someone subscribed to you just immediately publish a message that's just garbage there's nothing really special about this but if i receive a message from the subscriber this is this way right if i'm going this way right from the list to this if i received a message go ahead and loop through every single websocket connection that i have and send that message to my subscriber so in this case i'm gonna send it to the reverse proxy the reverse proxy obviously is smart enough to serve it to the right client right because it's although this logic is lives and probably the nat right network allocation table i might be wrong there and we're subscribing to the live chat and uh on the radio server okay uh we created this is just a warp socket logic connection we created a bland tcp connection and then inherit that logic in the http server listening on port 8080 that explains why we have all bunch of 8080s here right and uh on request this is the connection upgrade if i am open close or do this event if someone just sent me a message do this right and publish that message to the redis server on the live chat channel channel is very overloaded huh channel on rabbitmq means differently completely different thing than a channel on writers all right so set timeout obviously and this is just a a timeout that whenever your connection after five second i will tell you hey you're connected to server one or two or three and then you can as obviously have many connections so i'm going to add this connection to a pool of connection array that i have here and that's it and that's the client code how about we actually test that thing guys so to do that we need to do two things let's clear all my previous attempts here we are gonna do docker dash docker build dash t uh ws app is that what i called it ws app that's the image right so ws app and then dot this will build the late that's the first thing you need to do build the docker image for the websocket and we'll build it from basically from this guy right the second thing we need to do is docker compose uh up that's it that will start spinning up all those beautiful websocket servers all those beautiful ha proxies and redis and everything so it looks like we're up and running how about we start testing this thing i'm going to open a brand new chrome i'm going to go to the developer tools clear that thing and here's what i'm going to do const let's zoom in here so you guys can see ws or just say ws because i'm going to do this a lot obviously equal new whoop socket ws local host because it's running on my machine right and it's exposed right that's it and then i just connect it to the server we need to set up the message obviously and then finally we need to start sending so this is client number one i'm gonna say hello i am client number one okay and immediately i got the same message obviously we have one client so we just need to do this all over again on another client all right guys let's do this again right guys now i'm i open to chrome the views here i'm gonna establish a connection right here and then i'm gonna wire the message and i'm gonna send hey i'm client number one immediately i got it and the five second immediately got it oh you're connected to server four right by the way this is all round drop in but let's check now i'm going to connect from client to here all right and send i am client number two i am connected to client number one in this case all right look at this we got the message now if i do ws.send message another message immediately i got it here and i got it here despite us connected to different servers right and you can scale this to as many as you want i can open many many server many web pages like this and i start playing with this thing and i want you to play with this thing now so now if i send the message from here if i do ws dot send hey immediately i get it here and i get it here despite me and the other client on a completely different server because we just proved it right we were connected to server number one here container number one to be specific and this guy's connected to container number 444 and we communicate together with the power of radius right in this case all right guys and and final thing before we end this video guys uh yeah obviously we have read this as a kind of a central point of failure here but red is support clustering and replication to allow us to scale right so what you're going to do is i could spin up multiple radius but instances in order to essentially scale that but i rarely really really doubt that you're going to need that except you're going to have thousands and thousands of connections scaling just just this layer is enough to me to scale websocket connections all right guys so that's it for me today hope you enjoyed this video websocket have a great weekend i'm gonna see you in the next one you guys stay awesome throw in all your questions that you have below what should i make next i am going to see in the next one you guys stay awesome hey guys what's up i want to make a new video talking about websockets but uh i wanted to dive into an area that we haven't talked about in our previous videos about websockets which is i'm going to reference below detailing about the pros and cons of websockets and applications and the all the code that we have written right but we have not talked about how to do wss which is websocket secure and that's why i want to make this video in order to show you guys how to do web circuits secure or essentially it's just warp socket over tls uh connections and i'm gonna use uh a chair proxy to do that i'm gonna show you how to do that right i'm not going to write any code i'm going to reference the code we have done in the previous episodes right where we talked about websocket and here's the code i'm going to reference the github repo and i'm going to show you how it works and then slowly we're going to add a public ip address and we're going to add a domain a public domain that points to the public happy address and then we're going to essentially use a certificate to secure my public domain all that jazz and then essentially just used wss because now we're gonna listen to port 443 and all that jazz so how about we just jump into it guys all right so here what i have here node.js application that acts as a no uh as a websocket server okay and websocket servers it's very simple it listens it hijacks the tcp connection that you make as a first upgrade http request and make use that tcp connection as a bi-directional communication right so let's go ahead and just show that part the vanilla stuff and see how this server works right so i'm gonna go ahead and start debugging here and when i start debugging i'm gonna listen to port 8080 on my macbook here on my machine which is one two seven zero zero one or the local ip address so how about we go to chrome and consume them what that what this application does is the moment you start connecting to this server it will essentially have some events and we talked about all these events in the previous video but it will what we'll do is essentially if you send a message it will reply back with the same message and it also sends a message every five seconds the server sends a message to the server to the client every five seconds because that's that's the beauty of websockets it's a bi-directional system okay right so how about we go to the client here and my client in this case i'm just gonna use chrome's console here and if you don't know how to get to chrome's console you can go to more tools developer tool and this gives you this puppy right and i'm going to write all the code that i need from here because i'm i'm a i'm an uh i'm a simple guy like that okay so let's go ahead and declare a websocket here and then what i'm going to do is websocket equal new web socket that's a built-in class in every browser and you can just do ws which is stands for websocket okay this is the protocol and then we'll do seven seven seven eleven eighty eighty okay and when you do that the browser will send and the first http request as a plain http git request with an upgrade header saying hey by the way it's an extreme request but i want to upgrade this to a websocket connection and the and if the server is smart enough to understand what a protocol upgrade is it will upgrade the the protocol and return a code 101 was as i wanted one i forgot what the switching protocol header status code and this will teleport my server which i just wrote is smart it understands upgrade so we'll actually upgrade the connection right so we'll do that and let's just listen on a message on the client itself say hey they call console.log that essentially means the function you can just essentially assign a function that will be called every time the client receives a message okay and then in this case it's just hey you can see right every five second we start getting a message so again we're getting these messages from the server pretty cool all right pretty cool so if i clear this thing we'll start getting the message but if i do ws.send i can send something to the server hello and i'm gonna say get your message hello got your message hello the server sent back the message right so that's whoop socket in a nutshell boring boring stuff okay so here's what i want to do i want to do this as a websocket secure but there are so many layers because this is a first of all this is a a private connection right this is on my local machine so what i have done is the first step is i added on my router a rule that says hey every time someone requests on port 80 or port for free on the router please forward them to this laptop this local machine which is jose mc which is the machine i'm running web sockets on okay so that's the thing we want to do first okay i want to forward everything to this public eye to this local ipad so port 80 from the public internet on this public ipad is we'll go to this this will go to this this is very critical for the the for the next piece okay but hussein there is nothing running port 80 on your machine right now and that's true there's nothing there is something running on 8080 but there's a beauty part so how about we go to our beautiful ha proxy which is a beautiful badass proxy right and i made a video about achieve proxy i had a video about nginx i'm gonna made a video about comparing those two proxies and which is better in my opinion personal opinion but spoiler alert i prefer jproxy okay so let's go ahead and uh go to the command prompt and write a config that listens on port 80 on my machine and forwards the traffic to my websocket server how do we do that very very simple hey proxy supports that i'm going to explain how it does that okay so obviously we're going to need to create a config so i'm going to create ws.cfg a config foil it's an empty i'm going to create a front end i'm called ws and the mode is hdb i'm playing on the layer seven here and you might say hussain websocket is technically yeah it's a layer of seven protocol but most of the stuff is a stateful how do you gonna do that we're gonna show you how uh haproxy is smart and does that very very intelligently so i'm gonna create a timeout client timeout i don't know 10 seconds whatever that's the time out after which we will give up the connection and that's this these timers are very important guys we're going to talk about them in a minute right so i'm going to bind on all ports 80 and i think that's it right and the back end i'm going to create a ws back end right and let's do default back and here is the w is back end right just point this guy to always to go to this guy and what is the back end here well you guessed it guys it's a server that is named s1 whatever you can create multiple s-ones as servers here and it's on port zero zero one um one two seven zero zero one okay and it's listening on port you guessed that 8080. nice we need some timeouts here timeout uh connect how long should i wait before i give up connecting to that backend server okay 10 seconds whatever and timeout uh server and this should be really high okay ah okay important hundred seconds this this is the timeout after which if i didn't receive anything from the back end which is this guy as a ha proxy if it didn't receive anything from this guy kill it all right so let's do that and let's test this out guys let's test this out right so let's go ahead and do hi proxy dash f ws.cfg and we gotta get the elder because we didn't we forgot to do the mode for we forgot to do the mode on the server okay it's an incompatible mode both of them are playing on the http layer here on the on the layer seven okay so if i do this now it's working it's listening on port 80. right so technically any request http requests right right anything that goes into this port port 80 will be forwarded to untested including websockets requests so let's let's test that out so now if i do this right instead of doing 8080 i can do this right because port 80 will be forwarded to port 8080 right on the back end okay and this will be clarifying in a minute this is the local because the shape process is running locally so that i would assume this will also work right and what happened here guys what exactly happened my client which is the browser since a git request says hey i want to upgrade the connection it's a http request hi proxy detected that and says oh it's a normal http request so yeah i'm gonna do a load balancing on the back end but wait a second there is an upgrade header there okay i don't know if we can see it actually there you go so we give but we made a request right that's the request header i want to upgrade the connection and look at that i want to upgrade the connection and the server replied back with switching protocol 101 okay so this did work haproxy did establish the connection but here's what hape proxy also does so it's a proxy remember as a layer 7 proxy it terminates the connection right between the client and itself and establishes a brand new connection and plays with those in the back end right as a round robin or base based on the back end load balancing algorithm okay but here's the problem now whoop socket is a stateful protocol right so nha proxy knows that so it says okay once i upgrade the connection i'm gonna hook you up with one tcp connection there's magic there i don't know what is going on but if i'm gonna guess i'm gonna there will be a nat table that says hey this client ip address always goes to back to this connection so you're always connecting to one server and one server only okay because you cannot every web socket connection not connection every websocket request right doesn't shouldn't go to another server otherwise the whole thing is going to blow up right because uh the back-end server servers could be used for other stuff as well so let's just test this thing in message equal console.log and you can see that it's it's just normally working okay cool we have port 80 okay running still this is boring that comes back to our public ip address what is my public ipad is you can just google it you can just say ip and it will tell you the public ip address that's my public ip address right in this case so if i do this and i put my public ip address and i give you this right right now this second because that's my public ip errors on this second right guys you can do this on the cloud as well right but i just like to break things down into its smaller smallest pieces and understand everything right i don't like magic okay and that that works too and that's the step one we're one step closer to the final goal to do a wss right i like to explain everything guys and if i do they test look at that it works and if i do this if my for example i have my phone supports web circuit as a client i can do this today anyone now with this url can do this right take it one step further guys if i have a domain which i did create this domain this no ip domains free thing that points to my public ip address so this is the domain it's just literally a pointer a dns entry that points to this it's an ugly domain but who cares right my whoop socket side the dds.net so if i go here and i do this and i say pushed so you can see if i do this that works too because that domain is also pointing to my public iop address which points to my router right and says okay port 80 because ws right we're still unsecured here insecure the port 80 on router points to my ha proxy for learning on port 80. hi proxy looks at that it says okay this is port 80. i'm supposed to forward it to this thing one two seven port 8080 which is my code here and this is all happening right this is all happening right now okay i do that console.log and you can see i'm receiving the messages final step final step how about we secure this thing guys okay i am not going to go through the process of creating the certificate because i have done this so many times again check out the nginx proxy uh check out the ha proxy and there is a specific way of creating a certificate using the let's encrypt uh certificate authority and i have already done that and i have generated a file right which is my certificate public key and private key on the server and that will be enough for us to actually secure my server so let's go back to the terminal kill this thing yeah right and i'm go to w this is my certificate my websocket site.pem again referring to the video to know exactly how i generated that but once i do that cfg okay what i want to do here is listen to an additional port and what is the secure version of http guys which port is that that's right it is 443 and to hi proxy this is just another port you have to tell it that by the way this port is special because it is an ssl port okay this is where i'm going to do the secure circuit layer or tls right this is just legacy stuff they cannot just change it out of the blue so that's why they have to say this as well that's why you have to say ssl and then you have to tell me which certificate ssl is not enough right because well who are you as a server i need to trust you all right this this is why we have a certificate authority to begin with and where is my certificate it's in their users i say nassar it's a proxy and hopefully i can remember my websocket side.bm okay and that's it i'm not gonna play with http 2 yet alpn and all that stuff so this is enough for me still let's play on h1 because it doesn't really matter because webstock has its own protocol right and save and if i do he proxy dash f ws dead soft joy you can see i'm going to get the ldap saying hey this certificate that you generated is actually a difficult man but the film is actually i i think it's just sitting to 1024 which is weak maybe you want to upgrade that and that's that's easy we can set that tune that but i don't really care because my side my side is shady anyway okay all right guys how about we test this thing final thing okay so now my whoops sockets technically is secure so i can do this i still can't do this that works see it's not yelling at me but i can also do this ws s and what websocket client will do okay you want to wss protocol that means um the default port for wss443 so i'm gonna try to connect to w443 it's gonna ask the dns get the public ip address which is my router ipad and then it's going to establish a tcp connection okay 243 which is on my router and there's a rule remember 443 forwarded to 443 on my macbook which is running a jproxy which is listening on port 443 which is a secure security beautiful stuff so if i do that it works and now you're secure babes you're all secure and you're safe okay that's creepy and look at that works and now this is how you do websocket secure guys okay it's funny how i made this video because i i was researching the grpc video and how to do that and that thing is a beast and i am i'm not i'm not ready to make a video about that but i started comparing it with websocket because it's very analogous to these swaps um to these protocols it rests and and then well the rest is not protocol but sure uh yeah so rest and uh graphql and websocket and grpc they are all related so it's like it's like let me just make a video for you guys for this friday i don't know which 27 whatever right and then talk about just websocket secure and talk about a little bit of how warp sockets works and then maybe next week we're going to talk about grpc when i'm ready okay when i'm a little bit more educated about the topic all right guys hope you enjoyed this video give it a like and i'm going to see you on the next one you guys will stay awesome what is going on guys in this video i want to go through a system design exercise i have never done this before in this channel this is it will be a new uh fresh perspective of how to actually uh do a system design and i picked in this case uh how to do a multiplayer game design okay and uh i'm gonna go through some expectation for you guys uh just to talk through what are you gonna expect to get out of this video and um and uh we're gonna pick up a game that we're gonna build and there will be some expectation that comes with it and if you're interested stay tuned so here's where we're going to build guys the expectation here is gonna we're gonna build a a multiplayer game right and we're going to go through what game it exactly is but what we're going to get a text is we're not going to talk about products per se like we're just going to talk about software engineering technology so for example i'm not going to mention redis or postgres i'm going to say database that gives you the flexibility as a as an implementer to kind of pick any technology you want to implement right this is just we're talking about the the aspect of the technology it's like no not the actual product okay so if you see me like oh this is a communication protocol you can use websockets grpc it depends on what or really on where you want to go and this is where you shine as a software engineer right picking the right piece of product that actually fits your use cases and what are you trying to build okay so this is what we're going to talk about it's going to be a high level design discussion that doesn't mean that there will not be engineering talk i'll talk a lot a lot about engineering but it's going to be a high level design there will be no implementation detail like all you have to send a json or for example or you have to for example establish a two-way communication right it's gonna be a little bit of high level design and i'm gonna propose two designs to solve this problem okay and uh we're gonna show the pros and cons of this design right and uh let's just jump into it so this is the game we are trying to build guys and you can imagine this as a multiplayer game it could be a mobile game could be a browser based game desktop only it's up to you right so here's the game uh the four clients player one two three four i'm sorry i'm using colors here um i apologize for the color blind but this is a red player player two is blue player three is green and player four is orange and each player has a board uh with sales and numbers and this you can you can imagine this board to have unlimited number of size depends on your requirement so i have nine cells here and let's say player one want to capture cell five right so if it does that it will essentially capture cell five and then broadcast somehow to all clients that cell 5 has been captured by player 1 which is the red player and then player 4 comes in let's say you want to capture itself 7 right so it becomes orange and then it will broadcast the state to all of them so now seven is now belong to orange and then player two recaptures cell five which belongs to player one and that's perfectly fine and now you broadcast the state that oh it's still five and now belong to two and you get the idea right you can go uh like this until someone eventually uh win the whole board after 30 seconds that's the game the game ends after 30 seconds and the moment the 30 second attack done you can either result in a draw or one of them player game ones like in this case this player one win uh with four cells okay so that's the game so let's imagine how i can implement this game what kind of features we have we have a create game right i want to create a new game i want to have nine cells i want for example yeah i want to have nine cells i want this kind of configuration and you create a game and then once you create a game you get some sort of a handle i guess to share this game with other players so they can join the game so you can share this uh handle or could be url or anything like that and then people can join the game okay so create game obviously that's very important feature join game and play there's a an act of a play and what does that mean right and then the final one is actually how to broadcast the score right this is also one of the features a little bit of a technical feature if you think about it these are this is called user features and this is called technical features yeah technical if you if you work with as a product owner if you own a product you'll always separate uh your your features into two types your there are features that are user-faced like these and there is a feature that are kind of hidden from the user but you have to implement it this is called this is an example score broadcasting has nothing to do with the user they usually just expect it but it's a technical feature to implement right so how do you broadcast a score uh i am using in this case the server authoritative multiplayer model where the server pushes the state to the client instead of only the changes all right so this is this is one of the model and you can shine here guys as a software engineer you can just pick there are literally unlimited ways of solving a problem and that's what makes us uh the software engineering is is a great artistic effort in my opinion i i really believe that and i and abide by it i think that i think software engineering design is a very artistic way of solving things there's so many ways to solve a problem and each one kind of tells about the personality of of the designer i might be going too deep there all right this is the first proposed design that i have thought about guys i'm proposing two but as you will go through that you will have your own ideas and maybe they are way better than mine hundred percent i will i will guarantee that some of you guys will come up with better designs so please leave them in the comment section below so we can have a discussion and and grow as software engineers because i learn from you guys as well okay so let's come up with a proposed design that i have came up with my first design is to go with a stateful application design and when i say stateful or stateless here i'm talking about the application server that actually have the game code itself okay the statelessness or statefulness here is with regard to the application server right the whole system is always going to be stateful that's a very important point guys there is no system that i at least ran into that is absolutely stateless you're gonna store some sort of a state in a database eventually right but i'm talking about the application here the application is stateful the system is also stateful in this case we're going to go through the other case all right so stateful what happens here is all players in a particular game that you create must reside in the same server and there are advantages of this that's why i picked up this design there are also disadvantages we're going to go through so that's the first design any player that gum comes and for example you want to create a game all of them will reside in the same server we're going to make sure to cluster them in the kimser server and use you might say how hussein and that we have a unique identifier which is the game itself the game id right and the game state also reside in the same server and that gives us kind of data locality which is kind of attractive feature all right so that's the first design the second design is a stateless design where again the application level is stateless that means this we're not storing state in the application or at least uh we're starting maybe ephemeral state we're cached but the actual state is stored in the database somewhere it could be redis mysql anything you can imagine right and these guys are stateless that means any that you can create a game and this request can go to this server and you can join a game you can go to this server and you can see this the scaling that you can actually go through the load balance and the load balancer can actually have a more uh distribution of the request right versus the older design which all of the requests that has to do with one game will always go to one server okay you can start seeing the advantage and disadvantages going with this right so yeah so the state started here and the statelessness is here right so i can destroy the server and absolutely my application will just heal itself which is beautiful all right how about we go through each design in detail and we'll have some discussions and see the pros and cons of each of them the first design which is the stateful design right i am player a which is the blue color and i want to create a new game and i'm going to call it ga you can you can choose not to give a game name but that's also part of the features that you need to implement right by the way this this thing is a load balancer that's why it's a reverse proxy not necessarily load balancer let's be very specific here so i'm going to create a game guys right and then when we create a game i am going to take that game id somehow and hash it so that i always result consistently on a server right this is called consistent hashing and now once i get that this game id will always point me to the server okay the act of making this request are stateless but the routing will become stateful and will always end up into one server good so i created a game and i end up with this server okay that's the first act i'm gonna store the game ga in this server you notice that i don't even have a database here okay and you might say oh saying you don't have a database what if the application dies yeah i lose i lose the score and i am okay with that join game so that's the second feature if you want to join the game player a who created the game can actually decide to join the game id and this game id you can share it via i don't know whatsapp or messaging right and they go it gets the game id and you share it url you can use your imagination right and now i have that game idea and i want to join that game and if you get during this game that reverse proxy is smart enough to take that game and oh last game id i'm going to hash it and i'm going to end up in the same server the act by ending up in the same server is beautiful because i have the state here and i'm sure that the state is here so i can look up this state very quickly and i join and i updated that hey player a just joined the game this is the blue player and now you can just join player b and c and d the green the red the orange and all of them will use the same code and they will go to the same server which is awesome now all of the players we updated the game state so now all the players are in the same game all player on the same server and they are essentially rock and rolling all right all right how about we actually put this to test we're gonna play the game with design one so if i want to play a game you would say player a which is the blue player want to play on game ga and you want to capture cell number five so you can you can have your imagination run wild here this could be protocol buffer communication this could be a rest endpoint this could be websocket or grpc anything right and then the moment i do that i will obviously since i send the ga now i can consistently hash to the server that is available right hopefully still available and i'm gonna get to the server i have the game state i'm gonna update the game state locally because it's locally in the state in the in the server itself memory and then i'm gonna update that hey the blue player is now captured cell five and then let's play the red player b is calculating four well yeah let's go ahead and update four same thing we're gonna hash the same server remember if i had this server there's nothing for me to update there is no game right because the game is here all right so then i'm going to play with a uh sorry player player c ga and then i'm gonna capture five which happened to be the pl uh a cell that uh player the blue player has captured so we're going to capture it again and then the orange player captures one so this is the state of the game is now this see these numbers these are things that i will get update hey all right also number one belongs to the yu bello cell number five belongs to green so number four belongs to red and the blue guy has no cells right how about we talk about broadcast broadcasting the score of broadcasting the state right brother says state is actually reverse the server will talk to the reverse proxy or the load ban so it says hey by the way i have everything here on me literally everything in my server so it is very efficient to just send the whole dang state down the wire and essentially to all the players because i have the sockets of those players assuming this is warp socket you can send all this information to to all the players if you're not using a bi-directional protocols then this is not possible so you might want these guys will stop pulling information or use event sourcing to push this information down or maybe http to push okay but to me websockets is is is the most elegant one to design here you don't have to use it but definitely it's one of the best right definitely works on in everything client right what browsers and all that stuff right this just will work all right so that's how broadcast states how about we go to the stateless design and see how it will work okay let's take this design we're gonna have a database here where we're gonna store the state right and when i create a game i can hit any server the load balancer doesn't have this weird hashing thing that it does right it's just literally just does a round robin and hits you the first server which will just act like a dumb uh database connection and just store just literally just store the results in the database right so now we have a game that is here okay and now we have the game id i want to join the game and i have ga this is the game doesn't matter i don't have knowledge of the game in the lord balancer or the reverse proxy anymore that complexity has been removed but if i make a request i can hit this server or this and i want to join because this server now will query oh where is this game stored oh this is the game okay now it exists let me store it now you store that player a has just joined the game which is awesome how about we follow up with another player that wants to join the game absolutely okay player b which is direct player wanted j in the game well i'm gonna hit this server and that's okay you start load balancing your servers which is awesome right now you're kind of load balancing your even in a single game right in the previous design you're still load balancing by the way guys but it's a pair game load balancer the whole players if you create a new game you will hit another server right but all the players must be in the same game and the same server in this case no not necessarily even players on the same game will hit multiple server which will scale but there are some disadvantages to this let's join some other player okay green we'll hit the first server the the yellow will hit the second server and all the people have joined and we have the states persist in a database actually persist so the whole thing that goes down and i rebooted the whole system still okay i can somehow resume the game if i wanted to i'm like the first design play game let's actually play i want player a want to capture cell 5 well let's hit the first server and i want to update that entry in the database that now cell 5 is belong to me sir right and then player b want to actually capture cell for number four well i can hit any server that's okay and that will hit eventually the database which could be by the way horizontally scale if you have like a kind of a master backup scenario it doesn't have to be one node right just think about it this way you if your readers you can have backups that actually read from read from the backups and the rights goes to the master absolutely fine all right so player b captures cell 4 player c captures cell 5 again so we're overriding that so you'll notice that this is like a last win in kind of a thing right so this is the game is like every the last one will win the the one the cell so you will have to always keep clicking clicking clicking in order to win the game that's that's the idea of the game kind of silly but uh just something i came up with so play game g a and d obviously this is capturing still one and you can hit anything server and awesome all right let's see how we can broadcast the score in this architecture and design so the game state is here right nothing is stored here maybe you can catch some stuff but it's not reliable per se so what happened here is periodically maybe every 500 milliseconds the servers will query the database for the latest state and whomever is on this server connected because it could be two player one player or three or all of them doesn't matter right and we're gonna tell those players that hey by the way the state is now this so the clients can update their view so there's oh this is the now whatever right uh the yellow is now belong to the the one cellular number one belongs to the orange so number five belong to the green cell number four belongs to the red so this is how i represented it looks like very jasini but it could be protocol buffer any format will work okay and the other server has to do the same thing every single server has to query the database and you can start seeing this will begin become a bad bad i cannot talk it's gonna become a bottleneck if you don't have some horizontal scalability going on there so you need some sort of a replication which which could be achieved all right so now queries this database and send all that information so you can see that there's some chatter going on here there's to build the state i have to query the database which i have to jump to the network to do it okay so there is some latency added right and we can talk about that now pros and cons let's talk about the pros and cons of each of these designs and you can guys run wild with your imagination and come up with more designs and i'm pretty sure you already as you're reading this and you as you're watching this you are having some ideas to improve this and even to to become way better than i whatever i propose but let's let's come up maybe some some hybrid approach let's go through the bad things or the good thing about the stateful the stateful architecture is definitely easier to build if you think about right i don't have to maintain a database right so it is it will make make things very simple the assembly of the state the broadcasting of the state will be simple because i have everything in memory literally just dump it to all my players which are in my i loop through all the game state all the players and and send them information immediately if you have a push communication protocol a communication protocol that supports push low latency there is absolutely no latency because the game state is in me it's data locality 101 right all the data is in my server so i don't have to jump hoops to collect things definitely list network bandwidth because uh there won't be chatter compared to the stateless approach right not just data between the server and the database chatter between all the servers trying to assemble the game state between that earth fraction across all the servers right if the game server goes down the problem with this is there is no scalability right when i say no scalability is well that server if that game server goes down which has the state you're done you're done absolutely you're done that's it the game is end right and i kind of willing to take that right because the game finishes in 30 seconds and the the fact that the idea that the game the server can go in 30 seconds i don't know about that right if i have a lot of servers i might not have this problem but might be wrong but there's no scalability here nevertheless right the server goes down that's it you cannot kind of fix and and assemble pieces together to resume the game right it's just gone right and another another problem is here is just you can see that all the games might lead to the same server because of a hashing consistent hashing might give you not correctly hitting the same server which can overwhelm the server right but these are docker containers who cares right if this is like a part of a docker container you can spin up really a lot of containers and i was i am imagining this to be a very low application level the code won't be heavy and the process will be very quick so as i'm expecting this the footprint of the game to be very very light right so i kind of like this a lot but let's talk about the stateless the state lab architecture definitely scales because i can literally kill one of the servers and the next request will just go to another server and eventually mix itself down to the database which will query so it's definitely definitely e uh scales right and yeah but it is harder to build when i say harder guys it's just more components right because you need to worry about a database now and you need to know about latency definitely higher latency now you have a networking going on between the server and the database you and you have a lot of networking between the server and the proxy which is the load balancer the load balancer has to kind of will be a lot of chatter between the server and all the servers to be honest right if the game server goes down definitely you can resume the game there is no problem with this design definitely just kill any server and then resume the game completely right so i'm kind of torn between these two designs guys and i think i lean towards the stateful but i still think it's not straightforward to implement this hashing thing that we talked about so that the game i took the game state and hash it talk always goes to a single server i think he proxy can achieve that even nginx hand achieved that with some scripting i think lua nginx have some lua scripting they can't allow you to do that but i might be wrong but nevertheless the stateless architecture is also attractive because you can you can just make the load balancer literally a dumb reverse proxy that doesn't have any knowledge of your game right and have the application logic on the on the server itself right that's another kind of a disadvantage of the stateful architecture where your code is split between the load balancer and also the application logic is also on the server right so their complexity and i i can't i prefer the stateful but i think i'm torn i don't know which one to pick to be honest what do you guys think what third and fourth and fifth design do you guys propose right let's just keep thinking let's keep those discussions coming this uh in the comment section below and uh what do you guys think about this episode did you like this video uh do you want me to make more of this system design kind of videos i'm happy to do that i'm picking another another uh another design to actually implement like twitter or or or youtube or maybe even whatsapp or chat chatting application and we can just think it's i want you to understand guys that this is there's no one way to build application there's no war definitely there's no one right way if you're going to an interview design interview uh the interviewer will have something in his mind or her mind but you have to stay true to yourself and just be honest just don't don't expect to answer what is what in the interviewer's mind just lay all the cards on the table discuss everything you know and if there is something you don't know that's a great opportunity to learn right learn from the interviews like hey if i go now to an interview and someone i will tell them like this is what i know i would prefer this approach because of this this is this uh there's this approach but this is this is it really depends i don't know what to but i'm gonna say i don't know what to pick i'm gonna if if push comes to shove i'm gonna pick one and run with it to be honest i am totally fine with this approach right sometimes you will have to just you know pick something and don't paralyze yourself right because you will never get it right you will never get it right no don't don't ever think that the companies know what they're doing right they will go through a design and they will run into a trouble and they will tweak things and will move forward so if you're interviewing if you're on an interview and you're and the trivia is asking you something in an hour and they expect you to to come up with a perfect solution they are delusional right because people take months to just research and design something and you're not gonna get it in an hour they know that they should know that they want you to know how you're thinking and that what matters they want you to have a flexible fluid kind of thinking right think about all the possibilities the pros and cons right what as you can see i'm i'm still torn what what to pick right pick first one second maybe a hybrid maybe i still gotta keep a database with a stateful approach and periodically store the state in a database but keep the state in in a server somewhere yeah it's uh that's how how would the system design works is there is no one way to solve the problem and that what makes us software engineer a very creative field to be in just and don't don't beat yourself up if you can't think of a solution that is absolutely perfect if you're if you're torn and you're thinking as you keep designing and as you keep working the problem and you keep getting more problem you're absolutely normal because that's the state of software engineering there is sometimes you kind of get this nice click that's perfect but there won't be a perfect solution that's that that's what i what i notice in the all the videos that i watch in the software engineering they they ship you this design as if it's the perfect one and i don't i i don't i don't know if i agree with that right it's just oh this is the way to do it perfect yeah i don't know about that they're always going to be a better way of doing anything all right guys sorry i i mumbled there in the end if you enjoyed this video give it a like and suggest what should i do next tell me in the comment section below you guys stay safe out there in this video i want to do something that i'm completely uncomfortable with building multi-player game let's get into it so here's the game that i actually built but i want to build from scratch with you guys so it will be essentially a multiplayer game using the server authoritative model and there are three clients and i'm using websocket as a as a as a medium of this multiplayer communication so a client create a game and creates a url and this url is sent to any client really could be a mobile phone could be any desktop application it's a completely browser-based game and once the the client receives the url you can click join game and they will start the game so and if each game each client will get a color and if they click that color will propagate to everything right and this guy is like for example the red guy uh that the same cell will basically turn all red based on this and the game essentially is fighting between all of these clients so they can dominate the board so that's the game essentially so as you click right imagine multiplayer because i'm obviously a single guy here but imagine all of these will essentially try to dominate the board with their color that's the idea and the full game will should have a score obviously it should have a timer because that's the the you're fighting for this the the board and every client will have a share of the of the board and if they have the most they are the winner essentially or could be a draw okay so that's what i want to build this is completely built with the native websockets i'm not using socket audio on anything like that i'm using plain javascript i'm using plain warp sockets it's a and i end up for the back and i'm using node.js for persistent or anything like that i don't know i'm just using a stateful application we can obviously build the application better ways but this is just for educational purposes right i'm gonna talk through in this video how i can build this application in a better way right it's gonna be a long video guys obviously if you're interested stay tuned enjoy if you're new here welcome my name is hussain in this channel we discuss all sorts of software engineering by example so if you want to become a better software engineer consider subscribing hit that bell icon so you get notified every time i upload a new video would i say let's just jump into this video so let's just jump into it guys we're gonna build a multiplayer gaming application browser based when i say browser based i mean it works on any device that has a browser that's the beauty of this thing all right that's like or moving away from native applications and just trying things out trying things out right there's always pros and cons for to everything but the web man it's getting really strong and let's see how good this thing is so we're going to use whoop socket a technology has been released for a long time right without any fancy term and we're going to build a multiplayer game let's just jump into it guys so here's the agenda here's the things the design of the game i went ahead and created the design of the game because obviously for every software you want to create you have to design it you cannot just jump into coding i've made this mistake before jumping into code you get confused because you have no idea what you're building right that's why you have to kind of break down your application into kind of this basic component so that's what i'm going to do i'm going to go through the design of the game right and then after that we're going to show an example again of the game and finally we're going to code so so the first component here is is connecting to the server right so it will be some sort of a server i'm going to connect to it so that's one piece of the puzzle okay we need to implement the connection from the client to the server okay and then when i say connection here it could be any protocol but the protocol that i'm going to use is web sockets okay and then the other component is creating the game i want to create the new game okay and the game will have some semantic the game will have some state okay uh the the description of the state will be hey this board game now has seven rich cells three blue and two greens right so that's a state okay and the idea here is the status on the server join a game that's another action that the client need to take to do right because it's really interesting if you think about it playing right now i want to actually play i want to set one of these cells or balls or whatever we want to call them to my color as a player okay so that's called a play and then we're going to talk about that a little bit and then the final step of the game design is the broadcast state wow much better fixed thank god of editing man so broadcast the state of the game from the server to all clients and we're going to discuss that as well okay that comes back to what kind of game design would you choose right there are many multiplayer game design there's lockstep there's a server authoritative and then there are like a hybrid approach as well i'm choosing the server authoritative approach here i'm going to discuss all that stuff don't worry about it and i'm going to talk about a full example show example of how the game will actually conduct and then once we are ready we'll feel confident we'll jump to the code and we'll write some code guys how about we do this thing the first thing connection i want to connect as a client i want to connect to the server and you will notice that i am a client in this case most probably it's a browser but doesn't have to be right any client that understands how to talk web sockets could be a potential client of your game the websocket server in this case here i'm gonna not use node.js as my websocket server and then notice what will happen here i am communicating with jason here and i chose this protocol you can choose anything you want the what the beauty of loop socket is a it's a blob of text or binary that you send across the wire you are responsible of choosing the format of what you send okay and you pick a format it could be xml i don't know why would you do that could be json like what i'm doing right now could be protocol buffers right nothing stopping you from doing any of that stuff whatever is comfortable since i'm using javascript in the client and javascript the server javascript is the best language for this because it's the code i write on the server will be used in the client and by us so here's what i'm going to do when i attempt to connect to my websocket server that connection will essentially be up will upgrade the http normal connection to a websocket right but the first response that come from my web server will be to uniquely identify the client and that's a very critical point you want your clients to be identifiable with each request they make so you so you can look up which connection to use on the server in order to communicate with that client okay so that's the first point you really need to understand because think about it guys there will be many many connections here many connections from many games many servers how do i know that this connection this tcp full state full connection is belongs to this client so you need some sort of a hash table and we're going to build that okay so that client id and i'm going to use grid because it's the easiest way to identify things right obviously this is whatever i'm gonna design now today is not the most performant nor efficient we can always make things more efficient i just want the most simple way it's not even scalable the way the way the design i'm doing today okay it's just it's very stateful but we can do all of that stuff and we can discuss in another video but let's just build what we can build right the idea of the game without actually adding more complexity all right so when when i attempt to connect i'm going to respond with a single json response right as part of the websocket connection remember guys and if you if you if you want to know more about websocket i'm going to reference the video that i made here dedicated just for about websockets crash course and i also talked about how to make websocket uh secured using tls right i'm going to reference all the videos here but once i ended fire the client and i made build this hash table on my server i'm going to return this payload to the server to the client says it's immediate response kind response kind of a thing here for just that all right so now the client knows its ids the server know that there is a tcp connection associated with that line the next component of the game is to create a new game okay i know what does that mean a game is kind of a state that represents the uh the board in this case like the the border we're building it has certain number of balls or cells or whatever you want to call it okay it has an id it has certain players and all that stuff so one client assume they already connected they can issue a command to actually make a request to create a new game okay and the method that they can choose here is called create and you might say what the heck is a method it's nothing it's a json payload that i decided i am building the protocol here guys that's the thing here and you can do whatever you want i chose to call this thing method and this is so that i can identify it on the server so i'm going to send the client to create a game you want to send me a json payload with a key called method and the value is created and i'm going to know that you want to create a new game but you gotta tell me with every single request what client id are you okay and you might argue that hey say hussain you don't really need the client id you can't derive it from the connection and i agree with you i just want to make this as simple as possible we can do so much optimization but let's make it thing simple so you tell me who you are you tell me what you want okay so that's the create and when you do that that web server will create a new game state right and when i say create use your imagination you can be you can have it stateful in memory of the server which is what i'm gonna do you can save it in a redis instance that's another better way of doing things but i don't have seven hours to do this video so i'm gonna try to simplify this video as much as possible but think about it use your imagination and do a lot of things here okay and once we create that instance we're gonna create a game okay we're gonna have a new id for the game which is very important to identify the game id here and here's the response i'm gonna return to the user um immediately we're gonna response to the user that made that request with the game id and how many balls did we create for this game and you can make this configurable i am gonna hardcore this thing to 20 balls or 15 okay but we can make things configurable so i'm going to return a game payload here object and it's called id that's id and has a number of balls and that again we have to return the comp method so that client knows that hey when it receives a response from the server which was because this is a bi-directional thing we have no idea which response is for which request so that's why we have to kind of identify things uniquely okay so when i send that back i'm gonna return this result to the server to the client and now i know the client knows that oh there is a game id and now this is the beauty of this thing we have the game id the client can choose to share this game id as a url with other clients and they can join the game remember that that client has just created the game it didn't really join it okay to join a game you have to call this method you have to do this protocol that i'm building the whole thing here i'm building from scratch right guys so to request a new join request right you build this json again there is another method here that i created and i call the string join and then you have to tell me who you are notice there is always a pattern but you also have to tell me what game id you want to join okay and you probably will get this somewhere from a create game previous great game and someone shared share the url through whatsapp or whatever right any any medium once they get the url or the game id we can essentially join the game and when you send me this request and here's the interesting part if you send me that payload through the web server okay to the web server i'm gonna respond with this payload i am going to tell you that hey this the method is join okay and this is the game the id with the same thing the number of balls because you're a new client right you might be a new client and you don't know how many balls in this game or other state of the game you don't know anything about this game so what you're gonna receive here is this and you're gonna receive all the current client currently joined this game okay who actually joined this game so if you're the first guy to join you will only see yourself here okay so the grid will be the client id of the of the client who joined this game and an automatically assigned color and the server assigns the color for the game so the first guy gets a red the second one gets a green and the third one get the blue and so on okay you can you can check this i'm gonna limit the game to three players only and then that's it you return this but here's the thing this is a special request this is a special request and response the server will not only respond to this client it will check the from the game id will check who else is a client for this game who already joined the game and i'm gonna tell them that there is a new player so i'm gonna send the same respond to all the participants of the game so that's why this will be sent to all game clients right if it's none then we're going to send it only to this guy who just joined if it's another one then i'm going to send two and so on this we're going to be clear with with more of an example okay so let's join let's talk about play to play a game here guys what you do is i'm gonna send the same thing it's a method that's a json respond and there is a method i'm gonna call it a play that's what i called it you have to tell me who you are and you have to tell me what game are you playing and you have to tell me what ball or which cell you want to capture or you want to set so i can pick your color and mark it and you might say hussein you didn't send the color in the request how do you know what color is this client that's a good question there will be a mapping on the server in this case right and you might as easily set that on the client as well notice that there is no response in this case this is just like a beacon right it's like i talked about the beacon api it's like at the beginning but you send information without actually expecting a response and that's very critical for latency because this is gonna be a busy request this is the one of the most requests that will be uh click throughed the most right this is where people will just keep clicking right so this is the most you need to make this compact you need to make this fast as fast as possible that's why you made you need to make this there will be a client-side work that you need to do and then you send the request immediately like a like almost like a right through cache right so that's that's that's the very important point here okay and then the server doesn't respond with anything and you might say jose how do you know what other players has actually played right because this will be by multiple players this player one will play player two and and so on okay and this is it so this is the broadcast state where the server after each number of millisecond number of seconds or number of frames if you're playing with that right it will group it will will batch these frames and all the states that has been received from all clients and will send one response including all of these changes right with the final state this is called essentially the batching right so this the the the server will batch all the uh all the changes that happened and we'll send one final state to all client of that game okay so here's the thing so it was going to every every half a second 300 millisecond whatever you want to set it that server will start sending these updates right and this is also a very important thing you have to make this as efficient as possible i'm not going to make it efficient this is going to be a little bit large but we there are some tricks we can play with bit wise operators and making the state as simple as small as possible out of the stop of scope of the video but do ask me in the comments below if you if you're interested to know more so i'm gonna send all that stuff right so that's that's like a kind of a broadcasting to all client kind of a thing and here's the response this is a method that actually the server sends not the client it's not a response to an existing request it's just a server-side right that's the beauty of the circuit so there is something that the client only sends there is something that the server only sends there is a there is just the normal client server uh client request response kind of a thing as well okay and we're going to send here the update we're going to send the game id and the state and the status an array of all the current game essentially what the canon game look like if you have 20 balls or 20 cells you're gonna have 20 elements in this element and we'll tell you that this ball okay this cell number one or ball number one is red ball number two is blue pole number three is green and so on and all the clients are responsible to update that state right and immediately once you receive this you'll you'll immediately refresh that and you'll see that oh there's something changing okay so that's the broadcast state okay and this is what we call the server authoritative model where the clients send changes it sends input the client only sends an input he said hey i want to play this ball i want to play this ball i want to play this ball that's what the client sends and the server groups all that stuff and then the servers send the full state back to the server to the clients right so that's called the server authoritative model in game multiplier gaming where the server actually is the authoritative of the state okay clients cannot cheat as easily because the state is calculated on the server not on the client the opposite of that is the lock step approach where the clients still send inputs but the server instead of calculating the state it actually sends the input of all grouped uh client inputs back to all clients so and the clients once they receive all the changes all these inputs they are responsible to calculate the state right so it's a it's the opposite so that a client is authoritative in this case to calculate the state and the clients can't cheat in this case because hey so it's like hey i i own this i own the state in this case so i can play with this and change it yeah which is kind of not good but the the the good thing about it is the bandwidth becomes really really small because you're sending inputs instead of sending a full state right and we are this all going to become very clear guys as we go through the game example let's go through an example and start coding guys so three clients connect to a server okay random clients they know the address of the server and they want to establish a connect request okay and that's the websocket connect request guys okay the first client request i connect a connection and the server will respond with the client id and it will give it a grid in this case it's called a okay so this is a client a and this guy will be client b and this guy will call we'll call him client c okay cool so that's easy all right so we have three clients a b c that's it we have three stateful tcp connection that acts like a websocket okay and we have a handle of this and we have a handle to these connections and we have now an array in memory with a hash map not really an array it's a hash map that says client a is this connection client b is this connection client c is this connection it's very very very important to identify this client a decide to create a game okay client creates a game it sends a request like this the json is beautiful jason right and it says hey method create okay and the cli i am client a again we you have to identify yourself who are you so i can locate which connection i should use right and which stuff i can do with you right this is very very important okay again guys you can get rid of the client id if you want to but it's it's way easier to have an identifier and you'll know why okay once you do that the server will immediately respond it will create a new game it's an again as a hash map with the game id it's gonna generate a number of balls or cells and we'll tell the client hey by the way i'm responding to your creator quiz and here it is okay i just you just created a request yeah i know and here's the game id and the game now can be shared with other clients remember client a did not join the game it merely merely created it which is very important client b joins game game z in this case which is the game created by by client a okay i don't know client a sentence through through whatsapp right or whatever and uh we received the game now we have the game id and i want to join it and to join what do we do you have to send me this exact json payload method i want to join who are you i'm client b what game you want to join i want a game i i want to join join game id z and when you do that what do we do we the server will check okay who are the current member of uh game z no one okay in this case i will join you sir you are now a member and yours you happen to be the first member so you get the first color which is red so we assign the the client b the red color and we update the game state right so that the clients we update the game client state so that with the first client which is client b okay and we check are there any clients nope that's the only time we loop through all the clients that are currently here and literally get the connections and send this new change to all the clients right and the client in this case is only b right so this json response will only be sent to client b and b will receive it and we'll say okay oh i i got red and i will just display it in the ui for example let's join client c joins the game now same thing i'm going to send a method join imc i want to join game z oh okay we'll see all right let me add you to the existing game which happens to have already one player so you're the second one so you get the second color green okay and i'm going to add you so b is c and then i'm going to loop through all the current clients which is b and c and send them the game because b needs to know that c has joined right so both of them will get this new join request right so you'll start getting this joiner code so b will get it and also c will get it that's very important that's i'm writing the algorithm guys as i speak that's very important to iterate these things and reiterate them finally client a who actually creates the game just decided to join and if it joins this does the same exact thing so it gets the last color which is blue and then the servo will loop through all clients which is b c a for this game only and will broadcast all their response this response to all client so now a and b and c will get this response and all of them will see that oh there are three players and here where we can actually decide to play the game let's actually play guys so client a decides to play ball six which is like cell number six i want to set it this is mine it's a blue so what do we do we set a request right and the request is called play the method play and i am a client a and i want i'm playing on game z and i want to set i own ball six now okay so what will happen here is the server will say okay got it six this is the game state this is now the this the first time we actually changed the game state here so ball six is now on and think of it like an array or a json hash map anything you want right ball six now is owned by the color blue and you can decide to say hey by owned by client uh hey don't really care here so that's enough just to have blue here we don't really need more information so that sets it okay that now the state is saved on the server okay it's a stateful thing which is a little bit bad because that's the easiest implementation you can as is as similarly use redis to store the state and that is a better solution okay but that will take more time to actually implement okay client b decides to set play ball say seven okay so current b who says okay send the request and then the method is play and am b z m seven so the current state is six still blue and seven is now red right because b is was the red one and the third one is client c is now playing ball six so what will happen here six is already set to a well what will happen here is i am using a last one last in wayne kind of a solution so ball 6 will now be owned by green and and you can play with this the way you want guys you can design your game the way you want i decided to overwrite the result because this is kind of the easiest and kind of fairest right because whoever comes last wins that's it move on right all right so you notice that there are no responses from the server right and all of these three things happen within the half a second right let's say this all of them happen and they have a second after that five millisecond happened right the server kicks in and starts broadcasting the state to all the clients that are in the game okay which are a and b and c so it will send a respon a response to a with this state which is 6 is now owned by green and 7 is our by red and the same state will go to b since they will go to c so this is quite large right if you're sending it a lot right so the network bandwidth will be affected as a result so you want to make this as small as possible and i have ideas to do that it's just it's out of the scope of the video okay and we can play with this and i might make this game actually a legit game and i make it into its own repo but i'm not gonna make a video about it because it's gonna take me weeks to do that okay and i can't explain every single decision i make right it's just it's just all subjective to be honest and that's it all of this gamestay will just send right how about we jump in and we start coding guys all right let's go to this thing all right guys so to code we need to create a server and we also need to create a client and the client in this case is going to be just a dumb html page to be honest and the server will be our node.js right so make sure you have node.js installed make sure you have visual studio code and let's get into it so let's create a websocket server how about that file open javascript and you see i've created so many cool projects let's go up socket sell game whatever you want to call it right and that's it and uh i'm going to create a new index.js file let's initialize in npm it's a good idea npm init y and that's it so how do you create a websocket server and what is warp sockets right guys websocket is nothing but an existing http connection that have been upgraded to a websocket okay so how do we do http well aj is let's start with that building an http server in node.js and we have done this a lot of time so i'm going to create an http let's require the http library it's a built-in thing in node.js okay and using that i'm going to create an http server by doing http.createserver okay and you can choose to actually give it a function we don't really care because what the websocket will actually override that function anyway so what do we do next is http server dot start listening right just listen to port i don't know 1990 just for change because i'm pretty sure 8080 is used on my machine and we say like i don't know console.log i am listening on 1990. sweet let's close this so that's a websocket no that's not website that's just a server okay and that saw server when you first do it okay when you first establish a connection with the with the server it will create a tcp connection and that's what we need to pass into our web socket logic okay so how do we do that let's create a const uh web socket server equal require websocket dot server okay so that's the library i'm gonna use and i'm gonna create a websocket server in this case and to do that we can create a websocket server by doing new websocket server and now what do we in a pass it is a json file and we need to pass it the http server essentially and i think it's case sensitive so we have to do like http server like that and then just pass it that object that we just initialized right and when you do that this has become this guy's property that's it it owns it okay so that's the websocket server in this up until here the websocket server has n we are not listening to a change of the request to upgrade that connection into the websocket so to do that there is something called there's an event there is an event called on request and when you do an on request you get a request object and when you do a request object right you will have a very important thing here the request object here you can accept the connection and we talked about all the protocols you can create your own protocol here i i won't accept any kind of uh warp socket protocol so i'm going to say null and then i can say dot accept the origin right and when you do that you will get a beautiful tcp connection which is this bi-directional thing that you have to capture and you have to keep with you and the each client that's the connect guys by the way that's someone trying to connect that's the first function right and what do we do when we connect we gotta generate a new id for our client okay so that's we're gonna do next okay so we have the connection but this connection is still not enough right because that connection we need to listen on events that happen on that connection so that first event is on so the first event is open what do you want me to do when i open the connection yeah i don't care just say open whatever what do you want me to do when i close the connection probably a good idea to clean things up but let's just say closed okay and the most important one message what do you want me to do when i actually message you and that's the most important function of all of them okay if you if this connection received something from the client i have received a message from the client that's what it means here okay that's where most of our code will live but here this is not activated yet nobody actually sent me a message okay but we need to actually send back uh a connect uh send back the results to the client right with with their client id remember because everything we're going to communicate with json guys remember that's the protocol here we need to create a new unique id for the client who just connected to us okay and how do you do that let's go to grid we're gonna enjoy the grid i'm gonna steal a function for generally good because uh i'm gonna steal this function from stack exchange someone wrote this and i'm just gonna use it to be honest is that grid it's a functional good it's not perfect function but it's just demonstrate that it can generate a unique grid and that's what i want i want to generate a good grid okay and that's that's it sorry so that's where we're going to create a new id okay so let's add some comments here generate a new client id okay and yeah const client id equal good so that's a new brand new client id and what i want to do here is this is where the state the first state we're gonna store is like the list hash map of all the clients and their connections because this grid is now associated with this connection how do i build this thing well we can do it right here const clients and we can do it as an object here right and when you do it as an object it essentially becomes a hash map right well where you do this client id and this will give you kind of the key of that and the object and the value will become the connection or even more information so clients in this case sub client id equal connection and just like that i built a mapping between the connection and the client id we might need to add more information than just the connection itself so i am going to actually make this into an object right and the first value of the object is the connection and we might add something else i'm not quite sure yet maybe the color of the client maybe something else some metadata maybe a nickname right so you don't have to have it one-to-one right so that's it now now the clients is mapped with a connection and that's perfect so next time a client send me the uh the connection or send me a request i can find their connection i can loop through the clients and send everybody uh requests right because i can loop through this very easily okay we're going to show you how as well sweet now we build there that's the connect we need to send back the response to the client how do we do that so let's build a payload right that's with a payload that we're gonna send to the user and what do we do here what was the payload looks like remember guys the method was connect right so someone connected to me right i'm sending this back from the server okay and user is a client okay id and that's your client id okay and how do i send this to the user very simple i have a connection because i am still in this closure right so i can do connection dot send and literally do json.stringify you might say why do you don't send the object directly because it will yell at me right this thing only understand bytes okay json is now really directly correlated with bytes right you have to turn it into something that is a string or numbers or something like that okay so once you turn it into a string you send it back and then we're gonna parse it okay this is the protocol that i'm talking about we are agreeing that the server and the client are stoking jason here right that's kind of an implicit contract that we have okay send back the client connect right so that's the first thing we did client connect sir client connect we still don't have a client to be honest so we have still have a server so we have this and uh that's it let's do one thing before we actually start testing this thing message okay when you receive a message there is something called utf-8 data that's the data that the server will receive if you send something from the client to the server you receive it here and i am going to assume that uh response result right if i do the result here and i do json.pours this is big you're assuming that everything that is sent is actually adjacent so this might fail if you have a bad client that actually didn't send a json said something else right but i'm i all my clients are good clients so i would assume that they are sending json okay i have received a message from the client here and let's just uh oh no let's just print it here okay let's just print result which is the json object in this case how about that how about we test this thing guys right so all we did is we created a server we created a hashmap for the clients right and we're accepting the request and we did implement the first thing which is the connect right which returns the client id and tells us which method right so the client can actually listen to that and do stuff with it how about we test so if i run here i'm accepting i'm expecting that i'm going to yell guilty ldap and because of who cannot find more devops socket right that makes sense we didn't install this guy so how do we install npm install whoop socket that's not hard at all now we ran oh we're gonna yell that for some other reasons now all right 1990 we're listening sweet so now we have the server how do we actually test this thing we need a client right so let's build the client guys the client is i think about an html page index.html okay and html5 will give us like the template for the html5 thing okay and we need to actually connect and you can assume that the moment you open the browser we can actually directly connect bad idea to be honest but we're still testing so sure so i'm gonna write a script so that it will automatically connect to the websocket right when it first opened the page right so equal new op socket ws localhost again not a good idea to do a localhost we can use the host name in this case but we're in the same machine so this might work so ws dot the event on the client now on message if the user sent me that the server sent me a message what do you want me to do okay i want to see that message the message.data is actually the string that the server has sent okay and what did we decide guys anything that comes from the server should be json that's the contract between me and the client and the server so if i can i can safely do that response equal json.parse message.data just bring me everything from the client from the server so now i have response and i can just decide to print it how about that let's just print what we received from the client as as a console output yeah how about we test that thing and there's one small thing guys one small thing what i want to do is serve this html page but this html page have to be served how do you serve things right you can decide to serve it with http but why not just use express right app equal require express boom so i'm gonna just serve this page on another port uh with express so what i'm gonna do is app.listen 1991. is the port that will actually host the page okay so that's the page we visit in order just to get the html and the html page will have a code to actually connect to port 909.99 1990 okay and that's just like a console.log and listening on http port because that's just another one okay 1991 right and obviously we need app.get when someone visits slash just give them request response and immediately response dot send file index.html how do you do that diy name there index.html this will immediately send that and we have done so much of that stuff right so i'm i'm just not going through easy stuff here i'm trying to explain the complexity stuff all right so this will serve me the html page right so how about we do that if i run this now we'll be listening to two parts 1990 1991 okay 1991 is where we're going to visit now where we actually can consume all right so now if i go http localhost 90 91 right which is the express page i'll be served the html code right and let's just for fun let's add something in the html so we know that it's actually a page right header one it's like ah ball game whatever right when i restart there you go ball game and when i go to the developer tools here let's see what we have here where we're going hey we got something back guys it worked remember what happened here right let's actually debug to show actually i can show you if i look at the code here and i do this the moment i serve this page i get this page the code will start executing which is the script which will make a request to the websocket which will immediately get a a response from the client from the server giving the client its own unique id so how about we debug this if i do this the moment you refresh you can actually debug right you get a boof create a websocket success right because it's a local host it's on the same machine that will work and then create the event and then once we create the event the server actually already responded oh god damn grammarly all right and now this is what it responded to respond with a json object which we parsed successfully into an actual json object now saying that method is connect and client is actually this thing and we printed it how coolish is this guy how just coolish now we have the client id i want to keep the client id handy for me okay in in the in in the script so i'm gonna create let client id equal no here and when i set it here i want to get the client id and save it in my global namespace here so what do i do if response dot method and i can do that because i built the protocol right equal equal equal connect was it lowercase or uppercase i don't remember if that's the connect method that's the first thing we're building right if the connect method then the client id called response.clientid that's it we built it console.log client id set successfully and we can just do plus client id cool now i know myself so now every request that i send actually i can send my client id to the server which is amazing amazing okay now we we're building some sort of almost like a bi-directional thing so we build the connect i think we're ready with the connect we can move on run refresh you can see client id sits successfully and that's my client id amazing it's a normal grid that we generated what's the next step guys what are we to build next this is what we need to build next create game right so we need to make a request from the client like this could be a button right that says create a game that actually sends this to the server how about we do that that doesn't sound hard let's do the client code first so to do the client for code first we go to the steamer right and it's a button so button id equal button create right and they say new game how about that new game and this is the buttons what i want to do here is just build a list of all my buttons here button create equal document or get element by id button create right i'm only using plain beautiful javascript stuff nothing else okay once we do that right that's just like i said i don't know buttons or html elements we can call it right and then we start wiring the events button create dot add event listener e if someone clicks on me what do you want me to do i want you to send a request sir okay and here's the thing guys this actually needs to be up this needs to be up here and i'll tell you why because i'm gonna use ws all right so what do you want to do we're going to build the payload right how does the payload look like we're going to method and the method is create right i'm going to create a new game who are you i am this guy client id that's the only two pieces of information that we need we're gonna send this to the server how do we send this to the server ws which is the websocket that we created dot send and we're gonna jason.s stringify payload is in this awesome guys so we're gonna send the request to create a game to the server the server has no idea what the hell is a create method so we have to teach it all that stuff coolish coolish all right so we're sending that thing still this is useless let's build a server piece here okay and you can choose to build all the client pieces or the server piece you can build the server and the client in parallel it's up to you really right normally this is in a scrum system this uh this will be like kind of its own issues and each each each developer will pick one and work on it right so one message here that's the interesting part right and we will receive that i'm not going to print anything what we want to do here if result dot method equal equal equal create if someone want to create right a user want to create a new game so we're recreating a new game first of all who the heck are you right who the heck are you i want to know who you are fair enough that's who i am client id result of client id is who i am okay so you can know your client very simply like that so this is you right but you want to create a game okay and i am responsible to create actually a new game for you so i'm gonna create a new game id here and it's just a random grid okay just create a new grid that's it once we create a new grid that will that's just the quit that's just the idea of the game i need way more information what do we need else we need the idea of the game and how many balls the game have and that's pretty much it i think we don't need more information that's the game state it's a game object that we need to return so we're going to return method create and we're going to return the game state and we better have this game state handy huh so looks like another hash map right guys so how about we build that so right here i can do games equal this very similarly right and i can say games sub game id equal object and i can start building this thing right i can do id of the game is game id what else was there balls 20 hardcoded just 20 games 20 20 cells we return to the server and the method really that that's the payload we're gonna take care of that right later okay but that yeah that's that's essentially it that's the only two pieces of information that we actually need all right and that's it so let's build a payload right so let's pay build the payload and the payload is method create and the game is actually this right hold that's the actual object which has the game which will have the game id and balls that's that's okay and that's it i think that's the two information that we need from the user right to the user and then here i need the connection where do we can get the connection here the safest way is actually to use the client id to retrieve the connection but otherwise i have no idea where is this connection right you can use closures to actually get a handle to this but it's just safer to actually know what you're doing okay plus when you move to as uh a scalable format a scalable architecture where multiple servers have multiple ids this you're going to need to i uniquely identify the client and so you can retrieve which server actually had the connection so that's actually always a better idea so i can do like a connect cons connection equal clients of client id dot connection right that will give me the connection id remember because that's the object that we received it's an object within with a with a key called connection that will give me the connection right and once i get the connection i can do send right json.string5 always stringify when we send we always parse when we receive okay and then we send back the payload which is this thing okay now this will create a new game and you know you might say hussein we still don't see beautiful stuff it will come it will come yeah we'll come everything will come so we have the client we on the server okay so the server sent this create but we never actually listened coding code listened to a method for the create so what do you want me to do when i receive the create command when someone when the when the server sends the information to the client which is a create right that's clam html right i'm the client every time i say html i'm a client index.js is the server okay i what do i want to do here the response in this case i'm creating i will say just game successfully created with id response.game.id right and we can just print the whole state we can do that i guess right game doubles like we can we can even say uh with response to game.balls balls sweet i should stop saying balls and you change it to cells i know you guys are giggling right now all right let's do this thing refresh hey we have a shiny new button called new game well what was that when i visited i got a client id and if i say new game a game successfully created with id burberry with 20 balls nice nice i have this id we can start by just literally copy and paste the game id right that's not hard let's start with that without doing the whole url which is a little bit tricky let's just do a copy and paste of the game id and that will actually allow us to join a game how about we build join game join game guys to join a game you need to send out a quest and that's the little bit tricky part to join a game you make a request and you tell me the method join the client id what are who are you good and the game id which game you want to join and when you do that i will send this information to the server and the server will respond with the join to all active game participants with a color assigned to the game so this is the most complex code let's let's let's start writing it so sending that join go my mid so how do i do the game id i'm not going to complicate it i'm going to have a text box where you paste the game id and click join so how about we build the client first and then we build a server so i'm gonna build another button called join game button join and i'm going to build input text type equal text an id equal text game id just a game id really where you can just paste it here right here it's just uh literally nothing fancy and that's the idea of the game id right now that that's where we were going to get the game all day from okay we're gonna do this this uh button join equal button join and text uh game id just uh these regular stuff guys you know all that stuff right stuff rocket science everything is simple so far let's wire the event for button join dot add event listener join what do you want me to do and join we're going to send it a quiz we'll come to that okay but we need to get right let's send let's send this let's just copy and paste here we're going to send that payload it's not created we're joining right what else do you want spent that client i need the client id i need i need you right i also need the game id what's the game id guys there's something we missed we missed to actually store the game id in a nice variable up there okay so let's store game id equal null here and then when we join right when we receive a message of create we're gonna get the game id and that game id called response.game.id that's very important to actually save the game id so we can globally access it in the client right sweet now i can just say this because i have access to it it's right there right and we know if if if you want to join the button there this is one case when you actually create the game and join it right when you create a game you want to actually populate that text box with the actual game id right so that's one way or you can save it as we did but if you actually open a new page and you click join you're going to get an error because game id is now so what do we do here if game id right is not like or if it's null then actually you might be a good idea to actually read it from the text right which is what text game id the value game id equal this just read it from there if it's now if it's not then like i created the same i created the game from the same page then i uh this will be populated right so i have this and we can send it over send the payload i think that's all we need it's a join that's it what do we write on the server there a server on the other hand will be expecting a join request oh fancy that's uh okay why do we do that here we have a create method right and that's it we don't have anything else so how about we do another method boom if the server want to join not the server the client a client want to join if the card want to join in this case let's what do we need to do right we need const client id i need to know who you are so response dot client id i need to i know what game you want right game id right and that's the two information that we have if you're joining a game it's probably in the array of lists and guys there will be a lot of things i have missed right a lot of bugs a lot of bugs but you guys are good you're gonna you're gonna take care of a lot of stuff for me so how do i get the game i get the game object by saying const game equal games off game id okay that will give me the game object and now i need to also get the connection right the actual connection the user connection so now this client is actually joining the game okay well we need to assign a color for this client in order to assign a color for this client we need to know how many actual clients are there in this game well game.clients is actually empty if we think about it right because i don't even believe we actually set that thing so it might be a good idea when we actually build that game object here to actually build an empty array right which is always when you create a game sit then clients which is an empty there's no not a single client and that's important because i'm lazy because i want i don't want to check for things like if it's null or not i mean with optional chaining which is should be there it should be easy but you know me guys you know me by now right i'm lazy all right so what we want to do here is dot length will tell us what color what what how many clients do you have and based on that we can just assign you the color how do we do that okay there are some tricks up my sleeve uh some hacky tricks like this right i can do less right red there are many ways this is just one of them red one is green and two is blue i'm assuming just three colors right and if i do this and i do sub this what will i have guys this will be the subset 0 in this case will give me red 1 will give me this 2 will give me this but if it's more than 3 i need to fail if greater than three actually greater than or equal three then sorry max players reached right i just decided to do three right and it's a good idea to have a limit on your players you don't have to but your web server will run out of memory at some point right and then you can do const color let's see if this is goes there okay that'll go the way now okay so now this is the color gives me the color of the player okay and did you get the idea here what i did like it's just a trick guys yeah just one of the trick so now this will give me the color of the player where do i store this color of the player well along with the player right i'm assuming so we got the game here how about we actually update the game state here right because we need to game dot client dot push see i mean this is an array right i'm gonna push another an object and the object is client id which is client id right and color what color are you sad what color are you this is exactly what we returned guys if you remember this is just an array of all the clients and this is there sweet we built this thing now right we can just decide to return for example here just like yeah just exit now i want to send this thing back to all players wow what how do i do that well not very hard you can do this for each loop through all the array that you currently have okay and if there are some clients already you're going to loop through all of the clients right and see look through all clients loop through all clients and tell them that people has joined so some new game players have joined and we have a client this is c which is this right i need to get c dot client id right and i need to get that connection of that guy dot send and i am gonna send jason.stringify i'm gonna send the game not the game actually i need a payload did i prepare a payload uh i didn't prepare the payload let me let me prepare a payload maybe it's a good idea to prepare the payload right here not really it's just the exact same payload so we can just do that payload the method is join and the game state is game haha exactly and then stringify the whole payload and send it sounds good right because that's the game id bull clients grid and color sweet all right how about we test this beast all right when i run this now what we're gonna do we're gonna join right first we're gonna create a game and then join it so refresh let's remove the breakpoints create a new game that just created a new game that is the game id i am going to join the game i didn't get anything back from the server oh there's an error response is not defined ooh and the server crashed response is not defined where did we do sir what did we do why is response not defined why is response not divine result why did i say response uh a problem okay do it again refresh new game join and crush the again cannot read property connection of undefined we'll get to it we'll get to it maybe this is undefined right so let's check where do we have here what do we have here it's time to actually debug guys right let's just this is the bug have a break point refresh this babe new game and all good and join we will should get out of here result the client id oh coin that is not defined why okay guys i think i found the problem is that on the create we actually expected a client id from the server which is wrong right we shouldn't do that guys that's the bug took me a while to find out but yeah we did it we did find it so that's the bug we are we we're taking the response from the create protocol and we are assuming there is a client are we overriding our good client id to undefined bad just remove that stuff hopefully that will do the trick refresh right new game join game boom boom boom that will take us to the server anytime soon yep there you go we have a client id now yay got the game id let's get the hash map get the game there is no client zero is the client's greater than zero nope we still have it get the color which color do we get we got red the trick worked you got the idea right because it's zero it's gonna find the zero hash right key and then find the value of this which is red okay and and so on so this will work up to two and then we'll break because we we essentially zero one and two we ah now come think about it actually we'll yeah yeah that's okay that will work so client id and color add it push it now we have clients we have one and three i want you to send that to all clients and now if i do this go here and we should start seeing well we didn't actually do it any code for the client that's why we did the client didn't do anything so for the client we need to now add a code for join what do you want to do when you receive a join request right when you receive a join request right what do you expect here you have the game id right which game do you want right this one's the game that id that's correct you also need to tell me that hey this these are the players how about we actually how about we actually do something better this time how about we have a dev element with the actual colors of the players right let's do that so i'm gonna do uh dev id equal players you can call them dev players right and then do that thing right dev players players players and then here's what i'm going to when someone joins a game i want to lu i want first to get the game id the game object right give me the game give me the game right when i have the game i can loop through all the clients of the game right for each c and if i loop i can create elements on this thing but before i create i'm going to make sure that this is empty so in order to do that i do what was the trick while uh not dot first child i think that's is that how you do it well this is not the first child of this is is not empty go ahead and do div players dot remove child uh remove the first child i think that's the code to remove all the elements right i might be wrong is the first coil is a function i don't even know i think it's called dot first child yeah it is it is just a property all right while not just do this right clear all the children and once you clear it start building the children here which is like uh const what do we build labels devs another devs element yeah how about we just do devil not sure b equal document.createelement dev and then we do d dot style dot width equal i don't know 200 px that's a little bit much i think d dot style the background color background killer equal what is it equal c dot color right and d dot text content is actually equals c dot client id which is an ugly grid yeah that might do it and then obviously we have to do like uh div players destined child i pin the d right makes sense plus this is wrong we should not do it in the loop we should do it outside the loop right clear all the children and then keep adding all children at a time okay that's why because we're gonna join and then join and then join that's why we get we get new clients every time how about we actually test this thing guys boom refresh i'm gonna close this because it's annoying and then i'm gonna open another browser another browser and then create a new game and obviously i don't know the game id so i have to open this again like an idiot okay and i could be this guy and you saw we're gonna join the game oh something is happening it's taking a while did anything happen did anything fail did anything fail what did fail fail remove child is not defined damn it i i thought it's called remove child isn't called remove child isn't it called the remove child wait a second what is it called it's not removed child oh i have to do that remove child what the hell i thought i did that all right guys it was a stupid mistake it should not have been not while there is a child remove it all right at least we have this now that's pretty cool right so now if i take the same guide and go to another user and i say join it's happening flip is slow i need to find out why there we go i got green and the guy join that's probably the debugger slowing things down and blue three clients three beautiful clients this guy and this guy and this guy so we have the game we joined there those guys now can build the state actually so the client can not just build the colors like we were doing right now we actually can build the state of the game how many balls do we have in the game okay they have enough balls well let's find out let's find out the players div board okay and the boards very similarly is um i'm going to use this code again when we join we need to rebuild that state of the game right so we're gonna call this gold [Music] we're gonna call it div board there's a div board div board div board right and this guy's the board the board the board yeah div board so we're gonna do is essentially a loop let uh let i equal zero let's make this a little bit bigger i is less than the number of balls in the game which is game.balls i plus plus sweet that's what we do we look through all of the games and the balls and we start building these things and it depends what you want to build this as i'm going to build them as buttons okay document and we can do cons b equal document.createelement and that's a button and then button.id we need an id right because the idea is essentially is going to be ball plus whatever right the i okay because this will be very useful in the case where we want to play right when i click on this button what's the id of that button right let's call it a tag right i plus one because we're gonna start from one whatever so now be dot add event listener if someone click on you what are you going to do that's a mess that's that's something we're going to do when do we do the play right but we're building here stuff we're just building it so now uh the board dot add uh the append child b append the child b oh yeah we're building our stuff that's it i mean we can do if you click b dot uh style the background color equal your color right player color which guess what i do not know what's my color is it is fascinating that you don't know what your color is so you can find out easily because guess what from the game state you can actually find out your color right because you can loop through all the clients and if the client that is equal to your client id then that's you right so and that's here right exactly so you can actually let's build a let's build this because we need to do it all the time right this player color equal note and not this let and here when we loop and we join this is a good loop because we're looping and this is the color we're using the color right if the client dot client id equal equal equal client id which is me right then the player color is equal c dot color that's how i capture my color that's very important because here when you click i want to save my color but we're not sending anything to the server yet i'm just setting my own color so let's see if all of that stuff actually works steve almost there guys almost there sweet client generated new game created copy the new game refresh this guy join the game let's remove this because we don't you no longer need that and we got all the buttons we need to put some sizes there okay and then i can join this game too look at that it's faster without the debug now right and i can just just join it's way match faster guys without that okay let's fix the button size it's so small be the style the width and equal to i don't know it's just 150 px let's see 150 by 150. yeah does that looks good does that look good does that look good i thought i added oh we didn't add even a uh an id for that i guess we don't have to but sure this is like the text content right we didn't add that all right refresh refresh refresh new game boom [Music] we didn't create it did we i think we did okay join oh my god oh my god actually works nice okay nice nice join the game i'm a green guy nice and join the game i am the blue guy obviously those guys are not communicating with each other plus the colors are disappearing for some reason right no it doesn't disappear we actually redrew them because new people joined so we redrew the whole thing remember guys sweet sweet sweet sweet sweet okay that was the join i think we got that we nailed the join guys we nailed the join we nailed it the final piece not the final piece the piece before the final piece is the play i want to start updating the state let's do this so when i click no no i said my color i won't actually build a payload that i want to send to the server and the method is remember go to play play you need to send the method grid and which ball are you editing easy we have all this information uh client id equal client id which game are we adding well this is game id right did we ever save the game id because it's good it's going to be a good idea to actually save it right because we we're going to need it guys right because this is going to be saved anyway if you joined it it's going to be here definitely click join or create it i think we're going to have it the game id as a variable that's good another thing we need is like which ball id the ball that you actually playing or the cell whatever you want to call it it is b dot tag that's the trusted property that's the beat of tag very very critical and then all we need to do is just basically us as a client dbs.send right is it called ws i think right let's just send it yeah there bill yes dot's send we're gonna send jason the string stringify fellow and that is the client side obviously every client side has a server side what do we do when we receive a request not to join join was actually a big function huh that's the join it ends here let's add an if statement for the play a user plays okay the user plays who are you client id equal result dot client id const game id i need to know which game are you playing so i can i can find it what else do we do we're building a game client id game id and i need to know which ball id you're touching boom all right sweet so i need these three information once i know this one first i can start building the state which is awesome and remember this is a global state that will be changed on the server okay so let's get the game which is game z off game id right dot state which it doesn't exist to be honest right let's just do this con state equal get the state currently i know sometimes it's not set so if the state if the state is not set set it as an object let's use an object let's just follow the hashmap idea right so state sub ball id which is which ball equal the client id oh how do i know what color is the client from the server side i do not believe we actually persist this information it's actually in the game if we think about it so it's games yeah we need to do a lot of stuff maybe it's just easier to send the color on the payload right it's just way easier right guys let's actually do with that i mean yeah i mean we have it here right we just literally have it player color just send it it's just easier instead of doing stuff like that goofy stuff so yeah so stay the ball as i call just literally uh const color equal result dot color yeah it's just easier right to stay the ball id we didn't use it so that's now that's good so that's it and then once we're done we actually set that state back as the user equal stay and that is sir almost the payload is ready what's the pillow the pill is very similar to the uh to the join payload to be honest right it's like that which contains the game which we said cons the game equal this guy and just send it back it's not join it's actually play right what else are we expecting to send to the client to the user actually nothing to be honest we're not sending the play doesn't actually send anything to the user to the to the to the client we just update the state and that's it right because this this will happen often very very often okay this is not that the state of the actual array will get updated all the time okay and now this comes back to the final thing which is the server now sending the state to the client every 500 milliseconds which is the final final play how about we do that guys let's build a function called function update gamestate and what we do essentially is loop through all the games that we have which is what for g for cons g off games right which is an array that will give us the key of the games right and what we want to do is get the g which is games sub g which is the actual game right object dot all the clients we want to loop through all the clients and send them [Music] when loop through all the clients right and send them the state updated state of the game right and this is something we do every now or then all right we're gonna determine when do we do that okay maybe when there are three players we'll just we'll decide that okay we did this code before so it's like uh client sub c right which is the client id it's actually c dot client id all right and then dot connection dot send right we're sending what we're sending guys we're sending the state of the game which is this puppy boom just send it the whole thing the actual game i'm going to test that in a minute but this is going to happen every i don't know a set timeout call this guy every 500 milliseconds and nobody actually called this function so we need a place where i actually call this function what is the best time to actually call it this function well we can decide to actually call the function when we have enough clients right when you have three clients let's call the function and start sending people there and they can start the game right away if game.clients.length equal equal equal three then start the game start of the game when we have three clients exactly how about we test this thing this is gonna be interesting let's see if actually it works and uh here's the thing what are we sending back to the client we're sending just the game state but we didn't actually build a payload to be honest so we need a playload const payload in the method right which is to update the state which is like i don't know what's gonna call it update i think the final thing we need to send a method called update with the game state that's exactly that way okay and that's the game state so we can actually just do it once right here right const game equal this game game and then payload this could be a game we stringify the actual payload right and that we need the final piece from the client to actually respond to whatever the server sends right what does the server send here guys we're going to send the join noob join we did the join we need to do the update if that client receives an update we need to kind of do whatever we did in join to be honest guys but with some more a little bit we're not really removing and adding the cha children to be honest right as actually i find i find removing the children now is just kind of useless so what do we do we receive the game right the game state have i would assume a state object which is essentially almost like a key so we can loop through all of that stuff right so for const s which is the ball actually if you think about it off this right because remember it's gonna be something like that zero red uh one ball one is whatever right i think it's just start from one i think we built the whole thing start to to be an indexed so so what we need to do is find take this this is b and b is the index so we need actually the actual value right const ball id equal this right we need the actual value and that we're going to do a lot of debugging after all this code we written guys we're gonna go go and find document.getelementbyid we need to find the ball that is titled bowl id this and give me a b object object right which is the button and we need to make this button style the background color equal to so the id will be b i think right that's that that's the i miss them something and the b the color will be actually the value of this we're gonna check this out and see if it actually works who knows all right almost there guys it's gonna be a lot of testing refresh refresh refresh new game and we can join the same game that's the idea of the game and that's a 20 balls right 1 to 20. and you can join and you can join too you can just i didn't refresh this oh oh crashed something crashed games is not an iterable that's good so something crashed update game state actually failed guys what we need to do is essentially the problem with this is we need to get the keys of this right object to keys right we're looping through this is this is the games is actually an object of the game id and the content right so we we need these guys the actual values right so we're looping through all the keys itself which is just an array so we can just do so that does the trick and i know i had a similar bug with the states in the index dot html object dot keys loop through all the keys okay will this work join game and you should go join as well and you should join as well and we go that's a game state got the clients we have two clients nice i want you to update the clients boom oh oh the game started i don't see any crashes oh it looks like the game started there's a failure cannot compete on define the note object oh we're getting ours man we're getting errors state sweared yeah yeah that's the error response that game does state is an error why why don't you like this so you're receiving that yeah this is just failing see i got an error cannot convert undefined or null to object why would i want to convert undefined or not to an object response that is a response right don't we shouldn't we get response okay we have an error on the client in this case same error okay was was i was a little bit too late so i didn't catch the actual error here but it seems that this is null which is odd because that's what i'm going to send right here the payload is game update and there is a game state all right all right let's do it again it's our versatile we have assignment to a constant constant oh why is this a constant that's a problem should be let that's the problem all right maybe that could have caused the problem updating the state and refresh boom and again boom we get a const and refresh join game refresh join game and join game that will just immediately give us a result yes sir do we have a state oh the state is undefined i looks like we didn't even have a state we're assuming that we're having a state which is wrong yeah we don't have states on we do not have a state that's the problem oh my god look at that i'm overriding this oh that is the problem oh my god okay you saw what i did right i overrode the actual game with the state which is null in this case so the whole thing was just the whole thing just crashed so again third time is the charm and join refresh and join refresh and join i don't see any errors oops we still have theirs guys really i expected that why is that maybe i have to add like a check what do you do we need a play let's play boom boom there you go we at least have a state now hey we have state now yeah okay all right we just we forgot to play i guess i have to to capture the state when when we don't have anything really oh my god looks like it's working guys it looks like it's working we just got one and this is blue oh there's a bug i know what this is i know exactly what's going on i know what's going on we're starting from zero this is like a zero index kind of a bug right so when we're building uh the uh what is it id that id equal ball i let's just do this i plus one that that should fix the problem and while we're at it dot state well if this is if this is null i'm such a born head all right so then should be not okay we knew we get a new game i shouldn't fail that error doesn't really matter guys to be honest because it's just once you start playing now you don't see the error right but once you start playing now everybody should get this stuff holy moly that is nice that is nice guys now i have these three puppies look at that guys so this guy is the red this is green see you can see directly everything is updated that's exactly right websockets multiplayer game and you can take this source code guys and build on top of it anything you want you can make it into a url like i did right i'm not gonna make this video any longer than it already is it's probably like seven hours now okay but you get the idea right you can take this code okay and just build on top of it and just have the idea of what we built here it's just using just raw web sockets you can do all of that stuff i understand that building or like socket io can kind of simplify some of the stuff we did today but still it's really your choice you can choose any technology you want but that is what we build essentially right there might be some bugs but let me know guys and we're gonna see you in the next one how did you like this video hope you like it and see you in the next one you guys stay awesome what is going on guys my name is hussein and in this video i want to know what is going on behind the scenes when we establish a new websocket connection when we send data between the client the websocket client to the websocket server and what happened when you actually close the websocket connection and i'm gonna do that with the beautiful new toy that i just discovered that i'm really excited about it's called wireshark so it's actually going to show us exactly what's going to happen in the network and we're going to see all the calls and we're going to explain every single thing because that's what we do on this channel we try to demystify everything so guys what i have here is a beautiful websocket server and we talked about websocket in this channel check out this playlist right how to start with websocket what is socket really you need to understand all of stuff if you're a backend engineer all right and once you understand that you know how a websocket server starts and what does it know the connection upgrades and all that stuff you want to watch this video you cannot just jump into this video because without knowing what how websockets work but i'm going to explain it anyway in this video so stay tuned so i have here a beautiful websocket server running and listening on port it it because it's the best port ever and it's on my old raspberry pi this raspberry pi pi is from 2013 i believe it's so slow i mean it took me 13 seconds just to start the server so i have here websocket wireshark listening and i have here chrome because you know what because i'm going to write beautiful code here and as i write code to connect to that server you're going to start seeing the packets showing up here so the first code we're going to not write is uh let ws or connection i'm going to create a new connection and i misspelled connection that's embarrassing and then we're going to do connection equal new websocket object and the address is literally raspberry pi 1 and import 8080. and we're going to use the websocket protocol i'm going to zoom in here so you can see that now when i do that you can start seeing the flood of stuff that happening i'm going to explain every single thing that happened there right no worries the second thing i'm going to do here is i am going to hook in the message so that i receive stuff from the server just an event right and the final thing i'm going to do is i see you're going to start seeing some stuff there and then final thing i'm going to do is i'm going to send some information to the server i'm going to say sub server and the server is configured so that anything that it receives it sends it back with say got your message sub it's just a bunch of string and the final thing is close the connection awesome and here's our wireshark log how about we jump into it and demystify everything that has happened right and obviously at the other end you can see there's some messages here in the console we don't really care about what happened in the server we really care what happened on wireshark so let's stop the log and let's take a look at this beautiful thing all right so guys the first thing that happens and you guys first of all i want to thank every network engineer on my channel uh for correcting my stupid mistakes and and my uh really insufficiency when it comes to networking and i learned so much from you guys so thank you so much and now i i i can read the scrap better all right so the first thing what is this what is these three beautiful things why are they three it's called a beautiful three-way handshake because that's the first thing it's well wob sockets is built on http and which is built on tcp at least for http 2 right or an http one so this is built on tcp and tcp what do you do the first thing three-way handshake check out the video three one hand check how it works so the client which is 10 ip10 and the server is 81. what's 81 in french i forgot never mind so 81 turn to 81. so sin and the server responds with synack obviously right i'm gonna i'm gonna start my own sin sequence numbers and then i'm going to acknowledge the send that i just did and then the final thing is like okay acknowledging the send of the server so now the client and the servers are synchronized with the sequence numbers both of them know their each sequence numbers and they know where to start right so they can send a packet who's sending the first packet guess what it's the client and what's this a get request hey we know this stuff it's a get request yes that's the first request that there were that's the client does and it's called an http upgrade right it's an amp great hitter says hey i am about to establish we just establish a connection and hey server i want to upgrade this connection to a websocket connection so from now on we want to use the raw tcp connection as a websocket pipe right that is not true in hdb2 that is a little bit different it uses streams right this in http 1 1 which is what we're seeing here right where is the version 1 1 there you go right it actually hijacks the whole tcp connection which is extremely inefficient that's a different topic i talked about it a little bit but ask questions in the comment section so we can have a discussion all right i'm sending a good request it's around 500 bytes that's big like see all right and the server says yo i acknowledge your uh res that i acknowledge your request i just acknowledged i don't have a response for you now after a little bit of a time the server responds with switching protocol it says yeah now i do support web sockets and i'm going to switch the protocol and this is the text says okay i'm going to switch the protocol and from now on let's communicate with websocket right and this the client obviously now responses hey i acknowledge your acknowledgement of my acknowledgement that's switching the protocol right so it's just acknowledging the switching protocol all right and then everyone has like a acknowledgement number we don't really need to look at this anymore because we understand them and here's the thing we this is something i didn't run into when i actually first made the video offline this is like just not and it makes sense so this is a feature of the websocket is called ping-ponging so what the client what is actually not the client actually the server says hey because what i kept talking i established the connection and i kept talking talking and it says okay client are you alive and that's how the server know if the client is alive it pings it and what is it what this ping is it's a very small packet that just have very how how big is it it's really it's like a look it's just two by two bytes it's very small so the client pings it the server pings the client says are you alive and then the servers uh that cl so the server pings the client are you alive the client acknowledges the ping right see how how much shadiness is there guys when we make requests as software engineers we don't understand what's going on behind the scenes so now we're gonna we're gonna appreciate what's going on once you understand what's happening right so now i appreciate the ping i'm gonna pong you because the acknowledgements is not enough for some reason you can argue that this should be enough right why should actually send data if i acknowledge it that means i received it right so we can actually tweak the websocket protocols as like oh is the point really necessary and why is the pong six bytes jesus that is big pong man okay that's uh all right i'm not gonna say that because this video is gonna get more demonetized all right so yeah and then the server acknowledges the pong and then hey oops i get text obviously this is an unsecure connection i'm going to make another video wire sharking tls 1.2 or wireshark dls 1.3 but for now look the client is sending some text and it's around 9 bytes what's the text says sup it says sub it's nine bytes but i sent three bytes so the rest of stuff is just garbage of the websocket header i guess and the server now says yo i acknowledge your sub that's not a response that's just an acknowledgement of the request i say i got it i'm processing it now that's our code kicking in on the back end and the server is now sending some data to the client and the client says get your message shop that's the exactly the message that we got from the server and we saw it in chrome right so yeah we got the message back it's awesome right and then the client sends something else what is that what does the client send it acknowledges the get message that's just just an acknowledgement that we receive your got your message stop right so the server knows okay we got it now this is the exciting that's the most exciting part here and afterwards so here's the thing the client initiates the close remember when we said it's right there right connection to close right that's the client that's me and closing the tcp this web socket connection all right so the the websocket connection is now the client actually sends is just another websocket data to the tcp stack right i am sending a request to close the connection okay and uh yeah that's just the headers of the websocket stuff and the server acknowledges that we received your request that happens to be just data for us that you want to close and now i as a server i also want to close and here's the message that i want to close that connection so it's almost like the fin and finag but at the data the edible application layer right we're at the warp socket here and we're just playing here so the connection technically is not really closed it's just a bunch of data right and now at the websocket protocols cleaning stuff up right and here's the here's the most this is the most powerful part and i think whoever designed the websocket protocol is smart because of that the client initiate the close but look at this the server obviously there's an acknowledgement obviously that from the client that we received the the last message but here's the thing the server is doing the actual physical thing to close the physical tcp connection so here's the was like a logical close and here we flipped it the server is closing the connection and i'm going to explain why and i think i i think that's the reason when the server closes the connection whoever closes the connection first end up the other party end up in a in a tcp weight state which will be there for around four minutes to receive all the garbage delayed segments and all that stuff and i didn't really talk about tcp waiting and i'm going to talk about another video but that's a state where every tcp connection will go to in in order to clean things up it's a lingering mode right so what we happen here is like the server is doing a fin act and we know why every what every data that server does is always acknowledgement so that's that's just a free bit that we set to acknowledge stuff that we haven't done in the past right you might and acknowledge my got lost right because there is no acknowledgement of an acknowledgement unfortunately right here's that so yeah finnec the server is doing the finance the client says okay i acknowledge your fan and here's my fin x so i am responding to your fan and the server acknowledges and immediately terminates safely right this way the server the websocket server especially right if the client initiate the close the connections it will not be it will not it will not end up in a state where the all this tcp weight state or or overwhelming the memory of the server right in this case this the tcp weight state will be in the client side and that that will be a little bit better and that i didn't know that to be honest i just know it when i made this video all right guys so that was the wire sharking web sockets uh just a little bit of closer look of what's happening in the back end when you really establish a tcp connection and do some websocket connections right right so yeah i'm i'm not sure what happened if that cli if the server initiates the close that would be an interesting video to make and then just analysis and let me know guys if you like this kind of content and uh i'm gonna see you in the next one you guys stay awesome goodbye what is going on guys my name is hussain in this video i want to talk about how websockets work with http 2 yes it for a longest time we always thought that why reinvent the wheel we know how web sockets work with http one which is i'm gonna explain now in a second why can't we just use the same method there's a very very good reason there are a lot of smart engineers sitting down and building great spec to squeeze every single performance out of everything right and this is one of them this is the what i'm gonna about to explain is rfc request for comment eight four four one how about we jump into it lights on guys all right so uh this rfc is called the bootstrap boot scrapping bootstrapping websockets with http 2. all right guys but before we talked about that i want you to have a little bit of an idea how http 2 works if you don't check out the video here right here i think it's right here yeah check out the video right here to learn more about httpc is very critical for then for the point i'm about to make however http normal http traffic one one with all pop sockets work as follows okay i am a client this is a mobile phone and this is a websocket server say this is the websocket server what you every websocket server is a web server that means it's listen usually in port 80 or 443 and you can listen to any port really really and what would we do with the client establishes a tcp connection between uh itself and the web server and then it attempts to communicate using just normal git request and the first get request that sends it says hey get request this is a normal http traffic right get request and in the header says here's an upgrade header i want to upgrade this pipe that i just created right between moir and and i want to make it into a websocket server do you support this or not that upgrade request which is nominal good request that upgrade request reaches the web server and the web server says wait a second i don't know what the heck is the swap socket thing so i don't know it will just ignore it or if it does know what a websocket says look yes i know this is going to reply with 101 i believe for the status quo says switching protocol sun it's going to say that and then from now on that tcp that beautiful tcp connection that we created is just now reserved for this websocket you can't do anything with them so if you want to send a git request to obtain a css file or javascript use another size use another tcp connection you cannot use this this is reserved for the web sockets right and that's uh that's essentially how websockets so now the server can send garbage to the client the client can send garbage to the server and they can communicate with information all right so that's the idea of websocket obviously with http one one one establishing tcp and having it only does one thing is a little bit waste of memory right and waste of resources because tcp can does can do so much for us right and we're using it for just a request response and yeah the browser does this silly thing that's called pipelining and and it just establishes six tcp connections but where this is over now http 2 have one tcp connection between the client and the server and you can multiplex multiple multiple from the site multiplex multiple requests into the single pipe that we built so you can sell a request to get the index to html a request to get this uh javascript file and the css and and your pdfs and everything your apis your jsons all of them can be multiplexed together and you might say who's saying how though right how how do i know if there if you're sending everything in the almost in parallel how do i know that the reque the responses that comes back from the observer are for which request you don't know right because they can come out out of order here is where the idea of stream tagging and i don't like that war stream to be honest i i prefer what rabbit mcq named it channel but it is what it is that's what google did right google is all mighty sam they decided speedy is called this these are called streams so we're following those call streams so yeah these are called streams and every single stinking request will get a stream id so if the request resp the server responds back with the data for that request it will tag it with that stream id i don't know what the hell what is that about sorry so yeah we'll see every response will have a stream id so if the client will come back we'll say okay this is stream id oh this is for this guy this is for this client this is for this client and i will start doing that it's beautiful it's a beautiful design a little bit of unlimited limitations that i talked about here tcp and http 2 limitation check out this video but regardless it's beautiful one tcp connection for many requests websocket right the og websocket client comes it's like yo what's up i want to make um upgrade request and goes into the pipe right imagine we don't have this new rfc and the server go that says yeah i support websocket server and we'll reply back with the websocket upgrade and they will say yeah okay let's do that okay let's use this tcp connection as a whop socket i was like whoa he's like the browser says wait wait a minute wait a minute what the heck are you talking about i'm using the same tcp connection for 70 other streams and requests you cannot just hijack the whole tcp connection for your stinking websockets chatting gaming session no sir no we need to find a solution and that's what browsers do and i'm not sure if actually they implemented this or not it says here mozilla actually proposed this thing pretty neat huh so mozilla proposed this this like you know what web sockets will act differently we want websockets to act differently in http 2. and here's what we want you can still do the same thing we cannot no we can no longer do this upgrade thingy because it's a little bit different upgrade behave differently but you can still use another git request using another method called connect and using that tell us what what protocol you want to use and when we get it to the the other side if the web server supports http 2 it will know to use one stream one thread just for warp sockets on the same tcp connection isn't that cool right this is pretty cool so they have to see the cmtcp connection one stream one channel i i'm gonna call it channel because i hate the word stream stream what the heck stream means or is it river no i don't like the stream i'm gonna call it channel so yeah so that stream will be essentially just for websocket another stream for your get request another stream for the post request another stream for the put request another request for the delete another request for everything right so we still want tcp connection with every single thing so that's an idea of bootstrapping websockets with gdb2 instead of hijacking the whole socket to do one single thing right we're gonna reuse it and reuse it to do multiple things all right guys gonna see you in the next one you guys stay awesome

Channel: Hussein Nasser

Views: 18,395

Rating: 4.9786911 out of 5

Keywords: hussein nasser, backend engineering, websockets, websockets vs http, websockets game, websocet crash course, websockets vs grpc, websockets vs tcp, websockets http chat, websockets chatting app

Id: XgFzHXOk8IQ

Length: 334min 45sec (20085 seconds)

Published: Fri Jan 01 2021