Real-time chat applications have become a staple in modern web development, and Angular paired with WebSockets offers a powerful combo to build responsive and interactive chat systems. Let’s dive into the world of real-time chat and explore how to create a robust solution from scratch.

First things first, we need to set up our Angular project. If you haven’t already, install the Angular CLI and create a new project:

npm install -g @angular/cli
ng new real-time-chat
cd real-time-chat

Now that we have our project scaffold, let’s add the necessary dependencies for WebSockets. We’ll use the socket.io library, which provides a nice abstraction over raw WebSockets:

npm install socket.io-client

With our setup complete, it’s time to create the chat component. This will be the heart of our application, handling message display and user input:

import { Component, OnInit } from '@angular/core';
import { ChatService } from './chat.service';

@Component({
  selector: 'app-chat',
  template: `
    <div class="chat-container">
      <div class="messages">
        <div *ngFor="let message of messages">
          {{ message.user }}: {{ message.text }}
        </div>
      </div>
      <input [(ngModel)]="newMessage" (keyup.enter)="sendMessage()">
      <button (click)="sendMessage()">Send</button>
    </div>
  `,
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  messages: any[] = [];
  newMessage: string = '';

  constructor(private chatService: ChatService) {}

  ngOnInit() {
    this.chatService.getMessages().subscribe((message: any) => {
      this.messages.push(message);
    });
  }

  sendMessage() {
    if (this.newMessage.trim() !== '') {
      this.chatService.sendMessage(this.newMessage);
      this.newMessage = '';
    }
  }
}

This component sets up a basic UI for our chat application, with a messages display area and an input field for new messages. But how do we actually send and receive messages in real-time? That’s where our ChatService comes in:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  private socket: any;

  constructor() {
    this.socket = io('http://localhost:3000');
  }

  sendMessage(message: string) {
    this.socket.emit('new-message', message);
  }

  getMessages() {
    return new Observable((observer) => {
      this.socket.on('message', (data: any) => {
        observer.next(data);
      });
    });
  }
}

This service establishes a connection to our WebSocket server (which we’ll create shortly) and provides methods to send and receive messages. The getMessages method returns an Observable, allowing our component to subscribe to incoming messages.

Now, let’s set up our server. We’ll use Node.js with Express and socket.io:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('new-message', (message) => {
    io.emit('message', { text: message, user: socket.id });
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

http.listen(3000, () => {
  console.log('Server running on port 3000');
});

This server listens for incoming WebSocket connections, handles new messages, and broadcasts them to all connected clients.

With all these pieces in place, we’ve got a basic real-time chat application up and running! But let’s not stop there. We can enhance our app with some additional features to make it more robust and user-friendly.

One common requirement in chat applications is the ability to see when other users are typing. We can implement this with a few modifications to our existing code.

First, let’s update our ChatService:

export class ChatService {
  // ... existing code ...

  userIsTyping() {
    this.socket.emit('typing');
  }

  getUsersTyping() {
    return new Observable((observer) => {
      this.socket.on('user-typing', (data: any) => {
        observer.next(data);
      });
    });
  }
}

Then, we’ll update our ChatComponent to use these new methods:

export class ChatComponent implements OnInit {
  // ... existing code ...
  usersTyping: string[] = [];

  ngOnInit() {
    // ... existing code ...
    this.chatService.getUsersTyping().subscribe((user: string) => {
      if (!this.usersTyping.includes(user)) {
        this.usersTyping.push(user);
        setTimeout(() => {
          this.usersTyping = this.usersTyping.filter(u => u !== user);
        }, 3000);
      }
    });
  }

  onTyping() {
    this.chatService.userIsTyping();
  }
}

And don’t forget to update the template to show who’s typing:

<div class="typing-indicator" *ngIf="usersTyping.length > 0">
  {{ usersTyping.join(', ') }} {{ usersTyping.length === 1 ? 'is' : 'are' }} typing...
</div>

On the server side, we need to handle these new events:

io.on('connection', (socket) => {
  // ... existing code ...

  socket.on('typing', () => {
    socket.broadcast.emit('user-typing', socket.id);
  });
});

Another useful feature is the ability to send private messages. Let’s implement that next.

We’ll add a new method to our ChatService:

sendPrivateMessage(to: string, message: string) {
  this.socket.emit('private-message', { to, message });
}

And update our server to handle private messages:

io.on('connection', (socket) => {
  // ... existing code ...

  socket.on('private-message', ({ to, message }) => {
    socket.to(to).emit('private-message', {
      from: socket.id,
      message
    });
  });
});

Now users can send private messages to each other. Of course, you’d need to implement a way for users to select who they want to message privately in your UI.

As our chat application grows, we might want to implement rooms or channels. This allows users to join specific conversations based on topics or groups. Here’s how we could start implementing this feature:

First, let’s add methods to join and leave rooms in our ChatService:

joinRoom(room: string) {
  this.socket.emit('join-room', room);
}

leaveRoom(room: string) {
  this.socket.emit('leave-room', room);
}

sendRoomMessage(room: string, message: string) {
  this.socket.emit('room-message', { room, message });
}

Then, we’ll update our server to handle these new events:

io.on('connection', (socket) => {
  // ... existing code ...

  socket.on('join-room', (room) => {
    socket.join(room);
    io.to(room).emit('user-joined', socket.id);
  });

  socket.on('leave-room', (room) => {
    socket.leave(room);
    io.to(room).emit('user-left', socket.id);
  });

  socket.on('room-message', ({ room, message }) => {
    io.to(room).emit('message', { text: message, user: socket.id, room });
  });
});

Now users can join specific rooms and send messages to those rooms. You’ll need to update your UI to allow users to select and join rooms, but this gives you a solid foundation to build upon.

As you can see, building a real-time chat application with Angular and WebSockets opens up a world of possibilities. We’ve covered the basics of setting up the client and server, implementing core chat functionality, and even touched on more advanced features like typing indicators, private messaging, and chat rooms.

Remember, when building real-world applications, you’ll want to consider additional factors like authentication, message persistence (storing messages in a database), and scaling your WebSocket server to handle many concurrent connections. But with the foundation we’ve built here, you’re well on your way to creating a robust, real-time chat application.

So go ahead, start coding, and watch as your chat application comes to life, message by message. Happy chatting!