Real time rendering with web-sockets

Real time rendering with web-sockets

Associating the WebSockets technology with ScheduleJS allows to build graphics that are always up to date with the latest information available. This article covers how to bind server sent events with the ScheduleJS rendering engine to reactively redraw your graphics in real time.

What is a WebSocket?

According to the Mozilla documentation, the WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. WebSockets are supported by all the recent web browsers.

Creating a simple WebSocket service with Angular

There are multiple node modules that can help you to implement WebSockets in your Angular application. An easy way to work with WebSockets in Angular is to create a RxJS Observable that will send events to the application whenever new content is pushed through the socket. A popular Angular library proposing a clear API to do the job is ngx-socket-io. Let’s create a service that we will use to expose the Observable in order to subscribe to it and a function to disconnect from the socket.

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

import {VisitorPing} from "../model/visitor-ping.model";

@Injectable({providedIn: "root"})
export class DemoAnalyticsWebSocketService {

  // Constructor

  constructor(private readonly _socket: Socket) { }

  // Methods

  getSocketAsObservable(): Observable<VisitorPing> {
    return this._socket.fromEvent<VisitorPing>("newVisitor");
  }

  disconnect(): void {
    this._socket.disconnect();
  }

}

The service API is pretty straightforward, letting us implement more logic later on if we need it for tasks such as processing the received data, validation… etc.

Handling the WebSocket lifecycle

The following code will give our Angular component the opportunity to react to the socket events by registering an event handler in the form of the _updateVisitors method. Once the component is no longer used by the application, the WebSocketService will disconnect the socket with the ngOnDestroy lifecycle method.

// Inject the service in a component and subscribe to the web-socket
constructor(private readonly _analyticsSocketService: DemoAnalyticsWebSocketService) {
  this.subscribe(this._analyticsSocketService.getSocketAsObservable(), ping => this._updateVisitors(ping));
}

// Disconnect from the socket when component unmounts
ngOnDestroy(): void {
  this._analyticsSocketService.disconnect();
}

Graphics rerendering

The ScheduleJS rerendering API can trigger your graphics to rerender just by using the gantt.redraw method. Depending on the layer you are working on, multiple rerendering methods and options will let the developer optimize this process to ensure the best end user experience.

// Redraw on socket update
private _updateVisitors(ping: VisitorPing): void {
  this.updateActivitiesFromVisitorPing(ping);
  this.gantt.redraw();
}

That’s it! Your graphics is now rerendering instantaneously to give its users real time information. Real time rendering with web-sockets