Discussion :

[topolino]

Bonjour,

Dans mon projets je dois rafraichir un certain nombre de données toutes les secondes.
Ce qui me derrange c'est que l'affichage est assez peu sexy du coup, comment pourrais je rendre l'llusion que mes données ne se raffraichissent pas toutes les secondes.
Comment mettre un delay aleatoires sur tous le flots de données que je recois ? Pour qu'on est l'impression que les données arrivent en flux continu.

Merci pour vos conseils

[SpaceFrog]

Pour commencer, un rafraichissement toutes les secondes ... c'est bien court comme délai, en fonction du réseau et donc du débit, je ne suis pas sur qu'un ajax puisse à tous les coups répondre dans la seconde !

Ensuite un simple setTimeout sur l'affichage avec un délai randomifié.

[topolino]

Je n'utilise pas Ajax mais les websockets, donc de ce cote la il n'y a aucun soucis.
Je croyais que un setTimeout etait deconseillé en Javascript

[Kaamo]

EDIT : Tu utilises déjà les WebSockets, oublie donc mon message que j'écrivais pendant ta réponse

L'ère du "long polling" (rafraîchissement toutes les X secondes via AJAX) est terminée.
Pour un besoin de ce genre, renseigne toi sur les WebSockets.

En (très) gros :

Ajax (support tout navigateur) : request HTTP -> response. Création d'une connexion au serveur, envoie de headers, attendre la réponse du serveur, fermeture de la connexion.

Long polling via AJAX (support tout navigateur) : request HTTP -> wait -> response. Même création que ci-dessus, sauf que tu maintiens une connexion (keep-alive) pour une courte durée. Après tu tombes dans un timeout ou fin de fichier (eof) et le client doit se reconnecter au serveur.

WebSockets (très bien supporté, sauf IE9-) : client <> serveur. ce n'est plus du HTTP, sauf pour le premier contact ("handshake") entre le client et le serveur. C'est une connexion TCP bi-directionnel, donc une fois le client connecté, il reste connecté et le serveur peut envoyer (push) des données aux clients. C'est clairement ce que je te recommande pour ton besoin.

[Bovino]

Je croyais que un setTimeout etait deconseillé en Javascript

Il faut toujours se méfier de ses croyance.

Ensuite, si tu utilises les websockets, pourquoi actualises-tu toutes les secondes et pas quand les valeurs sont modifiées ?

[topolino]

Je fais un terminal financier, il s'agit de millers d'update par seconde, le browser ne le supporte pas par rapport a une appli native. Il a fallu faire des choix.
Tous les updates sont envoyés en 1 fois toutes les secondes.
Quand je vois mes 200 instruments se raffraichir tous en meme temps, cela fait assez moche.

[yahiko]

Pour que cela fasse moins moche (même si je ne suis pas sûr que cela soit très pertinent pour une application financière), tu peux prioriser les rafraîchissements en fonction du type de données.

Pour les informations jugées les plus importantes et volatiles, tu peux faire un rafraichissement toutes les secondes voire toutes les demi-secondes.
Pour d'autres informations moins cruciales à suivre en temps réelles, tu peux opter pour une fréquence plus faible.

Cela permettra à l'attention de l'utilisateur d'être attirée vers les données importantes car changeantes.

[NoSmoking]

Bonjour,
comment est réalisée ta mise à jour, à grand coup de innerHTML ou à petite dose de textContent ?

[SylvainPV]

Donner l'illusion que ? Ajouter des délais aléatoires ? C'est un spectacle de magie ou une vraie application ?

[topolino]

J'utilise les textcontent.

Je ne demande pas de juger pourquoi je désire avoir ce résultat, mais d'essayer de me donner des conseils sur comment le faire, je demande un avis technique et non fonctionnelle.

Je vais essayer le setTimeOut avec un delay aleatoire en fonction du nombre d'instruments que je monitore.

Je vous tiens au courant.

Merci à vous.

[NoSmoking]

...du nombre d'instruments...

la notion d'instrument m'échappe qu'est ce ?

[topolino]

Pardon, un instrument == un symbol == EUR.
EUR, GBP, CAD, GOOG.... ce sont des instruments. Pour une question de performance et de bande passante, nous avons une conflation / delay des données et nous les envoyons toutes en meme temps toute les secondes.

Pour éviter l'effet flash toute les secondes qui déplaît fortement auxutilisateurs, j'aimerai les afficher de facon plus sexy.

[NoSmoking]

Dans ce cas le symbole n'a pas besoin d'être ré-affiché, c'est une "constante" écran, il ne faut ré-afficher que la valeur non ?

[yahiko]

Et si la valeur en elle-même ne change pas, il est préférable également de ne pas rafraîchir.

[topolino]

Oui.

Tous les symbols sont dans un tableau avec plusieurs colonnes (Bid, Ask, Last, Change.....)
On me renvoie que les valeurs qui ont changés, donc je dois mettre à jour les colonnes des symbols qui ont changés.

[yahiko]

Comme tu as une arrivée de données par paquet, pour atténuer l'effet "flash", tu peux simplement rafraîchir les valeurs de façon séquentielle avec un délai d'une fraction de seconde entre chaque rafraîchissement de valeur.

Ca fera plus un effet "cascade" que "flash".

[NoSmoking]

Une autre technique consiste à travailler avec 2 plans, un plan(#0) qui est affiché et un plan(#1) que l'on modifie. Quand le plan(#1) est modifié on l'affiche et on fait les modifications sur le plan(#0) et ainsi de suite. (jamais testé en javascript)