Le TOP 3 des diagrammes de Gantt JavaScript. Découvrez leurs caractéristiques, avantages et inconvénients pour choisir le meilleur outil pour votre projet.
Rendu en temps réel avec les 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?
Selon le the Mozilla documentation, le 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.
Plus d'articles sur la mise en œuvre
Découvrez comment ScheduleJS s'est intégré en toute transparence à Selligent CRM, améliorant ainsi l'efficacité de la planification pour les consultants d'une grande marque de produits de beauté.
Cet article présente l'intégration d'un composant ScheduleJS dans un tableau Ag-Grid externe, afin de démontrer la flexibilité de ScheduleJS.
Comment synchroniser plusieurs graphiques ? Apprenez à réutiliser votre ligne de temps ScheduleJS dans plusieurs graphiques afin de les synchroniser.
Comment construire un menu contextuel interactif ? Une plongée en profondeur dans la gestion des événements ScheduleJS et les pratiques recommandées pour construire votre propre menu contextuel.
Cet article montre comment mettre en œuvre un rendu dynamique en fonction du niveau de zoom actuel des graphiques.
Cet article propose une mise en œuvre pas à pas d'un mécanisme d'animation utilisant l'API JavaScript Date pour vos activités.
Cet article présente l'implémentation d'une colonne d'information personnalisée en utilisant un composant AG Grid à la place du composant par défaut.
Cet article vous montrera comment a été construite l'architecture de l'arbre de Gantt parent-enfant dans le ScheduleJS Viewer.
Cet article montre comment le moteur de rendu de l'activité principale du ScheduleJS Viewer a été construit à l'aide d'exemples de code.
S’abonner
Connexion
0 Commentaires
