The TOP 3 JavaScript Gantt chart. Discover their features, advantages, and disadvantages to choose the best tool for your project.
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
Discover how ScheduleJS seamlessly integrated with Selligent CRM, enhancing scheduling efficiency for a leading beauty brand's consultants.
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.
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.
S’abonner
Connexion
0 Commentaires
