Developing a Chat Application with TypeScript


Chat applications are a common use case for real-time web development. In this guide, we'll walk you through the process of developing a simple chat application using TypeScript and the WebSocket protocol. This will allow you to create a basic real-time chat experience between clients in a web browser.


Before you begin, make sure you have the following prerequisites:

  • Node.js: You can download it from
  • TypeScript: Install it globally with npm install -g typescript

Getting Started

Let's start by setting up the project and creating a basic chat server and client using TypeScript.

Step 1: Set Up Your Project

Create a new directory for your project and navigate to it in your terminal:

mkdir chat-app
cd chat-app

Step 2: Initialize a Node.js Project

Initialize a Node.js project and answer the prompts. You can use the default settings for most prompts:

npm init

Step 3: Install Dependencies

Install the required dependencies, including TypeScript, WebSocket, and Express:

npm install typescript express express-ws --save

Step 4: Create TypeScript Configuration

Create a TypeScript configuration file (tsconfig.json) in your project directory:

"compilerOptions": {
"target": "ES6",
"outDir": "./dist",
"rootDir": "./src"

Step 5: Create the Chat Server

Create a TypeScript file (server.ts) for your chat server:

// src/server.ts
import express from 'express';
import expressWs from 'express-ws';
import { Server } from 'ws';
const app = express();
const wss = new Server({ noServer: true });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === Server.OPEN) {
});'/chat', (ws, req) => {
ws.on('message', (message) => {
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === Server.OPEN) {
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);

Step 6: Create the Chat Client

Create an HTML file (index.html) for your chat client:

<!-- public/index.html -->
<!DOCTYPE html>
<title>Chat Application</title>
<input type="text" id="message" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>
<ul id="chat"></ul>
const chatSocket = new WebSocket('ws://localhost:3000/chat');
chatSocket.onmessage = (event) => {
const messageList = document.getElementById('chat');
const messageItem = document.createElement('li');
messageItem.innerText =;
function sendMessage() {
const messageInput = document.getElementById('message');
messageInput.value = '';

Step 7: Compile and Run Your TypeScript Code

Compile your TypeScript code using the TypeScript compiler:


Step 8: Start the Server

Start the server by running:

node ./dist/server.js

Step 9: Open the Chat Application

Open a web browser and navigate to http://localhost:3000 to access the chat application. You can open multiple tabs or browsers to test real-time chat functionality.


Developing a chat application with TypeScript and WebSocket is a great way to learn about real-time communication and enhance your web development skills. This simple chat application serves as a foundation for building more complex and feature-rich chat systems. You can further improve the application by adding user authentication, message persistence, and other features.