Actualiser div toutes les secondes avec ajax et afficher nouveau div avec les div existants

J’ai une page Web sur laquelle je souhaite afficher la liste des utilisateurs connectés à mon site Web et les connexions entre eux.

J’ai des utilisateurs et des connexions entre eux:

var data=[ { "Id": 38, "Connections":[39,40], "Name":"ABc" }, { "Id": 39, "Connections":[40], "Name":"pqr" }, { "Id": 40, "Connections":[], "Name":"lmn" }]

Dans l’exemple ci-dessus, l’utilisateur avec Id:38 est connecté à l’ user 39 and 40 et l’ user 39 is connected to user 40 and user 40 est déjà connecté à l’ user 39 and user 38 so user 40 Connection array is blank .

J’ai un service Web que je déclencherai toutes les 1-2 secondes pour afficher les utilisateurs récemment connectés sur cette page, ainsi que les nouvelles connexions entre les utilisateurs existants enregistrées dans ma table et ce service Web récupérera tous les utilisateurs avec leurs connexions.

Donc, au début, ma page va se charger, mais après, ma page ne s’actualise pas et les nouveaux utilisateurs doivent s’afficher et les nouvelles connexions doivent être connectées avec un appel AJAX à mon service Web.

Jusqu’à présent, j’ai réussi à afficher les utilisateurs et les connexions entre eux, mais je suis maintenant bloqué avec l’actualisation automatique de la division dans un délai de 1 à 2 secondes afin que de nouvelles connexions soient établies sans établir de connexions précédentes.

À l’heure actuelle, c’est ce qui se passe lorsque j’actualise ma division.

J’utilise ce plugin: Jquery-connections.js

C’est une démo que j’ai faite; s’il vous plaît ignorez js que j’ai gardé en html car c’est un plugin (Jquery-connections.js): JS bin Demo

Selon les points de discussion que nous avons atteint pour résoudre les problèmes:

remplacez les éléments div par canvas pour faciliter et accélérer le rendu.
utilisez la bibliothèque js tierce pour rendre les nœuds et les arêtes dans la zone de dessin.