Discussion :

[vbaguet]

Bonjour à tous,

Alors voilà, j'ai réalisé le compteur de la dette belge qui s’incrémente à chaque seconde, j'aimerais que ce nombre soit sauvegarder dans une base de données, ce qui implique qu'il doit etre sauvegarder à chaque seconde... Parce que pour le moment le chiffre revient à son nombre inital à chaque rafraichissement...
Mais comment faire ? Utiliser ajax pour appeler un fichier php ?
Cela ne va pas perturber la fluidité de mon site web ?

Voici mon script :

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
 
function format(number)
{
	number=''+Math.round(number);
	if(number.length>3){
		var mod = number.length % 3;
		var output = (mod>0?(number.substring(0,mod)):'');
		for(var i=0;i<Math.floor(number.length/3);i++){
			if((mod==0)&&(i==0))output+=number.substring(mod+3*i,mod+3*i+3);
			else output+='.'+number.substring(mod+3*i,mod+3*i+3);
		}
		return(output);
	}else return number;
}
 
var CurrentNumber = 361618312416;
 
function Increment() {
 
var Number  = 453;
 
CurrentNumber = Math.floor(CurrentNumber + Number);
 
Timer = document.getElementById("number");
 
Timer.innerHTML = format(CurrentNumber) + " €";
 
}
 
window.setInterval("Increment()", 1000);

Si vous avez d'autres solutions n'hésitez pas...

Un grand merci !

[SpaceFrog]

bdd => server
=> ajax

par contre toutes les secondes c'est un peu trop court
on table en général sur 3 secondes pour les ajax itératifs

[vbaguet]

Alors voilà ce que j'ai fait pour le moment, mais cela ne fonctionne pas le chiffre stocké dans la base de donées est toujours : 2147483647 je comprend pas, peut-être que vous pourrez m'éclairer :

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
 
 
function saveNumber(number){
	// The XMLHttpRequest object
	var xmlHttp;
	try{
		xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX.");
				return false;
			}
		}
	}
 
	xmlHttp.onreadystatechange = function (){ 
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") 
            eval(xmlHttp.responseText); 
    }
 
	var url = "file.php";
 
	xmlHttp.open("POST", url, true); 
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 
    xmlHttp.send("current="+number); 
    return true; 
}
 
function format(number)
{
	number=''+Math.round(number);
	if(number.length>3){
		var mod = number.length % 3;
		var output = (mod>0?(number.substring(0,mod)):'');
		for(var i=0;i<Math.floor(number.length/3);i++){
			if((mod==0)&&(i==0))output+=number.substring(mod+3*i,mod+3*i+3);
			else output+='.'+number.substring(mod+3*i,mod+3*i+3);
		}
		return(output);
	}else return number;
}
 
var CurrentNumber = 361618312416;
 
function Increment() {
 
var Number  = 453;
 
CurrentNumber = Math.floor(CurrentNumber + Number);
 
Timer = document.getElementById("number");
 
Timer.innerHTML = format(CurrentNumber) + " €";
 
saveNumber(CurrentNumber);
 
}
 
window.setInterval("Increment()", 1000);

file.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
 
if (isset($_POST['current']) && is_numeric($_POST['current']))
{ 
        $number = $_POST['current']; 
        $con = mysql_connect("localhost", "xxxxxx", "xxxxxx");
        mysql_select_db("xxxxxxx", $con);
        
        mysql_query("UPDATE we_debtnumber SET number=$number WHERE id='1'");
        
        mysql_close($con);
}
?>

Merci !

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var Number  = 453;

Malheureux ! Number est déjà le nom d'un objet natif de JavaScript !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") 
     eval(xmlHttp.responseText);

eval is evil !!! Surtout sur le retour d'une requête AJAX ! En plus, comme ton script file.php semble ne rien renvoyer, cette ligne est uniquement utile à ceux qui pirateraient ton serveur...

[vbaguet]

Ok c'est noté mais je met quoi à la place du eval ?

Et mon problème reste le meme au sujet de la BDD...

[vbaguet]

Pour la base de données, c'est ok. J'avais oublié de mettre mon nombre en double...

Donc maintenant le nombre de ma base de donnees s'incremente correctement toutes les secondes. Mon problème maintenant est de recuperer ce nombre pour l'afficher dynamiquement avec ajax...

[vbaguet]

Voici mon script pour l'instant:

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
95
96
97
98
99
100
101
102
103
 
 
function saveNumber(nombre){
	// The XMLHttpRequest object
	var xmlHttp;
	try{
		xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX.");
				return false;
			}
		}
	}
 
	xmlHttp.onreadystatechange = function (){ 
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
	{}
    }
 
	var url = "http://www.holding-paragon.com/wecitizens/file.php";
 
	xmlHttp.open("POST", url, true); 
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 
    xmlHttp.send("current="+nombre); 
    return true; 
}
 
function format(object)
{
	object = '' + Math.round(object);
	if(object.length > 3)
	{
		var mod = object.length % 3;
		var output = (mod > 0 ?(object.substring(0,mod)): '');
		for(var i=0; i<Math.floor(object.length/3); i++)
		{
			if((mod==0)&&(i==0))
			{
				output+=object.substring(mod+3*i,mod+3*i+3);
			}
			else
			{
				output+='.'+object.substring(mod+3*i,mod+3*i+3);
			}
		}
		return(output);
	}
	else
	{
		return object;
	}
}
 
function getNumber(){
	// The XMLHttpRequest object
	var xmlHttp;
	try{
		xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
			try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("Your browser does not support AJAX.");
				return false;
			}
		}
	}
 
	xmlHttp.onreadystatechange = function (){ 
        if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
		{
			var finalNumber = Number(xmlHttp.responseText);
			var timer = document.getElementById("number");
			timer.innerHTML = format(finalNumber) + " €";
			var newNumber = finalNumber + 453;
			saveNumber(newNumber);
		}
 
    }
 
	var url = "http://www.holding-paragon.com/wecitizens/file2.php";
 
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
 
}
 
window.setInterval("getNumber()", 1000);

Malheureusement cela ne fonctionne pas très bien. En effet le chiffre du compteur diminue parfois, on dirait que le chiffre stocké dans la bdd et la chiffre dans le compteur ajax sont différents...
A mon avis la méthode que j'utilise est pas bonne il faudrait sauver dans la base de données toutes les 5 secondes par exemple mais comment faire ?

Autre chose j'aimerais que le compteur démarre à 20.000.000 mais si je modifie directement dans la bdd la valeur repasse directement à une chiffre inférieur, je ne comprend pas... alors qu'il faudrait que ce chiffre passe à 20.000.453 :/

[SpaceFrog]

pour ce genre de script, il serait plus pertinent d'avoir un page coté serveur qui renvoie une valeur à un instant t et incrémenter cette valeur au moyen d'un script js
Ainsi à chaque rechargement de page tu repars d'une valeur actualisée..

[vbaguet]

Vous pourriez etre un peu plus précis ?

Donc juste deux fichiers, un php un js. Et le lien entre les deux ?

[SpaceFrog]

Un seul fichier suffit
Sur ta page tu fais juste un echo de ta valeur, calculée à partir de la date et de l'heure ... pour passer au script js la la valuer de départ

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php 
$starval= // calcul savant qui retourne la valuer de depart
?>
<script type="text/javascript">
var startvalue=<?php echo $startval; ?>;
 
//et ici ton script js d'incrémentaiton ...

[vbaguet]

J'y vois deja un peu plus clair, mais pourquoi ai-je besoin de la date et de l'heure ? Et dans cette meme page je peux sauver la valeur dans la BDD ?

[SpaceFrog]

tu peux mettre cette valeur en BDD si tu veux, mais d'après ce que je comprends tout le monde doit à un instant t partir de la même valeur non ?

[vbaguet]

En fait le compteur ne doit jamais s'arreter. C'est le compteur de la dette. Donc si un utilisateur vient 1 mois plus tard, la dette sera nettement supérieure à celle qu'il a vu un mois avant...

[SpaceFrog]

donc il te suffit de calculer la valeur de depart à partir de la date et heure coté serveur ...

[vbaguet]

J'ai fait comme ceci mais j'ai un chiffre negatif xD ca me semble correct pourtant :

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
 
 
var dateOrigine = new Date(2012,10,1); // Pour 1 octobre 2012
var detteOrigine = 3000000;
var increment = 453; // chaque seconde ta dette augmente de 453 unités
 
function augmenteDette()
{
    var now = new Date();
    // nombres de millisecondes écoulées entre maintenant et la date d'origine
    var deltamillisecondes = now.getTime() - dateOrigine.getTime();
    // on calcul notre nouvelle dette
    var nouvelleDette = detteOrigine + (deltamillisecondes/1000)*increment;
	var timer = document.getElementById("debt");
	timer.innerHTML = nouvelleDette;
}
 
window.setInterval("augmenteDette()", 1000);

Ou est le soucis ? Je crois que je touche au but...

[SpaceFrog]

je conseillerais cependant de partir d'une valuer calulée par le serveur a un instant t

là tu te bases sur la date locale qui peut ne pas etre bonne !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function augmenteDette()
{
    var now = new Date();
    // nombres de millisecondes écoulées entre maintenant et la date d'origine
    var deltamillisecondes = now.getSeconds() - dateOrigine.getSeconds();
    // on calcul notre nouvelle dette
    var nouvelleDette = detteOrigine + deltamillisecondes*increment;
	var timer = document.getElementById("debt");
	timer.innerHTML = nouvelleDette;
}
 
function launch(){
foo=setInterval(augmenteDette, 1000);
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<body onload="launch()">
<div id="debt"></div>

[vbaguet]

Un grand merci de ta patience tout fonctionne parfaitement :

Mon script pour ceux que ca interesse :

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
 
 
var dateOrigine = new Date(18,10,2012); 
var detteOrigine = 361618312416;
var increment = 453; 
 
function augmenteDette()
{
    var now = new Date();
    // nombres de millisecondes écoulées entre maintenant et la date d'origine
    var deltamillisecondes = now.getSeconds() - dateOrigine.getSeconds();
    // on calcul notre nouvelle dette
    var nouvelleDette = detteOrigine + deltamillisecondes*increment;
	var timer = document.getElementById("debt");
	timer.innerHTML = format(nouvelleDette) + " €";
}
 
currentDebt = setInterval(augmenteDette, 1000);