Revolutionize ♻️ Your Apps: Angular and WebSockets Unite 🫂 for Real-time Awesomeness 😎!

10 min readJun 9, 2023

Introduction:

In the world of web development, real-time applications have gained significant popularity. Real-time applications enable seamless communication between clients and servers, allowing for instant updates and interactions. Angular, a widely-used JavaScript framework, combined with WebSockets, offers a powerful solution for developing real-time applications. In this article, we will explore how to build real-time applications using Angular and WebSockets, including explanations, code snippets, and links to external resources.

Prerequisites:

Basic knowledge of Angular
Understanding of JavaScript and TypeScript
Node.js and npm installed: You can visit the official Node.js website (https://nodejs.org) to download and install the latest version suitable for your operating system.
IDE or Code Editor of your choice.

1. Understanding Web Socket

1.1 What are WebSockets?

WebSockets provide a bi-directional communication channel between a client (usually a browser) and a server. Unlike traditional HTTP requests, WebSockets allow both the client and server to initiate communication, enabling real-time data transfer.

1.2 How do WebSockets work?

WebSockets use a persistent connection between the client and the server, allowing for efficient and low-latency communication. The initial connection is established using an HTTP handshake, after which the connection is upgraded to a WebSocket connection. This enables continuous data exchange without the need for repeated HTTP requests.

1.3 Advantages of using WebSockets:

Real-time updates: WebSockets enable instant updates and notifications, making them ideal for real-time applications such as chat applications, collaborative tools, and stock tickers.
Reduced overhead: Compared to polling or long-polling techniques, WebSockets have lower network overhead and provide faster response times.
Bi-directional communication: WebSockets allow both the client and server to send messages, enabling interactive and dynamic applications.
Scalability: WebSockets can handle a large number of concurrent connections efficiently, making them suitable for high-traffic applications.

2. Setting Up an Angular Project:

2.1 Installing Angular CLI:

Before starting, ensure that you have Node.js and npm (Node Package Manager) installed on your machine. Open a terminal and run the following command to install Angular CLI globally:

npm install -g @angular/cli

2.2 Creating a new Angular project:

Create a new Angular project using the Angular CLI with the following command:

ng new real-time-app

This command will create a new directory named real-time-app containing the basic structure of an Angular project.

2.3 Adding WebSocket dependencies:

To work with WebSockets in Angular, we need to install the required dependencies. Navigate to the project directory and run the following command:

cd real-time-app
npm install --save ngx-socket-io

3. Implementing WebSocket Communication:

3.1 Creating a WebSocket service:

In Angular, a service is a good place to encapsulate WebSocket functionality. Create a new file called websocket.service.ts and add the following code:

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {

  constructor(private socket: Socket) { }

  public connect() {
    this.socket.connect();
  }

  public disconnect() {
    this.socket.disconnect();
  }

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

  public onMessage() {
    return this.socket.fromEvent('message');
  }
}

In this code snippet, we import the `Socket` class from the `ngx-socket-io package`. The `WebsocketService` class contains methods for connecting, disconnecting, sending messages, and listening for incoming messages.

3.2 Establishing a WebSocket connection:

To establish a WebSocket connection, open the `app.module.ts` file and add the following code:

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';

const config: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({
  imports: [
    SocketIoModule.forRoot(config)
  ],
  // ...
})
export class AppModule { }

Here, we import the `SocketIoModule` and `SocketIoConfig` from `ngx-socket-io` and configure the WebSocket connection by specifying the URL of the server.

3.3 Handling WebSocket events:

To use the WebSocket service and handle WebSocket events, open a component file (e.g., `app.component.ts`) and modify it as follows:

import { Component } from '@angular/core';
import { WebsocketService } from './websocket.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Real-time Application</h1>
    <input [(ngModel)]="message" placeholder="Type a message" />
    <button (click)="sendMessage()">Send</button>
    <ul>
      <li *ngFor="let msg of messages">{{ msg }}</li>
    </ul>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  message: string;
  messages: string[] = [];

  constructor(private websocketService: WebsocketService) { }

  ngOnInit() {
    this.websocketService.connect();
    this.websocketService.onMessage().subscribe((message: string) => {
      this.messages.push(message);
    });
  }

  ngOnDestroy() {
    this.websocketService.disconnect();
  }

  sendMessage() {
    if (this.message) {
      this.websocketService.sendMessage(this.message);
      this.message = '';
    }
  }
}

In this code snippet, we import the `WebsocketService` and inject it into the component’s constructor. We use the `ngOnInit` lifecycle hook to establish a WebSocket connection and subscribe to incoming messages using the `onMessage` method. The `sendMessage` method sends the typed message to the server using the `sendMessage` method of the WebSocket service. The received messages are stored in the `messages` array and displayed in the template.

4. Building a Real-time Application with Angular and WebSockets:

In this section, we will implement real-time features and demonstrate how to update the UI in real-time and broadcast messages.

4.1 Implementing real-time features:

To add real-time features to your application, you can extend the code in app.component.ts as per your requirements. For example, you can implement features like real-time notifications, live chat, or collaborative editing by leveraging the WebSocket connection and the WebSocket service methods.

4.2 Updating UI in real-time:

this.websocketService.onMessage().subscribe((message: string) => {
  this.messages.push(message);
});

In the above code snippet, we subscribe to the `onMessage` observable, which emits incoming messages. When a new message is received, it is added to the `messages` array, triggering a change in the UI through Angular’s data binding.

4.3 Broadcasting messages:

To broadcast messages to all connected clients, you can modify the `sendMessage` method in the `WebsocketService` to emit the message event to the server:

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

On the server-side, you would need to handle the incoming message event and broadcast the message to all connected clients. The exact implementation depends on your backend technology choice (e.g., Node.js, Django, etc.) and WebSocket server library.

5. Advanced Techniques and Best Practices:

5.1 Authentication and authorization with WebSockets:

When building real-time applications, it’s crucial to consider authentication and authorization to ensure secure communication. You can implement authentication by sending authentication credentials during the WebSocket handshake or by using tokens or session cookies. Authorization can be enforced by validating the user’s credentials on the server and granting access based on the user’s permissions.
Here’s a code snippet to explain what’s going on above.

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {

  constructor(private socket: Socket) { }

  public connect(authToken: string) {
    // Pass the authentication token during the WebSocket handshake
    this.socket.ioSocket.opts.query = { authToken };
    this.socket.connect();
  }

  public disconnect() {
    this.socket.disconnect();
  }

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

  public onMessage() {
    return this.socket.fromEvent('message');
  }
}

In this code snippet, we added an `authToken` parameter to the `connect` method of the `WebsocketService`. The authentication token is passed during the WebSocket handshake by setting the `query` property of the `ioSocket.opts` object. This allows you to send the authentication credentials to the server for verification.

On the server-side, you would need to handle the authentication and authorization logic. The specific implementation depends on your server technology and authentication mechanism. Here’s a simplified example using a Node.js server with Socket.IO:

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

io.use((socket, next) => {
  // Perform authentication and authorization checks
  const authToken = socket.handshake.query.authToken;
  // Your authentication and authorization logic here...

  if (authenticated && authorized) {
    return next();
  } else {
    return next(new Error('Authentication failed'));
  }
});

io.on('connection', (socket) => {
  // Handle WebSocket events for authenticated and authorized users
  socket.on('message', (message) => {
    // Handle the message from the client
  });

  // Other WebSocket event handlers...
});

server.listen(3000);

In the server-side code snippet, the io.use middleware function is used to perform authentication and authorization checks. You can extract the authentication token from the handshake object and implement your own logic to validate the user’s credentials. If the user is authenticated and authorized, the server allows the WebSocket connection. Otherwise, it rejects the connection.
Remember to adapt the server-side code to your specific authentication mechanism and business logic.

By incorporating this code snippet into your WebsocketService and implementing the corresponding server-side logic, you can ensure secure communication by authenticating and authorizing WebSocket connections in your real-time application.

5.2 Handling disconnections and errors:

WebSockets can be prone to disconnections and errors due to network issues or server-side failures. It’s essential to handle disconnections gracefully by implementing reconnection strategies, such as exponential backoff, and providing appropriate error handling to notify the user and attempt reconnection.

Here’s an example of how you can handle disconnections and errors gracefully in the `WebsocketService` class:

import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  private reconnectInterval = 3000; // 3 seconds
  private reconnectAttempts = 10;
  private connectionStatus$: Subject<boolean> = new Subject<boolean>();

  constructor(private socket: Socket) { }

  public connect(authToken: string) {
    // Pass the authentication token during the WebSocket handshake
    this.socket.ioSocket.opts.query = { authToken };
    this.socket.connect();
    this.registerEventHandlers();
  }

  public disconnect() {
    this.socket.disconnect();
    this.connectionStatus$.next(false);
  }

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

  public onMessage(): Observable<string> {
    return this.socket.fromEvent('message');
  }

  public onConnectionStatus(): Observable<boolean> {
    return this.connectionStatus$.asObservable();
  }

  private registerEventHandlers() {
    this.socket.on('connect', () => {
      this.connectionStatus$.next(true);
    });

    this.socket.on('disconnect', () => {
      this.connectionStatus$.next(false);
      this.attemptReconnect();
    });

    this.socket.on('connect_error', (error: any) => {
      console.error('WebSocket connection error:', error);
    });
  }

  private attemptReconnect() {
    let attempts = 0;
    const reconnectIntervalId = setInterval(() => {
      if (attempts >= this.reconnectAttempts) {
        clearInterval(reconnectIntervalId);
        console.error('WebSocket reconnection attempts exhausted.');
      } else {
        attempts++;
        this.socket.connect();
        if (this.socket.connected) {
          clearInterval(reconnectIntervalId);
          this.connectionStatus$.next(true);
        }
      }
    }, this.reconnectInterval);
  }
}

In this code snippet, i added a `connectionStatus$` subject to track the WebSocket connection status. The `registerEventHandlers` method is responsible for registering event handlers for the `connect`, `disconnect`, and `connect_error` events.

When the WebSocket connection is established (`connect` event), we notify the subscribers of the `connectionStatus$` subject by emitting `true`. On disconnection (`disconnect` event), we notify subscribers with `false` and attempt to reconnect using the `attemptReconnect` method.

The `attemptReconnect` method implements a simple reconnection strategy using an interval. It attempts to reconnect at a specified interval for a certain number of attempts (`reconnectAttempts`). If the maximum number of attempts is reached without successful reconnection, an error message is logged.

By incorporating this code snippet into your `WebsocketService`, you can handle disconnections gracefully, notify users of the connection status, and attempt automatic reconnection in case of network or server failures.

5.3 Scaling real-time applications:

As the number of connected clients increases, scaling becomes a consideration. You can scale real-time applications by implementing load balancing techniques, such as using a WebSocket server cluster or utilizing cloud-based solutions. Additionally, optimizing server-side code and reducing unnecessary data transfer can help improve performance.

Scaling real-time applications involves various considerations, including load balancing and optimizing server-side code. While the specific implementation details may vary depending on your chosen backend technology and infrastructure, here’s a high-level example to illustrate the concept:
Load Balancing with WebSocket Server Cluster:

To scale real-time applications, you can use a cluster of WebSocket servers behind a load balancer. Each server in the cluster handles a subset of the client connections, distributing the load evenly across the servers. Here’s an example using Node.js and the socket.io library:

const cluster = require('cluster');
const numCPUs = require('os').cpus().length;
const server = require('http').createServer();
const io = require('socket.io')(server);

if (cluster.isMaster) {
  // Fork workers based on the number of CPUs
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }
} else {
  // Handle WebSocket events
  io.on('connection', (socket) => {
    // Handle WebSocket events for connected clients
    socket.on('message', (message) => {
      // Handle the message from the client
    });

    // Other WebSocket event handlers...
  });

  // Start the WebSocket server
  server.listen(3000);
}

In this example, the master process forks multiple worker processes based on the number of CPUs available. Each worker process handles a subset of client connections. The load balancer, such as NGINX or HAProxy, distributes incoming WebSocket connections across these worker processes. This approach allows for horizontal scaling by adding more servers to the cluster as the number of connected clients increases.
Optimizing Server-side Code:

To improve performance and reduce unnecessary data transfer, consider implementing techniques such as message compression and selective broadcasting. Here’s an example of compressing WebSocket messages using the zlib library in Node.js:

const zlib = require('zlib');
const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  socket.on('message', (message) => {
    // Compress the message using zlib
    zlib.deflate(message, (err, compressedData) => {
      if (err) {
        console.error('Error compressing WebSocket message:', err);
      } else {
        // Send the compressed message to the client
        socket.emit('compressedMessage', compressedData);
      }
    });
  });
});

server.listen(3000);

In this example, the zlib.deflate method compresses the WebSocket message before sending it to the client. On the client-side, the message can be decompressed using zlib.inflate to retrieve the original data. This technique reduces the data size transmitted over the network, improving performance, especially when dealing with large data payloads.
These are just examples to illustrate the concept of scaling and optimizing real-time applications. The actual implementation details may vary depending on your specific requirements and technology stack. Consider consulting official documentation, tutorials, and best practices for your chosen backend technology and infrastructure to achieve effective scaling and performance optimization.

6. External Resources:

To further enhance your understanding and explore more about building real-time applications with Angular and WebSockets, refer to the following resources:

Angular Official Documentation: https://angular.io/
ngx-socket-io Official Documentation: https://www.npmjs.com/package/ngx-socket-io
WebSockets MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
Building Real-Time Applications with Angular and WebSockets - A Step-by-Step Guide: https://www.toptal.com/angular/angular-websockets-tutorial
Angular WebSocket Chat Application: https://www.digitalocean.com/community/tutorials/angular-angular-and-socket-io

7. Conclusion:

By combining the power of Angular and WebSockets, you can create dynamic and real-time applications that provide seamless communication and instant updates. This article provided an overview of WebSockets, explained the process of setting up an Angular project with WebSocket integration, and demonstrated how to implement real-time features. It also touched on advanced techniques, such as authentication, handling disconnections, and scaling real-time applications. With the knowledge gained from this article and the provided external resources, you can confidently build robust and engaging real-time applications using Angular and WebSockets.

If you got here then you’re a champ and a great dev at that. I hope this article was helpful and you were able to achieve building a real-time connection using Angular and WebSocket.

Got any bug 🐞 ? Drop a comment and also a like if otherwise.

Gracias 🙏.