Meidi Airouche for Onepoint

Posted on Aug 6 • Edited on Aug 22

High-performance Chat with TypeScript, Websockets & Redis in 10min !

#typescript #redis #websocket #docker

The purpose of this article is to understand the basics of websockets and cache with a common known example : a Chat.

Usually, a Chat have to be really reactive with very good performance. There are many ways to achieve different levels of performance.

In this article, we'll build a basic sample high-performance Chat together with Typescript, Redis and Websockets. I'll guide you step-by-step as if I was doing it with you.

First, let's take a look at our architecture.

Architecture

To the keep things simple, we'll be doing the frontend in plain HTML/JS without framework
The Nodejs server will be written with express as it's most known.
A Redis server to cache messages

Tips : If you wanna enhance performance further, you can opt for another framework like fastify, websocket.io, uWebSocket or whatever you want. We'll stay with express as it's well commonly known.

Backend

Project structure

.
├── docker-compose.yml
├── Dockerfile
├── src
│   ├── index.ts
│   ├── server.ts
│   ├── redisClient.ts
│   └── types.ts
├── tsconfig.json
└── package.json

Create the nodejs project

npm init

and feed the package.json file with the following configuration :

{
  "name": "chat-app",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "redis": "^4.0.0",
    "ws": "^8.0.0"
  },
  "devDependencies": {
    "@types/node": "^16.0.0",
    "@types/ws": "^8.0.0",
    "typescript": "^4.0.0"
  }
}

Install dependencies into your project

npm install express ws redis 
npm install --save-dev typescript @types/node @types/ws @types/express @types/redis

If not already done, don't forget to configure your tsconfig.json :

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Coding

Redis client configuration

Let’s create our Redis configuration in a dedicated file ./src/redisClient.ts. Here, we're connecting the client to Redis and we listen for errors to raise it in the console.

import { createClient } from 'redis';

const client = createClient({
  url: 'redis://redis:6379' // we'll create the docker image later
});

client.on('error', (err) => {
  console.error('Redis Client Error', err);
});

client.connect();

export default client;

Message type or interface

We’ll be creating an interface (create a type if you prefer) to structure our Chat messages in ./src/chatMessage.ts. Let’s keep it simple and have only 3 attributes :

username: the name of the message author
message: the content of the message
timestamp: date and hour of the message as a timestamp

export interface ChatMessage {
  username: string;
  message: string;
  timestamp: number;
}

Http & Websocket servers

Here, we’ll be creating two servers in ./src/server.ts :

HTTP server with express to handle http calls
Websocket server to handle websocket messages

import express from "express";
import { WebSocketServer } from "ws";
import redisClient from "./redisClient";
import { ChatMessage } from "./chatMessage";

const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Chat server is running");
});

const server = app.listen(port, () => {
  console.log(`Web server is running on http://localhost:${port}`);
});

const wss = new WebSocketServer({ server });

wss.on("connection", (ws) => {
  console.log("Client connected");

  // Send chat history to new client
  redisClient.lRange("chat_message", 0, -1).then(
    (messages) => {
      messages.forEach((message) => {
        ws.send(message);
      });
    },
    (error) => {
      console.error("Error retrieving messages from Redis", error);
      return;
    }
  );

  ws.on("message", (data) => {
    const message: ChatMessage = JSON.parse(data.toString());
    message.timestamp = Date.now();
    const messageString = JSON.stringify(message);

    // Save message to Redis
    redisClient.rPush("chat_messages", messageString);
    redisClient.lTrim("chat_messages", -100, -1); // Keep only the last 100 messages

    // Broadcast message to all clients
    wss.clients.forEach((client) => {
      if (client.readyState === ws.OPEN) {
        client.send(messageString);
      }
    });
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

console.log("WebSocket server is running on ws://localhost:3000");

So, what are we doing here :

First, we setup the Web and WebSocket servers.
Second, on the websocket connection, we pull the Chat history from redis
Third, we listen for new messages and record them in redis, keeping only the 100 last message anytime
Fourth, we broadcast each messages to all the connected clients of the Chat

If you wanna go further, you can implement an observer pattern where each websocket client is an observer. But for now, let's keep the things simple.

For barrels fans, don’t forget to add your app entrypoint in ./src/index.ts :

import './server';

You can launch the server with :

npm run build
npm start

Frontend

As we said it previously, we'll build a simple example which does not take account of best practices for the article. Create a single index.hml with the following code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat</title>
</head>
<body>
  <div id="chat">
    <ul id="messages"></ul>
    <input id="username" placeholder="Username">
    <input id="message" placeholder="Message">
    <button onclick="sendMessage()">Send</button>
  </div>
  <script>
    const ws = new WebSocket('ws://localhost:3000');
    const messages = document.getElementById('messages');

    ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      const li = document.createElement('li');
      li.textContent = `[${new Date(message.timestamp).toLocaleTimeString()}] ${message.username}: ${message.message}`;
      messages.appendChild(li);
    };

    function sendMessage() {
      const username = document.getElementById('username').value;
      const message = document.getElementById('message').value;
      ws.send(JSON.stringify({ username, message }));
    }
  </script>
</body>
</html>

So what are we doing here :

We setup the html document to have the needed fields and button to send a message
We setup the websocket connection with the server
We publish every message to the websocket anytime the button is pressed calling the function sendMessage()

All together with docker compose

Create a Dockerfile for the server

# Use official Nodejs image
FROM node:18

# Work directory
WORKDIR /usr/src/app

# Copy package.json & package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy sources files
COPY . .

# Compile Typescript
RUN npm run build

# Expose web server port
EXPOSE 3000

# Start the server
CMD ["npm", "start"]

Create a Docker compose file to assemble

Let's assemble the web server and Radis server inside a docker-compose.yml file.

version: '3.8'

services:
  redis:
    image: redis:latest
    container_name: redis
    ports:
      - "6379:6379"

  app:
    build: .
    container_name: chat-app
    ports:
      - "3000:3000"
    depends_on:
      - redis
    volumes:
      - .:/usr/src/app
    command: npm start

Building and starting the whole stack

To build and run the whole backend stack with docker images, use :

docker-compose up --build

Open your index.html file and start sending messages. We're done ! A high-performance chat with websocket and Redis !

Sources

Link : GitHub Repository

Hope it helps to understand basics. After that, you might be willing to take a look at Observer pattern and framworks like socket.io. Enjoy !

DEV Community