Raw WebSockets Setup

[00:00:00]
>> So we just wrapped up HTTP two push. The finished version can be found in your project. Your exercises, it's this one here called push under HTTP/2. So that's all the code that you and I just wrote together. And that is it for HTTP/2 We're gonna move on now to WebSockets.

[00:00:28]
And we have two exercises in here one we're gonna be doing raw Websockets. And then after we're done with that, we'll do socket IO after that. So the next part, make sure you're in this exercise dash raw folder and run npm install on there, and that's where we're going to start.

[00:00:50]
Okay, so now that in your real time exercises, exercise rod directory under Websockets. Let's talked about the truest real time that we've talked about so far. Pulling is obviously very close to real-time because you're just making a lot of requests about, to the same polling endpoint HTTP/2 is real time in one direction, right?

[00:01:17]
That we're pushing from the server to the client, but it's not in the reverse direction, right? That's still like a normal post request, let's get into like the best tool for the job. I've shown you the other ones because not every server is gonna be able to handle either HTTP/2 because some of them just don't work with it yet.

[00:01:40]
And then pulling like even if you have like an old system can still work, right? You just have to make an endpoint that can handle a lot of requests. There's no special needs there, we're gonna get into websockets, which is a particular technology and not every server can handle it right?

[00:01:54]
Like we wanted to do it originally at reddit with websockets. It being the real time chat that we were doing, and we ended up not because our server wouldn't be able to handle it. And eventually we actually had to spin up a second server that just handled websockets.

[00:02:07]
So that's why I'm showing you all of these so you can kind of pick and choose the best tool for the job here. But honestly, this is kind of the holy grail here. The websocket is gonna be the best cuz it does real time communication. In both directions, right from client to server and from server to client.

[00:02:23]
So a websocket is just a primitive It's just like another thing that you can create in a browser that connects to a special kind of connection. And honestly, at the end of the day, it still connects over TCP IP at least to get all that first handshake stuff all worked out.

[00:02:40]
So, a lot of this is still gonna feel really familiar. And what we're gonna do in this first part was we're actually going to go pull it up here in my intro real time. We're down here in what intro websockets If you ever took my containers course on front of masters, we actually go and craft containers by hand, which one would never do right?

[00:03:09]
You would always let docker do that for you. We're gonna do the exact same kind of approach here to websockets. We're gonna go craft websockets by hand, which is objectively terrible idea. You should absolutely never do this and we're going to do it because it's super fun. But there's so many libraries that do this so much better and there's honestly there's so many edge cases to websockets that you really do want someone to handle it for you.

[00:03:30]
But it's gonna be fun to go put it together ourselves, so when happened the websockets back end portion here. We're gonna hop over to our code and get a little familiar with it. So you can close all of your HTTP/2 stuff. Say don't save. Exercise raw here. And we are gonna get into back end No, actually we're not, we're gonna get into the front end first.

[00:04:08]
So we have a file here called raw chat. This should all look fairly familiar up here too, it's kind of all the same stuff. I tried to keep it as similar as possible, the same form submit. We're gonna write a post new message function. We're going to write a,kind of a get new message function over here.

[00:04:28]
And then we have our render and we have our template. That's all here.So luckily, the browser actually implements most of the websocket stuff. For you on the client side as in like there's a native object called a websocket object and that just does everything for you. So we really don't have to do very much on the client and thank God because it's you're gonna see on the back end there's a lot to deal with.

[00:04:53]
So here you can delete this your code goes here part. We're say const WS equals new websocket again, this is just built into the browser. It's not a library or anything like that your browser just has it. And you're gonna put WS which stands for websocket protocol as in it's not HTTP, slash slash localhost colon 8080.

[00:05:23]
And then here you got to tell what protocol is you're gonna deal on. We're just gonna deal on JSON, there's nothing like magical about this. It's not like JSON is a thing that the websocket object recognizes. It's just gonna pass this up to the server, the server is gonna say, okay, you want to speak JSON cool I know how to speak JSON.

[00:05:43]
But like, for example, let's say you had an endpoint that could handle either JSON or XML, you could do this right? And then the server would choose like okay, I know how to speak XML but I don't know how to speak JSON, right? And so it'll pick the one and then send that back to you.

[00:05:57]
Here you're just identifying, here's everything that I know how to speak, and then the server will pick one. In our case, we're just going to do JSON, but that's what that's for, okay? So I got a websocket, this will open it, this is a rather this will create the object and then here you have to say ws dot add event listener.

[00:06:20]
Open so on open events, run this function and we're just gonna say console log connected and presence that in your text equals our green circle. Okay, so I mean this is enough for us to get up and going. You can see here from the client perspective, pretty minimal, right?

[00:06:55]
This websocket objects really good, It's really new so it's nice to still. Now you could try and run this in the server, it wouldn't work. Because we don't have anything on our back end that's willing to handle that yet, so we got to go do that first. So the thing to know about how websockets work, what this is gonna do is it's going to connect via TCP IP.

[00:07:20]
So via HTTP, it's going to make a connection to your server. To some endpoint, and then it's gonna say, hey, endpoint, I wanna upgrade this connection, right? And then it's up to your server to say, okay, what is upgrading mean? In our case, it's connect as a normal request.

[00:07:37]
It's gonna send an upgrade request, and then the server is gonna say, cool. I know how to speak websocket, and then it's gonna connect there, right? So that's kind of the handshake process that goes on there. We don't have to do any of that on the client. This new websocket object here just handles that entire negotiation of trying to get into a websocket connection by itself.

[00:07:56]
However, node by itself does not do that, you gotta do that yourself. Or rather, most of the time the library does it for you, but we're gonna do it ourselves.