Implémenter barre de progression rendant compte de l'état d'1 traitement long, asynchrone, côté serveur

**Johann7751** · 30/05/2012, 11h45

Bonjour,

Présentation du contexte :

Je développe une application en ASP.NET / C# 3.5.

J'ai une page spéciale, où je me suis complètement désolidarisé de ASP.NET.
Qu'est ce que ça veut dire ?
Ca veut dire que pour cette page, j'écris tous le HTML à la main.
Je n'ai aucun code behind. A part le Page_Load (où je ne fais rien), je n'ai aucun code, aucun évènement serveur écrit dans le code behind de la page.
Je gère tous les évènements dans ma page en javascript + ajax grâce à JQuery.
J'utilise la fonction $.ajax de JQuery pour appeler toutes mes methodes C# effectuant les traitements côté serveur.
Mes méthodes codées en C#, sont toutes situées dans un WebService.

Problématique :

La page que je développe me permet de réaliser des traitements sur des articles.
Je peux réaliser des traitements sur 1 000 000 d'articles.
Dans le cas où il y a beaucoup d'articles à traiter, le traitement côté serveur peut être très long.

Actuellement je gère les traitements de la façon suivante :
Côté interface utilisateur, quand je démarre un traitement, j'appelle ma fonction $.ajax en JQuery qui appelle ma méthode côté serveur qui réalise le traitement.
Ma fonction en ajax est asynchrone.
J'affiche une popup d'attente (popup JQuery UI) à l'utilisateur pendant toute la durée du traitement.

Mon problème est que je veux afficher une barre de progression à l'utilisateur, ce qui est particulièrement appréciable dans les cas de longs traitements.
Niveau graphique, je vais utiliser la progressbar de JQuery UI.
Mais comment communiquer régulièrement au client l'état d'avancement de ma requète exécutée sur le serveur ?

En lisant quelques sujets sur la question ici et là, j'ai un début de solution (que je n'ai pas mis en pratique) :

- Il faut qu'on ai a dispo une base de donnée.avec une table contenant 2 champs : champ 1 = nb d'articles total à traiter ; champ 2 = nb d'articles traités

- Dans ma requète principale, je fais une boucle foreach pour traiter un à un mes articles. A la fin de chaque tour de boucle, je dois sauvegarder l'état d'avancement du traitement en base de données.

- Côté client, après avoir lancé ma requète principale (le traitement des articles), je dois lancer à intervalle régulier une 2eme requete qui lirais l'état d'avancement de la requete principale dans la base de données et le retournerait au navigateur.
Avec le resultat de la 2ème requete (qui retournerait le nombre d'articles traités), je fais avancer ma barre de progression JQueryUI en conséquence.

J'ai 3 questions :
1) Avant de me lancer, est ce que ce schéma vous semble réalisable techniquement ?
2) Comment implémenter un timer en Jquery ?
3) Avez vous une solution plus simple que cela ?

Merci de votre aide.

**SpaceFrog** · 30/05/2012, 11h49

3) http://docs.jquery.com/UI/Progressbar

**Johann7751** · 30/05/2012, 12h04

Oui la progressbar JQuery UI j'ai vu et je sais l'utiliser.
C'est une barre de progression de ce type que je souhaite utiliser graphiquement.

Mais les vrais questions que je me pose ici :
- des avis sur implémentation d'un tel système
- les moyens que vous avez trouvés pour communiquer entre un processus long s'exécutant côté serveur et le client (navigateur) .. Ma solution vous semble t-elle cohérente ? N'y a t-il pas mieux à faire ?
- comment implémenter un Timer en Jquery ? (il existe des plugin JQuery par exemple mais je n'ai réussi à n'en télécharger aucun..)

**SpaceFrog** · 30/05/2012, 12h43

jquery = js
=>setInterval

Et à part réinventer l'eau tiède ??
L'avancement n'est en effet disponible que par récupération d'un ratio coté serveur...
traité / total ...
le serveur n'est accessible sans rechargement que par ajax
le tour sur une échelle de temps => intervalles ...

a part un iframe caché sur la page avec une balise meta refresh ...

**Bovino** · 30/05/2012, 13h40

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
<!DOCTYPE html>
<html lang=fr>
<head>
<meta charset=utf-8>
<title>Progress</title>
</head>
<body>
 
<progress id="progression" value="0" max="100"></progress>
<div id="fin">0 %</div>
<script>
var progress = document.getElementById('progression'),
	fin = document.getElementById('fin');
function progresse(){
	if(progress.value < 100){
		progress.value += 5;
		console.log(progress.value);
		fin.innerHTML = progress.value + ' %';
		setTimeout(progresse, 100);
	}
	else{
		progress.value = 100;
		fin.innerHTML = 'Progression terminée !'
	}
}
setTimeout(progresse, 100);
</script>
</body>
</html>

Implémenter barre de progression rendant compte de l'état d'1 traitement long, asynchrone, côté serveur

jQuery

Discussions similaires

Partager

Partager