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.

Demo: TypeScript Chat Application

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

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

Application Structure

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: