Intro to WebSockets in TypeScript & Node
WebSocket server and client in TypeScript & Node.js with the ws NPM package.
Chapters
Transcript
So a really quick overview on what we've done so far or recap, we have created below here, this server code, which what it does is in TypeScript and TypeScript Node.
Client & Server Overview
So Node.js, but running in TypeScript, we import the WebSocket server class from the ws library. This is a Node library, and we also have installed the types. We set a port and we create a new WebSocket server with that port. Then we create a WebSocket handler and just a log. You know what board we're listening at and on this connection handler, what we do is that we get this handler to be called every time.
There's a new connection from a client and we receive the client that is ws. And then we can say, okay, every time each of these new clients that connect, send a message. We're gonna log it, we get that data. And every time that somebody connects, we're gonna send them a welcome message, some welcome message from the server, so we could do that. So that's all the code that we need in terms of the server. That's the minimal we can do more logic, add more logic to it later. And then this is a code for the client. It's also a TypeScript script and we import the same library this time, the WebSocket library, the entire library, instead of just the WebSocket server, we create a new WebSocket client with the URL built with local host because it's the machine at which we're creating the server as well.
This is the WebSocket protocol instead of HTTP or HTTPS S and then the port that we're have specified on the other application as well. Here, we could actually just do this. So this is parameterized and this could come from somewhere else. And then here we have two hundreds. We could have more we could have, for example, On close on message on open on Error.
But right now we just have two on this example, we have the on open. So every time this opens, we log that we have connected and we send a first message to the server, right? That then the server can decide what to do. It could broadcast it to other clients. And the message here from the server, we say, okay, we receive a message from the server and then we print it.
That's all the logic that we've added. And maybe here we can put a note broadcast to other clients, and this could be a to-do right. That's what we could do maybe next week. Okay. So this is our server code and this is our client code. And here probably what we wanna do is to do add handlers for Jason messages that contain.
Method and pars. And for that, I'm gonna take a look really quick. Look at our WebSocket client that we had before to see what convention we had there. And yeah, I can see that you're connected from Mumba India. Thanks for connecting online with us. We're wrapping up here will be finishing really soon, but I encourage you to this video and to subscribe if you're enjoying the content and wanna get not when I go live next and we are using yeah.
Method and params. Okay.
So those files that we have done in here, so I'm gonna put down the chat and I'm gonna do add those to Discord and to the video description if I remember. So this is the client and this server.
Outro
Well, thanks a lot for watching. If you are enjoying the content on the channel, please like this video to support my work and subscribe if you want get notified when I go live next or when I upload new videos and you can also, uh, join us on Discord on nono.ma/discord and yeah. Thanks a lot for watching and I'll see you next time.