Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular
Building a Real Time Chat app from scratch using TypeScript
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.
What is a Real Time 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.
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:
In this case we’ll use Socket.IO, which is one of the fastest and most reliable real-time engines.
Why use TypeScript on server side code?
Initializing server application
npm install --save express socket.io @types/express @types/socket.io
We’ll need to install some
devDependencies to allow integrate
typescript so that we can define build tasks easily with these tools later:
npm install --save-dev typescript gulp gulp-typescript
TypeScript Compiler Configuration
tsconfig.json file with the following content:
Data Model definition
Taking advantage of static typing, let’s define a small data model as follows:
..let’s see further details into our
Chat Server Implementation
The previous code will give a result of the following classes and relationships:
Build and Run the Server
build task into our
dist directory. To perform this action, you’ll need to run:
Now we can run
node dist/index.js command to have the server running.
Let’s generate our
client directory using the latest Angular CLI version:
ng new typescript-chat-client --routing --prefix tcc --skip-install
Then install your dependencies running
npm install(I prefer to use Yarn for this step):
Adding Angular Material
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
We can do that from the command line interface:
ng generate module shared --module app
ng generate module shared/material --module shared
Check the changes inside
shared.module.ts to see the relationships created between these modules.
Adding express and socket.IO
We’ll need to add
socket.io modules into our client App:
npm install express socket.io --save
Chat Modules and Components
Let’s create a new module before starting to create components for our chat application:
ng generate module chat --module app
Now add a component into newest module:
ng generate component chat --module chat
In order to use web-sockets and custom models, let’s create another
shared folder. This time inside
ng generate service chat/shared/services/socket --module chat
ng generate class chat/shared/model/user
ng generate class chat/shared/model/message
We’ll be ending with a structure similar to:
Observables and Web Sockets
Since our Angular app comes with
RxJS, we can use
Observables to catch Socket.IO events:
Now we’re ready to listen to messages from the server:
ChatComponent gets initialized, the component is going to subscribe to
SocketService observables in order to start to receive connection events or incoming messages.
sendNotification functions are going to send the respective content through the same service. Notifications sent at this time are Rename User and User Joined.
Chat Application features
- Angular CLI
- Angular 5
- Angular Material
- Validation Forms
Find the complete project in this GitHub repository:
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. 👏
Thank you for reading!
— Luis Aviles