Real-Time Typing Indicator with Angular & SignalR

Introduction

This repository demonstrates a implementation of a Real-Time Typing Indicator micro-feature. It simulates a live chat environment between two users (e.g., "Elon Musk" and "Sam Altman") to showcase seamless bi-directional communication using Angular 18 and .NET 8 SignalR.

While this is a specific micro-feature, the architecture addresses common real-world challenges such as concurrency and split-view state management, making it a valuable reference for developers building real-time applications.

Key Features

• Real-Time Bi-Directional Communication: Instant feedback when a user starts or stops typing.
• Split-View Simulation: A unique dual-pane interface running in a single browser tab that simulates two distinct users simultaneously.
• Concurrency Handling: Correctly manages state when multiple users type at the same time without race conditions.
• "Ghost" Indicator Prevention: Implements safety timers to automatically clear stale typing indicators if a client disconnects unexpectedly (e.g., browser crash).
• Smart Auto-Scrolling: Automatically scrolls the chat window to the bottom when a partner starts typing, ensuring visibility of new activity.
• Reusable Component Architecture: Built using a generic ChatBoxComponent.

Technical Stack

• Frontend: Angular 18
• Backend: .NET 8
• Real-Time Transport: SignalR
• Styling: SCSS

Architecture Overview

The application follows a "Smart Client, Efficient Server" architecture:

1. The Backend (SignalR Hub): Acts as a lightweight relay. It broadcasts events (UserTyping, UserStoppedTyping) to connected clients but does not maintain complex user state.
2. The Frontend (Angular): Handles the following logic.
   • Debouncing: Waits for a pause in keystrokes before sending a "Stop" event to reduce network noise.
   • Safety Timers: Each client runs a local countdown for every active typing user. If a "Stop" signal is missed (packet loss or crash), the client self-corrects and removes the indicator.
   • State Management: Uses Angular Signals to reactively update the UI without deep change detection trees.

Getting Started

Prerequisites

• Node.js (v18 or higher)
• .NET SDK (v8.0)
• Angular CLI (npm install -g @angular/cli)

Installation

1. Clone the repository

   git clone [https://github.com/sdarshil6/TypingIndicator.git](https://github.com/sdarshil6/TypingIndicator.git)
   cd TypingIndicator

2. Entire Setup Just open the TypingIndicator.sln file in Visual Studio 2022.

3. Run the Application Click on the Start button present at the top inside your Visual Studio.

Project Structure

Frontend (typingindicator.client)

• models/chat.model.ts: Shared TypeScript interfaces for type safety.
• services/signalr.service.ts: Centralized service managing the WebSocket connection and event listeners logic.
• components/chat-box/: A reusable, dumb component responsible for rendering a single chat window. It handles its own scrolling and UI state based on inputs.
• app.component.ts: The orchestrator. It holds the "truth" (message history, user personas) and passes data down to the chat boxes.

Backend (TypingIndicator.Server)

• Hubs/ChatHub.cs: The SignalR hub defining the SendTyping and StopTyping methods. It utilizes Clients.All to ensure the split-view demo receives events on the same client connection.

Contact

For inquiries or discussions regarding this micro-feature project, please feel free to reach out via email:

Darshil Shah shahdarshil.tech@gmail.com