How I like to setup websockets in my web applications (2023)

Introduction

💬 Discord discord.gg/4kGbBaa
🤑 Patreon www.patreon.com/webdevjunkie
🔔 Newsletter eepurl.com/hnderP
📁. GitHub github.com/codyseibert/youtube

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

Content

How's it going everyone, so I have been kind of doing web sockets and building out a game on my live streams on Sunday mornings, and I wanted to kind of give you a quicker, smaller overview tutorial about how do you set up websockets with vanilla.js in case Anyone is trying to learn how to do that.

Um in my project, I've been using something called socket IO, which is a library you can use to basically set up it's kind of like websockets and it's not 100 the same implementation as websock.

As you can see here, it's built on top of websockets protocol and it provides some additional guarantees, like fallback to http long polling.

So it's a library that really helps you build websockets.

If you follow the docs, it's actually pretty easy to get going um and how I got it set up.

Is I'm going to just cut to the code and show you real quick? Typically, you have a server and I'm going to be using node in Express to kind of wrap this websocket server and host a bi-directional communication between the client and the server.

So if we go to my server code, it looks like a lot of code um from the get-go, but it's really not too difficult to understand.

So, first of all, let me show you: I have a project set up with npm, so you can get this going by saying npm in it.

Y and that'll create this package Json right and inside this npm script.

I created a Dev script, which is just going to run node mon on this index file, and then I also have a start script which will just run the same index file.

So if I go down here and run this I'll say, npm run Dev.

That's going to host a server on Port 3000, which is going to run my websocket server and then also Host this public directory.

So let me, let me show you this index.js and kind of walk you through the code.

So this is requiring the Express package.

It's creating an Express service, but then it also starts setting up a websocket server using socket IO.

So we have to create an HTTP server using this HTTP module, that's built into node, and then we create a server by passing this Express app.

That gets us back.

A server object or we get a server Constructor from this socket i o package.

We pass that server into this.

We get an i o object and then we can actually start doing things with the sockets.

So all this is kind of boilerplate.

You don't have to memorize this.

You don't have to like really know.

What's going on.

You just have to copy this into your project.

But the thing that's important to understand is this: i o object.

So when you have this, i o object.

You can do dot on and you can start listening to different events that are coming in from the client.

So typically, what we do is we say on connect and then, when someone connects to your socket server, it prints out a message here, and you also have access to this socket object, which is what we're going to be using the sending messages back to the client And then um, we listen on Port 3000 and then we also host all the files that are in this public folder.

So this is just like a normal express application.

So if you're kind of familiar with Express, you should kind of be familiar with this code.

Um and let's look at the index.html, because this thing is also being hosted.

So if you look at this file, this is all there is to it.

Um.

The important part down here is that we are importing a script from socket IO, slash, socket io.js.

If you notice here, this is an absolute path, what this is doing is wherever this file is hosted, it's actually going to make a request to this localhost, 3000 or whatever.

So, just the the fact that we basically set this stuff all up, it's hosting a file for US automatically that the client can just import directly and then get set up with dockets.

So this is all the client-side code.

You really need to be able to start using sockets if you're, using vanilla.js with reactor view it's a little bit different.

You probably have to import a separate npm package, get that set up um and but then on line 15 when you call socket equals IO.

This is going to connect to the websocket server, that's running on that same host.

Okay.

So if you decide to have your socket server running on a different location or a different port, then you probably have to actually pass in a URL to wherever that is.

It could be like a websocket URL like this, but anyway, if you leave it blank, it's just going to connect to your local running host, which is typically what you might want um.

So with all that being said, once you have this socket object, you can also do a DOT on connect and this is going to call a callback function when we are successfully connected to the server.

Let's go ahead and just go clear.

This console and I'm going to go to the UI and I'm going to refresh the page.

I want to show you what happens in the network tab.

So if you're not familiar with this network tab, there's a WS toggle, you can click and when you click it, it's going to print out all of your websocket connects and connections that are created against your server.

So if you look here, it's doing a request to this websocket URL localhost 3000 socket IO, and if I go to payload or messages you can see the different messages that come in from the server now.

In this case, we haven't sent any messages from the server, but we will be able to do so.

So all we're going to do is we're going to keep this basic we're going to go ahead and make a button on the front end.

I'M gon na call it ping and when someone clicks on this button I'll give it an ID of ping button, we want to make it so it sends a message to the backend that says ping okay.

So this is like how you do a ping pong setup.

So in JavaScript I can say: document.add uh.

Actually, I could say git element by ID, pass it ping button and then I can say add event listener and I can say click and then I'm going to go ahead and just do an anonymous Arrow function here and I'm going to say, socket dot emit and Then I can go just go ahead and send the first argument, which can be any string that you want in our case we're going to name it ping, but you can name this whatever you want and you can also send some data over.

So I could say like five or I could say hello or I can send an actual object.

So I'll just say, like name is Bob okay.

So now we have this event listener set up.

So when we click on the button, it should send out a ping message now at this point, we don't really need to connect anymore.

We can kind of comment that out and get rid of it.

So, let's make sure this works.

If I go and refresh the page, we should see a ping button, it's a little small.

So let me zoom in and if I click on this websocket transport, if I click on this button, you'll see down here in the bottom, it tried to send a ping request to the back end.

Okay, like this, and if I click on it.

Hopefully, it's not cut off on my screen, but you can see down at the bottom.

It sent a ping and then also a name, so we are successfully sending some data over to the back end.

Let's look at the back end now because the back end doesn't know how to process that yet right now, all we care about is connecting and disconnecting.

But if you wanted to listen on the event that we just created inside of this callback for The Connect, you can say, socket dot on and I can say ping and then we're going to get back a data object which will be whatever the the front end Decided to send over which I believe has a name in it, so I will say, got ping of data.name now I want to point out that this socket object is the individual connection to that client.

So if you have, for example, 15 tabs open to localhost 3000 you're going to have 15 socket objects that you can actually send messages to individually now, if you wanted to broadcast an event to everybody, you can actually do that using the i o.

So I could go ahead and say: IO dot Emit and then I could put whatever message I want here and that'll broadcast it to everyone.

Who's in my websocket, there's different use cases or different things.

So just keep that in mind, but now let's go ahead and make sure that if I go back to the UI and click on that ping button that we do get back a console log, so I'm gon na go ahead and click this.

That should send the Ping to the back end and you can see the bottom of this has got a ping of Bob on the back end.

So this is fully connected, we're doing a communication from the client to the server and that works fine.

But now how do you send a message back to the client? Well, I could do socket dot Emit and I'm gon na go ahead and send a message of pong and again I can send whatever data I want.

So I can say like age of 33 or something and now what I could do is if I go back to the client, I can listen for that event.

So, instead of the socket on connect, I'm gon na go ahead and repurpose this and say socket dot on pong, and then I can also get some data here and then I'll just go ahead and say: pong uh age was data.h, I believe, is what I'm sending So now we've kind of completed the full circle before between the client in the server communication.

If I refresh this page and go ahead and go back to my console, if I click on PING notice, that I does print out pong down here right and then the server is sending back the pong h of 33.

And if I do show you one more time in the network tab, let's refresh click this and if I go down to my messages, you'll see a green up Arrow, meaning that we sent a message to the backend.

We omitted or uploaded a message and then we got back a downloaded message from the back end, which is this red down arrow, so notice.

We sent up ping and then at some point later you can actually look at the time frames and the time stamps.

About .004 milliseconds later uh, we got back a pong response.

Okay, so it's a really fast communication.

Bi-Directional communication between your your front and your back end in the use cases for this typically are related to, like you know, online chatting some type of like messaging, where you have like notifications popped down in your UI.

Obviously, online games could benefit from websockets any type of communication that needs to be as close to real time as possible um, because the other approaches would be like long polling or just polling in general, which aren't the most performant, because your UI is basically making requests Every interval every X seconds to the back end over and over and over again and there's a lot of overhead to recreate that TCP handshake in that communication.

Just to see like hey, do I have any more events.

The websockets can kind of circumvent that in become a more performant way, but keep in mind that there's additional complexity with websockets because they are stateful so to in order to use these, you have to actually have like a stateful server that is constantly running your websocket Service, which means that it kind of goes against the traditional you know, arrest being a stateless API.

So keep that in mind.

So what I would like to do on prod is sometimes I just use a pre-existing.

Websocket service Amazon, API Gateway has one there's.

One called like Pusher Agora has one where you don't have to worry about setting up all these servers yourself because setting these up and managing them and then scaling them, because when you get a lot of traffic, you have to scale them behind like a sticky load.

Balancer to make sure that your users connect to the same server every time and connect to the same websocket, since it is stateful um, because you don't want a user like on the front of the disconnect and then it reconnects them to like a different server.

Potentially, you have to kind of look at your use cases um and understand like what does your app need? Sometimes you can get away with just connecting to whatever websocket server you want and that's good enough if you've coded your application correctly but yeah that's about it.

I want to kind of share that with you all in case.

You guys are interested in like how do you actually set up a websocket communication between your client and server, and this is really how you can do it using socket.

I o now there's lower level implementations using the websocket client on the browser, and I think node has a websocket implementation.

It's just a little bit more work um.

So that's why I kind of reach for socket.

I o first and if that doesn't meet your needs, then you probably need to roll your own solution or find a different solution.

Anyway.

I hope you guys enjoyed watching this little video about websockets and soccer IO uh be sure to join me Discord.

If you want to talk to me directly or ask me questions or just kind of get help with your programming Endeavors and also be sure to subscribe.

Like comment, leave a press, the Bell icon um, do what you need to do anyway, have a good day and happy coding.