WebSocket Client in TypeScript

AUGUST 8, 2022

How to build a client 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 short video on how to make a WebSockets client with TypeScript and the ws NPM package. We have a previous video on how to build a server, and right now we're gonna build a client and we're gonna test it with that server to make sure that everything's working right? Tying the pieces together. All right, let's get started.

Project setup

The first thing I'm doing here is go to the directory where I wanna create my project. You can see here, we have the web circuit server, Ts four TypeScript, and we're gonna create the same folder, but for the client. And if you've seen the previous video, we're doing the same process. If not, I'll walk you through it in a second.

Dependencies

We're gonna create a new NPM package. I put that's why, because that prefills the package to JS on file with default, we're going to install again, our dependencies. So basically NPM install, Ws safe, and make this big. So you can see it. And then we're going to install again, but save dev, which is the same as dash D for our development dependencies.

These are TypeScript types, node and types Ws. So we install, we get all of our packages.

Configuring TypeScript and ts-node

And now what we need to do is TSC in it. So we create the default Ts conflict JS file. We need to run code in TypeScript and we can do touch client dot Ts to create an MTTs file that we can edit here and maybe run here, console log, hello, WebSockets client.

So this is just to test that we can run ts-node with our client dots and that code runs. All right. So everything seems to be said properly.

Project files

I'm going to run the code dot shortcut to open this project on Visual Studio Code. And you can see that we have the files that we've created. So client dots, we have the package JS and the Ts config package JS because we've run NPM install and node models that has all of the packages, their dependencies of the things that we've installed. So if we open client dot Ts right now, we only have this console log, hello, WebSocket's client statement.

Client Code

We're gonna remove that and we're gonna state the purpose of this file starts a WebSocket client and connects to a server. And this comes from HTTPS S. MP JS dot org packages, Ws piece, the packets that we're using, and these examples were graphed and slightly modified from there.

So here we're just gonna import WebSocket from Ws. We're going to define our port. There's gonna be 1, 2, 3, 4,

and we're gonna create a new WebSocket client, new WebSocket. We put here the URL, which is gonna. Ws local host and then our port.

So now we can define different events. What happens when we open, when we receive a message, when we receive an Error, right? And in this example, we're just going to handle Ws on you. See here we get out to complete on close Error message, open ping pong, upgrade and inspect response. This is the great Magica of TypeScript.

WebSocket event handlers

We're getting out completion because we have the types for the Ws library. That is the library that we're using. So I'm just gonna go here with Ws on open. We get a hundred function that we're not gonna attach at the moment. And we'll put here a handler for message. Which actually will give us some data.

So in here we could say received a message and we can print that message in an open. We could actually send a message, right? We could actually send, Hi, this is a client. All right. So we do have here the minimal code that we can get for our client in TypeScript.

And I'm gonna add a statement here that is gonna say that we have connected, right? So this is just to know that we've connected to a given WebSocket server, and the messages from the server. All right.

Connecting to a server

So let's test this code. Now I do have another window here open from our previous video where we executed ts-node.js server dots. And our WebSocket server is already listening at port 1, 2, 3, 4 in our local machine. So that means that this local host URL should work with that port because it's actually the same port.

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 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.

You can go to understand a bit more of the code of the server to the other previous video that we have. But in a nutshell, when the. WebSocket received that open connection. It printed the message that the client had received because we have this hundred when we received a message on the server.

And then here we sent a message that said, hello, DC server Dotts, which is actually here.

Outro

So this was in a nutshell how you could set up a client that can connect to an existing WebSocket server and is gonna handle the open connection event and the message we could handle others, and in feature videos, I expect to tell you how you can also pass more intricate messages as JSON objects. So you can parse the data in the server or different clients, and then trigger an action or handle those methods and events according to the data that was sent.

I'll remind you that you can like this video, if you wanna support the playlist and the videos that I'm uploading here, and you can subscribe if you're gonna get notified when I have new videos or when I go live next.

Thanks a lot for watching and I'll see you next.

Blog Code Websocket Typescript