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.

Friday, March 3rd, 2023 - 3 minutes read

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.

More implementation-related articles

This article showcases the integration of a ScheduleJS component into an external Ag-Grid table, to demonstrate the flexibility of ScheduleJS.

How to synchronize multiple graphics? Learn how to reuse your ScheduleJS timeline in multiple graphics to keep them synchronized.

Contextual menu

How to build an interactive context menu? A deep dive into ScheduleJS event handling and recommended practice to build your own context menu.

This article shows how to implement dynamic rendering depending on the current zoom-level of the graphics.

This article proposes a step-by-step implementation of an animation mechanism using JavaScript Date API for your activities.

This article will go through the implementation of a custom info column using an AG Grid component in place of the default one.

This article will show you how the parent-child tree Gantt architecture within the ScheduleJS Viewer was built.

This article will showcase how the main activity renderer of the ScheduleJS Viewer was built with code examples.

ScheduleJS allows you to build complex drag-and-drop interactions, including side effects. This article shows how to implement drag-and-drop.

S’abonner
Notification pour
guest
0 Commentaires
Comments
Show all comments
0
We would love to to have your toughts on this. Please leave a comment below!x