Establishing a Socket.IO Connection

[00:00:00]
>> Let's go read some code. So again, make sure you're in the websocket/exercise-socketio. Directory, I'm gonna go get there myself, close these. I'm gonna go over to exercise socketio. Restart my old server here, and I'm gonna get into exercise-socketio run your NPM install So here we have socket.io that we're installing.

[00:00:38]
And then I think the rest I ended up writing with express just because it was really easy. The one thing that I will call out here in index.html is down here. I'm actually loading the socket.io client off of their CDN. Normally we just have the build process with like parcel or Webpack.

[00:01:04]
We're not doing that today, just trying to keep it really simple. So here inside of your socketio chat, you'll have a global called IO. That's just available to that's just so, that's where that's coming from, is we're loading it off the CDN. Okay, so let's head over to server.js.

[00:01:29]
Notice we don't have any of our helpers because socket.io will handle all that stuff for us. And we have this server primitive that we're getting from the socket.io package. So one of the first things first is we're creating our static assets here. So actually I don't think we're using express really at all.

[00:01:52]
You can use socket.io and express together. But for our case, all you needed to do is serve static assets. So I just did that right there for you. Okay. And yeah, just to emphasize this is going to be like a 100 times easier than what we did before.

[00:02:17]
So, where we go says code goes here, what we're gonna say is const io equals new server. We're going to pass in our server and no options. So you can create a new socket.io server without an HTTP server, but it will reuse the same one if you already make one, right?

[00:02:44]
Because we have to serve static assets up here. We're just going to reuse the same server but that's something that socket.io can technically handle as well. Okay, and then here we're gonna say io.on. Connection, I don't know if you'd say that io but that's what I'm gonna pronounce it as.

[00:03:07]
Socket. And then here we're just gonna say console.log. Connected. Socket.id .d And then we're gonna say socket.on(disconnect). We're gonna say, console.log, disconnected, socket.id I mean, this is pretty close to it for starting a socket.io server, right? So now we should be able to start running our server, npm run dev.

[00:04:11]
And see here we're running on 8080 again. Nothing's happening on the servers, I guess if you can come back over to the client and this will load right, nothing else is happening here. But it will load the page cuz it's serving all the static assets. So let's go back and go into socket io chat in our front end.

[00:04:40]
And here we're gonna say const socket = io and remember this is being loaded globally, http:// localhost 8080. This will know to connect an upgrade to aws and all that kind of stuff. We don't have to handle any of that. We can just say connect to this and know you figured out using smart.

[00:05:08]
And then here we can just say socket.on connect. Consoled.log connected. And here we'll do our presence indicator as well presence.innertext = green circle. Same thing here. socket.on disconnect We'll just say same thing but go to the red circle. Okay, then here you'll say red circle. Okay, so, servers running on 8080, we should come back over here, refresh the page.

[00:06:23]
And notice that our green circles connected. If you look here, this is connected here if you see down here, connected, this is going to give you a unique identifier per socket. These ones are not reused. So you'll see these being unique every single time which is good. So here's a really cool thing that you might have noticed in our other examples, like the Ross socket one, the HTTP2, all that kind of stuff.

[00:06:50]
When we disconnected, we did not retry, right. We did not attempt to reconnect, right. We would have had to write that logic that's detected, okay. I just connected, okay. Now I gotta go and retry and reconnect and do all those kinds of things. socket.io just does it for you out of the box.

[00:07:06]
So, if I come here and cancel this right, okay, now I'm red, right? Because that's disconnected I'm gonna come back here and start my server again And eventually might reconnect there you go, just reconnects. That's pretty cool like in of itself like this socket.io is already worth it to me that I don't have to go rewrite reconnection logic.

[00:07:35]
Like we had already talked about back off and retry. It's the word it's just not, fun code to write, read, this just works for you out of the box. I don't know I love it. So that's the nice thing here is like if we come in here and save our code and make, like make our server restart.

[00:07:52]
So you notice here I restarted my server. You can see already down here, it just reconnects, I don't have to do anything about it. Just by having that window open. So, first advantage they're handling all that kind of just stuff you never wanted to think about for you.

[00:08:10]
And you can turn that off by the way it's not. I think it's retry or something like that you can turn off those retry connections. But why would you? Yeah, I'm not gonna show you this right now. But we already talked about it that if my browser did not support WebSockets it would actually start pulling.

[00:08:31]
I wonder if I could, I don't know. Let's try this const this is a terrible idea. WebSocket, window.websocket=no. I have no idea what's gonna do. Sorry this is gonna go on the socket io chat. So now we're gonna come over here. Let's actually go into our network panel and see if it's actually doing polling or something like that.

[00:09:12]
No way it actually is. So there you go, you click on this you can see here the transport right there equals polling. Didn't have to do anything just ended up working that way and notice like all the same logic still works. It still says connected it's still running like the on connect.

[00:09:29]
All the on data stuff is gonna work the same way. Just works. It's subtracts away the idea of a connection for you is just like, look up, we'll figure it out, right? You go read your code and socket.io is gonna figure out the rest of it for you.

[00:09:45]
Okay never do that it's a terrible idea, but it was definitely fun to experiment with.