Managing Web Socket Connections

[00:00:00]
>> So let's head back over to server.js. Let's talk about socket.on data we're gonna say server.js socket.on data. We're gonna say const, message equals parse message. And we're gonna pass it that buffer that we got from the client, right? This thing right there, right. That's getting passed here into that.

[00:00:32]
And this is gonna end up being the message, right. The thing that we actually got back from the client. And then we're just gonna say if message because maybe like they sent like an empty frame or something like that. That'll definitely happen. You're going to say if message sending us a Message.Push.

[00:00:54]
Message.user, message.text rather. And then a time which is date.now. All right. So now, our socket is now accepting data. It's storing it all that good stuff is definitely happening. So just to kind of prove my point here. We're gonna go back over here to our chat. And we're gonna say hi from the socket.

[00:01:37]
Now I'm gonna submit. Nothing's gonna inform because we haven't actually pushed this back out to our clients yet. But if I refresh the page, we'll see it right. Because on that first page, loaded loads, all the messages, right? So, if I do that and refresh the page again.

[00:01:52]
You'll see here again that we're getting the new messages every time that we refresh the page. Because we're doing this socket.write right here, right.? So, we're getting closer. But now we actually want to inform all of our various different users. Whenever a new socket, like new message comes in, that it broadcasts out back to all of our clients.

[00:02:14]
So we're gonna do the exact same thing that we just did with the HTTP two clients. And we're gonna keep track of all the connections. So we have our connections array up here, right? And then inside of the Here we're just gonna say connections.push, socket, right. Under the socket.on data, we definitely want to say socket.on end.

[00:02:54]
Like whenever the socket ends, we just wanna remove it from our active sockets. So we're gonna say same thing here connections equals connections.filter socket S is not equal to R socket Right, so we're just gonna filter out the existing socket that we had using the exact same kind of logic and from our previous example Okay and then inside of here on the on data what we wanna do, inside of this if message, right.

[00:03:35]
What we're gonna do is every time that a user pushes a new message in here we're gonna say connection.For each. And again, you can do a For loop here. That would totally work as well. Or like a For of loop. Yeah, For off loop would work right here to.

[00:03:54]
For each and we're just gonna say Connections, sorry, not that. We're gonna say for each socket on here. We're just gonna say socket.write object to response. And we're just gonna write out the message with get messages. Right, so now every time that we got a new message in here it's gonna go through all of our connections.

[00:04:38]
And it's gonna write to all of those open sockets, all of the new messages that are coming in And the one thing that is like what happens if messages No, right? So if we get back no from parse message or something that we don't recognize. If you remember here in our parse message.

[00:05:03]
If we return one, if we get an opcode, eight, we just return No. That means connections closed. Everything's done now, right? So what we're gonna do, is we're gonna come back over here. Say if there's no message, so else if message triple equals No. Then we're gonna say socket.end, right?

[00:05:27]
Because we got an opcode eight. I mean it's cool. It's time to shut it down. And that's what this will do here. And what's cool is it actively calls socket.end here. Then this will get fired and automatically it'll get cleaned up as well. Okay, last thing to do here just super quick over in raw chat.js.

[00:05:47]
We're gonna add one more listener for a closed WS, add event listener, close. And we're gonna say presence dot inner text and we're gonna make this a red circle. Whenever the socket closes, we wanna tell people by the way the socket is closed. Okay, so let's pop over to the chat with me here.

[00:06:23]
Now if we send messages here. Hopefully they should start coming in from all the various different sources right? So let's open a second window of this. And if I can see it already comes in here. Let me say that. Now if we go back over here, you can see it's automatically pushing back and forth from both of them.

[00:06:55]
That is writing Web Sockets by hand. Which again, not gonna suggest that you ever do this again. Probably shouldn't have done it this time. I'm being honest. But I think it's super interesting to know how it works into like you'll be a more aware of how you can like squeeze more performance out of sockets if you need to.

[00:07:16]
If you need to drop into lower layers for any reason whatsoever. Knowledge is all there for you. And I guess what I wanna say is we're about to do socket.io. And you're about to just be absolutely floored of how easy socket.io is. We take something really difficult we made a really nice abstraction for it.

[00:07:42]
Yeah.
>> Where are we pushing the different connection sockets to the connections array?
>> It is here, line 46. So we write the headers, we write the first response to the connected user. And then we push them to active connections. And then down here we removed them whenever they're done.

[00:08:12]
Yeah, question.
>> I was just curious because touch the WS package before. I was wondering if you could share your thoughts. I know socket that I was easier apparently to implement. But I wanna know you pick, like according to you, like WS? What are your opinions?
>> Yeah, what do I think about WS?

[00:08:31]
I actually talk about it at the end of the course. So if I don't sufficiently answer your question, then ask the question again. Finished version of the app to be found here under a WebSocket/raw. I mean, everything that we just did together is there. I mean we have a working WebSocket connection that we totally wrote by hand.

[00:08:51]
So you can definitely be impressed by yourself right now.