WebSocket Server in TypeScript
How to build a server for real-time communication with WebSockets in TypeScript using the ws NPM package.
Chapters
Transcript
Hi everyone. It's Nono here. And this is a tutorial on How to create a WebSocket server with TypeScript. We're going to use the ws NPM package. And then later you can expect another separate video doing exactly the same thing, but to create a client instead of a server. All right, let's get started.
Project setup
The first thing we're gonna do is select the location where we want to place our experiment. I'm
gonna create a folder called WebSockets server Ts for TypeScript, and I'm gonna access it
them. I'm gonna run the shortcut code.to open this folder into visual studio code.
You can see that the folder is empty. We can press control and the back tick to bring another terminal in here. So we can be working on terminal, right inside of visual studio code.
All right. Now, we need to create an NPM package or model in this folder, which we'll do by running NPM in it. And then that's why that basically says use the default values.
You can see that these are prefilled values of our package adjacent file. That is the only file that we have right now on this folder. And now we have to install things. As I said, we're going to install and save the Ws library
and then we'll do the same. But for our. Development dependencies. Those are gonna be NPM installed, safe dev, and we're gonna install TypeScript. We're gonna install the types for notes. We can coding TypeScript and also the types for Ws that is delivery that we're gonna be used. And we want to have how to complete as we're coding.
So these packages resolved, we have added it three packages, and now we can go to our package, do JS file
and see what we've installed. We have Ws as a dependency and then the three packages that we installed as development dependencies,
you might realize that we're missing something. If we're using TypeScript, we need a Ts config file. For that we can do TSE in it, which will create a default Ts config JS file preconfigure for us. And that we can customize and set many different options for We're gonna leave it as it is for now.
And in here, we're just gonna create a new file that is gonna be called server Ts. This is our server logic is gonna go here and just to see that we can run that script. I'm going to write here console log, and we're gonna do here. Hello, WebSockets. And we're gonna try running that from our terminal. So I save this file and then I do Ts node server dot Ts.
You can see that this has output. Properly the console log know that I'm using Ts node. This is a type three version of node, whereas you can do node index OTs. For example, for running JavaScript scripts here we do Ts node index dots. Or in this case, server dot Ts,
Server Code
All right. So now we're going to add in the logic that makes WebSocket server, we'll call it the same way. Ts node server dot Ts, but we need some logic that basically loads the library instances, our web sock client, and defines the behavioral when clients connect. And when other events happen, I'm going to grab an example here that we have prepared
that uses code from MP JS dot com. The package Ws, right? The package that we're gonna be using. And this example is going to start a WebSocket server. We'll create later another video for creating a WebSocket client that can connect to this.
All right. So the first thing we're gonna do is that we're gonna import WebSocket server from Ws, and you can see that many of these things out to complete, we're gonna define our port. That for me now is gonna be 1, 2, 3, 4,
and we're gonna create a new WebSocket server. That is gonna be that WebSocket server object. And we're gonna pass in the port to it.
Here we could say to the user where we're listening, we're listening at that port. And in here, we need to define WebSocket server behavior. So what happens when different events occur? Okay. So we can try running this OTs node server dots. So the server would keep waiting for us, but there's no behavior that we defined. So what would happen here? What we wanna happen is that on. New connection. We're going to received a WebSocket client and then we'll have a hundred function here.
So this method handles new connections. And we can say that when this WebSocket sends a message, we're gonna do something with that data. So for example, we can print it and we could also send a new message when a new client connects.
Hello, this is server dots.
Here. We could actually format this saying received message from client.
All right. You can see that this still runs. And the only thing we need now is some code to get a client to connect and see if this works. So I guess what I'm gonna do now is I'm gonna jump in time, cuz we're gonna do the client tutorial and I'll run this server and we'll try it with the client, but there will be another video that will let you know how to actually write the code for that client.
Client Test
So here I do ts-node client dots, and let's see what happens.
3, 2, 1. Right. So you see that Magica that happened there. I clicked here on ts-node client. The client told us that it connected. So that means that these open, um, handler got triggered, right? So it opened a connection. So it actually printed this client connected and then it sent this, hi, this is a client message.
The server then said, okay, I received a message from a client, which says, hi, this is a client, which is this message.
And then the client actually received a message from the server that says, hello, this is server dot. Yes.
Outro
So that was a summary of how you can write a WebSocket server with TypeScript and the Ws NPM package and how you can execute it locally with Ts note, please go ahead and watch the next video. If you want to know how to create a web sock client with the same library and connect it as we showed in the example,
feel free to like the video. If you wanna support the work that I'm doing here and to subscribe, if you wanna get notified when there are new playlists, new videos, or when I go live next,
thanks a lot for watching and I'll see you next time.