Scaling and Securing WebSockets with HAProxy

hey guys what's up I want to make a new video talking about WebSockets but I want to dive into an area that we haven't talked about in our previous videos about WebSockets which is I'm gonna reference below detailing about the pros and cons of WebSockets and applications and all the code that we have written right but we have not talked about how to do WSS which is WebSockets secure and that's why I want to make this video in order to show you guys how to do WebSockets secure or essentially it's just WebSocket over TLS connections and I'm gonna use a share proxy to do that I'm going to show you how to do that right I'm not gonna write any code I'm gonna reference the code we have done in the previous episodes right or we talked about WebSocket and here's the code in order for us to get hub repo and I'm gonna show you how it works and then slowly we're gonna add a public IP address and we're gonna add a domain a public domain that points to the public IP address and then we're gonna 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 alright so here what I have here are node.js application that acts as a know 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 that the vanilla stuff and she see how this server works right so I'm gonna go ahead and start it buggin here and when I start debugging I'm gonna listen to port 8080 on my macbook here or my machine which is one two seven zero zero one or the local IP address so how about we go to Chrome and consume that what that what this applique does is the moment you start connecting to this server it will essentially have some events and we talked about the oldest 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 will also send a message every five second the server sends a message to the server to the client every five seconds because that's that's the beauty of WebSocket 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 gonna write all the code that I need from here because I'm an eye man I'm a simple guy like that okay so let's go ahead and declare a web socket here and then what I'm gonna do is whoop socket equal new web socket that's a built in class in every browser and you can just do WS which is stands for web socket okay this is the protocol and then we do those seven seven seven eleven 8080 okay and when you do that the browser will send and the first HTTP request as a plain HTTP GET request with an upgrade header saying hey by the way it's an exterior quest but I want to upgrade this to a WebSocket connection and and if the server's smart enough to understand what a protocol upgrade is it will upgrade the protocol and return a code 101 was I wouldn't want to forget where they switching protocol header status code and this will to work on my server which I just wrote is smart it understands upgrade so will actually upgrade the connection alright so we'll do that and let's just listen on a message on the client itself say hey a call console dot log that essentially means the function you can as you're destined to assign a function that will be called every time that client receives a message okay and then in this case is just hey you can see right every five second with getting your message so again we're getting these messages from the server pretty cool all right pretty cool so if I clear listening we'll start getting the message but if I do w is the sent I can send something to the server hello and I'm gonna say get your message hello got your message hello the server send back the message right so that's WebSocket in a nutshell boring boring stuff okay so our user what I want to do I want to do this as a WebSocket secure but then there are so many layers because this is out first of all this is 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 flow freely on the router please forward them to this laptop this local machine which is hossein my coaches the machine I am running WebSockets 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 library so port 80 from the public internet on this public IP address will go to this this will go to this this is very critical for than our order for the next piece okay what are you saying 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 is a beauty port so how about we go to our beautiful edge a proxy which is a beautiful badass proxy right and I made a video about that a proxy our video about engine X 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 a proxy okay so let's go ahead and go to the command prompt and write a config that listens on port 80 on my machine and forwards the traffic to my website server how do we do that very very simple a proxy support to that I'm gonna explain how it does that okay so obviously we're gonna need to create a config so I'm gonna create WS the CFG a config file it's an empty I'm gonna create a front-end I'm called WS and the mode is HTTP I'm playing on the layer seven here and you might say who's saying 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 a chip proxy is smart and does that very very intelligently so I'm gonna create a timeout client timeout I don't know ten seconds whatever that's the time out after which we will give up the connection that's this these timers are very important guys we're gonna talk about them in a minute right so I'm gonna bind on all ports 80 and I think that's it right and the backend I'm gonna create a WS back-end right and let's do default back and here is the W is back-end Ryan just point this guy to always to go to this guy and what is the backend here well you guessed it guys it's a server that is named s1 or whatever you can create multiple this one as servers here and it's important one two seven zero zero one okay and it's listening on port you guess that 8080 nice we need some timeouts here timeout connect how long should I wait before I give up connecting to that back-end server okay yeah ten seconds or whatever and timeout server and this should be really high okay okay I'm 1,400 seconds this this is the timeout after which if I didn't receive anything from the backend which is this guy as a HEA proxy if it didn't receive anything from this guy Colet all right so let's do that and let's just this out guys let's dis this out right so let's go ahead and do a chair proxy - f WS to see if and we gotta get yelled at because we didn't we forgot to do the mode for we for God to do the mode on the server yeah it's an incompatible mode both of them are playing on the HTTP layer here on the under layer seven okay now 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 forward to to one tenth of it including WebSockets requests so let's let's test that out so now if I do this right and 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 clarified in a minute this is the local because the ship rocks 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 get request says hey I want to upgrade the connection it's a HTTP request HF proxy detected that I says oh it's a normal suit Iroquois so yeah I'm gonna do a load balancing on the backend 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 H a proxy did establish the connection but here's what HF proxy also does so it's a proxy remember as a layer seven proxy it terminates the connection right between the client and itself and establishes a brand-new connection and plays with those in the backend right as a round-robin or based listen the back-end load balancing algorithm okay but here's the problem now WebSocket is a stateful protocol right so and it's a proxy knows that so it says ok once I upgrade the connection I'm gonna hook you up with one TCP connection there is 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 ok because you cannot every web socket connection not connection everywhere socket requests right dozen that shouldn't go to another server otherwise the whole thing is gonna blow up right because other back-end servers servers could be used for other stuff as well so that's just that's this thing and message it console.log and you can see that it's just normally working ok cool we have port 80 okay running still this is boring that comes back to our public IP address what is my public IP address 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 alright now this second because that's my public IP address 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 ok and that that works too and that's the step one we're one step closer to the final goal to do a WSS all right I like to explain everything guys and if I do that I test look at that works and if I do this if my for example hi Maya phone support swap circuit as a client I can do this today and you want know what 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 remains 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 socket side the DDS dotnet so if I go here and I do this and I say first so you can see why do this now arcs to because that domain is also pointed to my public IP address which points to my router right and says ok port 80 because W is right we still unsecure here insecure the poor lady on router points to my H a proxy for learning on port 80 HF proxy looks at that it says ok this is port 80 I'm supposed to forward it to this thing 1 to 7 for 8080 which is my code here and this is all happening right this is all happening right now okay all right that whole photo blog 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 check out the edge a proxy there is a specific way of creating a certificate using the let's encrypt 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 going to W this is my certificate my WebSocket sighted p.m. 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 what port is that that's right it is 443 and 2h a proxy this is just another port you have to tell it that by the way this sport is special because it is an ssl port okay this is where I'm gonna do the secure socket layer or TLS right this is just like us his stuff they cannot just change it all of the blue so that's why they have to say this is up that's what you have to say this itself and then you have to tell me which certificate is not enough right because well who are you as a server I need to trust you alright this this is why we have a certificate authority to begin with and where is my sister it's in there users I say no sir it's a proxy and hopefully I can remember my WebSocket side of BM okay that's it I'm not gonna play with ehh HTTP to yet LP and all that stuff so this is enough for me still let's play on h1 because it doesn't really matter because WebSocket is its own protocol right and save and if I do HEA proxy - f WS dead so of joy you can see I'm gonna get yelled at saying hey this certificate that you generated is actually a difficult man but the development is actually I think it's just sailing 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 ok all right guys how about we test this thing final thing ok so now my whoops so kids technically is secure so I can do this I still can do this that works see it's not yelling at me but I can also do this ws yes and what WebSocket client will do okay you want to WS s protocol that means I'm the default port for WS s is 443 so I'm gonna try to connect the W on 443 it's gonna ask the DNS get the public IP address which is my router IP and then it's going to establish a TCP connection okay to 443 which is on my router and there's a rule remember 443 forwarded to 443 on my macbook which is running at a proxy which is listening on port 443 which is a secure secure TLS beautiful stuff if I do that works and now your 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 was researching the GRP sea video and how to do that and that thing is a beast and 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 to these protocols arrests and and then well the rest is not protocol but sure yeah so wrath and graph QL and WebSocket and gr PC they are all related so in fact it's like let me just make a video for you guys for this Friday I don't know which is 27 whatever right and then talk about just what sockets secure I'm talking about a little bit of how WebSockets works and then maybe next week we're gonna talk about G RPC when I'm ready okay when I'm a little bit more educated about the topic alright guys I hope you enjoyed this video give it a like and I'm gonna see you on the next one you guys they all sing

Channel: Hussein Nasser

Views: 19,400

Keywords: websockets secure, websockets, wss://, ws://, tls, port 443

Id: Rf6AfhqJKxg

Length: 19min 41sec (1181 seconds)

Published: Fri Jan 31 2020