Bonjour

Webix est un librairie qui fournie clef en main un tr�s grand nombre de widgets.
(Je n'ai � ce jour jamais eu besoin d'en chercher ailleurs, I.E. j'ai toujours trouv� mon bonheur dans la lib)

Contrairement � l'approche d'Angular JQuery etc Webix part du principe que c'est le code qui d�fini l'IHM. il n'est ici pas question d'�crire du html du css du js et d'avoir un processus de binding. on �crit du js et que du js.

Je trouve cette librairie plut�t bien adapt� lorsqu'on fait des choses tr�s industrielle afficher des grilles des graphes �diter un �l�ment etc. C'est � mon avis beaucoup moins adapt� lorsqu'on veut une personnalisation (pour l'entreprise) tr�s pouss�e.

Avec Webix vient webix-jet qui est un micro framework pour les single page applications.

J'ai une application �crite il y a deux ans qui entre dans ce cadre il y a des dizaines de modules qui on tous le m�me aspect en gros afficher une grille de donn�e ou des graphes pour surveiller des indicateurs.
pour se faire rien de plus simple
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
	var bundlesDatatable = {
		view : "customDatatable",
		id : "bundles:datatable",
		select : "row",
		navigation : true,
		resizeColumn : true,
		url : bundlesStateUrl,
		ready : function() {
			this.markSorting("SymbolicName", "asc");
			this.sort("SymbolicName", "asc", "string");
		},
		columns : [ {
			id : "check",
			header : {
				content : "masterCheckbox"
			},
			template : "{common.checkbox()}",
			width : 40
		}, {
			id : "flux",
			header : [ "Interface", {
				content : "customSelectFilter"
			} ],
			sort : "string",
			adjust : true
		}, {
			id : "recipientName",
			map : "#recipient.name#",
			header : [ "Socle", {
				content : "customSelectFilter"
			} ],
			sort : "string",
			adjust : true
		}, {
			id : "SymbolicName",
			header : [ "Module", {
				content : "customTextFilter"
			} ],
			sort : "string",
			adjust : true
		}, {
			id : "State",
			header : [ "Etat", {
				content : "customSelectFilter"
			} ],
			sort : "string",
			adjust : true,
			cssFormat : function(value) {
				if (value.toLowerCase() == "active") {
					return {
						color : "green"
					};
				} else if (value.toLowerCase() == "installed" || value.toLowerCase() == "resolved") {
					return {
						color : "black"
					};
				} else if (value.toLowerCase().includes("fail")) {
					return {
						color : "red"
					};
				}
			}
		}, {
			id : "HermesRoute",
			header : [ "Routes", {
				content : "selectFilter",
				compare : function match(a, b) {
					return a.toString() == b;
				}
			} ],
			sort : "string",
			adjust : true
		}, {
			id : "Version",
			header : [ "Version", {
				content : "customTextFilter"
			} ],
			sort : "string",
			adjust : true
		}, {
			id : "description",
			header : [ "Description", {
				content : "customTextFilter"
			} ],
			sort : "string",
			adjust : true
		}]
	};
et voil� une grille de donn�e qui s'affiche et qui charge ces donn�es via ajax (bundlesStateUrl)
Il n'y a pas plus de code pour afficher une grille et charger son contenu
un bouton bundlesDatatable.load() et on recharge les donn�es

pour rafra�chir les donn�es r�guli�rement un timer appelle de fa�on cyclique le serveur pour avoir les derni�re data.

Cela � un gros inconv�nient. On invoque le serveur lorsque il n'y a pas de nouvelles data et on ne l'invoque pas lorsqu'il y en a
soit on fait un cycle rapide pour avoir toujours les derni�res mais de tr�s nombreuse fois il n'y a rien de neuf et on le fait pour rien
soit on fait un cycle lent et s'il y a du changement on ne le sait que trop tard.

Depuis que cette application a �t� �crite les websocket sont devenu une techno mature. les derni�res version de webix sont capable de l'utiliser.
l'exemple le plus courant est le chat. un chat est une liste de message du coup webix s'est bas� sur cometd faye pour dialoguer avec un seveur cometd.
cometd propose un protocole beaucoup plus complexe que websocket.
il s'agit d'un protocole publication abonnement. le client initie le dialogue et en fonction des capacit� du client et du serveur une forme de dialogue va �tre trouv� parmis lesquels le websocket.

cela implique d'embarquer dans sont serveur tous ce syst�me de dialogue ce qui n'est pas n�cessairement ce qu'on veut ou peut. deplus les information que pousse le serveur vers le client sur un canal sont de la forme ajouter A, supprimer B, Modifier C etc.

l� encore ce n'est pas n�cessairement ce qui correspond au besoin.

Revenons � mon cas une grille contient un ensemble de lignes avec des valeurs d'indicateurs. l'ensemble des lignes (petit nombres) entre dans la page
� chaque nouvel �tat la majorit� sinon la totalit� des valeurs ont chang�es beaucoup de ligne supprim�es et beaucoup de lignes ajout�es.
en clair il est beaucoup plus simple et efficace de recevoir toutes les donn�es � chaque fois. si je suis caricatural j'ai 100 lignes j'en supprime 50 ajoute 50 et modifie 49
avec un syst�me comme faye j'ai 50 ordre de suppression 50 ordre d'ajout et 49 de modification soit 149 ordres si je re�ois tout j'ai 100 lignes.

pour les graphes deux cas � chaque it�ration sur 30 valeur j'en supprime 1 et en ajoute 1 ou � chaque it�ration l'ensemble des valeurs � chang� dans les deux cas les s�ries (nom des indicateurs) sont fixe. pour le premier cas faye est bien � chaque it�ration je re�ois une suppression et un ajout par indicateur. pour le second l'envoi de la totalit� des donn�es est pr�f�rable.


Ce qu'il se cache derri�re l'attribut url de la datatable est en fait bien plus compliqu�
implicitement une dataColection est cr�e et associ� � la table � cette data collection est aussi associ� un proxy de lecture/�criture des donn�es
avec une simple url il s'agit par d�faut d'ajax en json. mais on peut utiliser bien d'autre format et aussi choisir son protocole. il y a un proxy indexdb pour �crire dans la base indexdb du browser, localstorage, rest, faye, etc.

toute vue associ� � la dataCollection est mise � jour automatiquement lorsqu'une donn�es est chang�e. tout composant qui modifie une donn�e emp�che toute modification le temps de l�op�ration. en clair c'est magique on s'occupe de rien.

la forme des url est classique si on veut utiliser un proxy la syntaxe est simple
Code : S�lectionner tout - Visualiser dans une fen�tre � part
url : "rest->/data/mouthresults"
La mise � jour des donn�es via websocket a donc consist� � cr�er un nouveau type de proxy
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
//proxy.js file
//define au new proxy for websoket
 
(function() {
	var webSocketProxy = {
		$proxy : true,
		load : function(collection, callback, params) {
			// just register the collection to be updated
			this.collections.push(collection);
		},
		// create the websoket to be connected
		init : function() {
			this.collections = [];
 
			if (!window.WebSocket) {
				webix.message({
					text : 'WebSocket not supported by this browser',
					type : 'error',
					expire : -1
				});
			} else {
				// internal websocket object
				var server = {
					connect : function() {
						var location;
						if (this.source.startsWith("//")) {
							location = 'ws:' + this.source;
						} else {
							location = 'ws://' + window.location.host
									+ this.source;
						}
						webix.message({
							text : location,
							type : 'debug'
						});
						this.ws = new WebSocket(location);
								this.ws.collections = this.collections,
								this.ws.source = this.source,
 
								// send a message to server after open socket
								this.ws.onopen = function() {
									this.send({
										text : 'websockets are open for communications!'
									});
								};
 
						// on recive message
						this.ws.onmessage = function(m) {
							if (m.data) {
								// webix.message(m.data);
 
								var json = webix.DataDriver.json.toObject(
										m.data, false)
								// console.log(json);
								for (var i = 0; i < this.collections.length; i++) {
									if (this.collections[i].data) {
										this.collections[i].data._parse(json);
									}
								}
							}
						};
 
						// alert when server close connection
						this.ws.onclose = function(m) {
							webix.message({
								text : 'ws closed',
								type : 'error',
								expire : -1
							});
							server.ws = null;
						};
					},
 
					init : function(collections, source) {
						this.collections = collections;
						this.source = source;
					},
 
					send : function(text) {
						if (text != null && text.length > 0)
							if (this.ws)
								this.ws.send(message);
					}
				};
				server.init(this.collections, this.source);
				server.connect();
			}
 
		}
	};
 
	// register the proxy in webix
	webix.proxy.ws = webSocketProxy;
})();
l'url de ma vue est devenue

Code : S�lectionner tout - Visualiser dans une fen�tre � part
url : "ws->/data/mouthresults"
et c'est tout.
lorsque la vue est cr�e la dataCollection l'est aussi "ws->" d�clencha la cr�ation du proxy et son initialisation
le web socket est cr��.
lorsque la dataCollection est initialis�e elle appelle la m�thode load. le proxy enregistre la collection comme devant �tre mise � jour.

� chaque message re�u du serveur on r�cup�re le json et on le met dans la collection.
toutes les vues sont mise � jour.

pour vous donner une id�e du r�sultat (ce n'est pas mon code pas de web socket sur snippet)
https://snippet.webix.com/jetmenu
vous avez l� une micro exemple (notez qu'en 50 ligne vous avez une appli �videmmentsimple)


� la ligne 13 enlevez autoconfig ajout� la d�finition des colonnes et l'url url : "ws->/data/mouthresults".
enlevez les 15 16 17 et la grille lorsque vous cliquez sur data est mise � jour en temps r�el

A+JYT