Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Building a Real Time Chat app from scratch using TypeScript

Luis Aviles
Jan 9, 2018 · 5 min read

Some time ago I implemented a simple chat application using TypeScript language only. The main goal was to write a demo to explain how you can use this programming language on the client side and on the server. The client app is using latest Angular features.

In this post I will show you how I implemented the app from scratch.

Demo: TypeScript Chat Application

According this Wikipedia definition, a real-time application allows information to be received as soon as it is published, rather than requiring a source to be checked periodically for updates. Therefore, this kind of app should give a feeling to users that events and actions happen immediately.

WebSockets is a protocol that provides a bi-directional communication channel. This means that a browser and web server can maintain real-time comms, sending messages back and forth while the connection is open.

Websockets communication

We will separate server related code and client code. I will go into details when most important files will are explained. For now, this is the expected structure of our application:

Server Code

Since WebSockets is a specification, we can find several implementations about it. We can choose J̶a̶v̶a̶S̶c̶r̶i̶p̶t̶ TypeScript or any other programming language.

In this case we’ll use Socket.IO, which is one of the fastest and most reliable real-time engines.

TypeScript comes with really cool features and it is updated very often. It can prevent about 15% of bugs. Do you need more reasons? 😄

Create a package.json file and then install the following dependencies:

We’ll need to install some devDependencies to allow integrate gulp and typescript so that we can define build tasks easily with these tools later:

Create a tsconfig.json file with the following content:

Taking advantage of static typing, let’s define a small data model as follows:

..let’s see further details into our server/src directory:

The main files in server directory are index.ts and chat-server.ts. The first one allows us to create and export our ChatServer app, while the last one contains express and socket.IO configurations:

The previous code will give a result of the following classes and relationships:

Server classes diagram

In order to have JavaScript files needed by the V8 engine of Node.js, we can add a build task into our gulpfile.js file:

As you can see, the output of build process(JavaScript files) will be located indist directory. To perform this action, you’ll need to run:

Now we can run node dist/index.js command to have the server running.

Client Code

Let’s generate our client directory using the latest Angular CLI version:

Then install your dependencies running npm install(I prefer to use Yarn for this step):

Find and follow the latest guide to install Angular Material inside your Angular CLI project.

As part of using best practices in our project structure, we can create shared and materialmodules:

We can do that from the command line interface:

Check the changes inside app.module.ts and shared.module.ts to see the relationships created between these modules.

We’ll need to add express and socket.io modules into our client App:

Let’s create a new module before starting to create components for our chat application:

Now add a component into newest module:

In order to use web-sockets and custom models, let’s create another shared folder. This time inside chat directory:

We’ll be ending with a structure similar to:

Since our Angular app comes with RxJS, we can use Observables to catch Socket.IO events:

We’ll need to define some enums to manage Actions and Events in the App:

Now we’re ready to listen to messages from the server:

Material Code & UI events have been omitted in this file

Once ChatComponent gets initialized, the component is going to subscribe to SocketService observables in order to start to receive connection events or incoming messages.

The sendMessage and sendNotification functions are going to send the respective content through the same service. Notifications sent at this time are Rename User and User Joined.

  • Angular CLI
  • Angular 5
  • Angular Material
  • Validation Forms

Find the complete project in this GitHub repository:

github.com/luixaviles/socket-io-typescript-chat

Go through to typescript-chat.firebaseapp.com and open two or more tabs in your favorite browser and start a conversation.

If you liked this post, be sure to share it with your friends or give it a clap. 👏

You can follow me on Twitter and GitHub to see more about my work.

Thank you for reading!
Luis Aviles

DailyJS

JavaScript news and opinion.