Utilisation Ajax et setInterval

**vbaguet** · 14/03/2014, 14h38

Bonjour à tous,

Alors voilà, je souhaite récupérer le nombre de like Facebook pour une URL donnée. Le script PHP fonctionne parfaitement. Mais je veux afficher le nombre de like en temps réel, et donc je fais appel à l'Ajax, mais via la librairie jQuery.

J'ai mis au point un bout de code, mais cela ne fonctionne pas, pourriez-vous m'aider à décrypter le problème ? Apparemment le nombre de like n'est pas rafraichit comme il se doit toutes les 5 secondes.

Voici mon code

Index.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Titre de la page</title>
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="functions.js"></script>
</head>
<body>
<div id="output"></div>
</body>
</html>

likes.php

Code php :

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
<?php
function get_fb_likes($url){
  $query = "select total_count,like_count,comment_count,share_count,click_count from link_stat where url='{$url}'";
   $call = "https://api.facebook.com/method/fql.query?query=" . rawurlencode($query) . "&format=json";
 
  $ch = curl_init();
   curl_setopt($ch, CURLOPT_URL, $call);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   $output = curl_exec($ch);
   curl_close($ch);
   return json_decode($output);
}
 
$fb_likes = reset( get_fb_likes("http://www.cnn.com") );
$likes = $fb_likes->like_count;
echo json_encode($likes);
/*echo $fb_likes->total_count;
echo $fb_likes->comment_count;
echo $fb_likes->share_count;
echo $fb_likes->click_count;*/
?>

functions.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
    function ajax(){
        $.ajax({                                      
            url: 'likes.php',     
            data: "",
            dataType: 'json',    
            success: function(data){
                var nbLikes = data; 
                $('#output').html(nbLikes);
            } 
        });
    }
    setInterval(ajax(),5000);
})(jQuery);

Un grand merci !

**Spartacusply** · 14/03/2014, 14h56

Code php :

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

1
2
$fb_likes = reset( get_fb_likes("http://www.cnn.com") );
$likes = $fb_likes->like_count;

Jamais utilisé l'API facebook mais selon le code ça doit être un objet json qu'elle semble te renvoyer (du coup ce que contient "output"). Or la fonction reset s'applique sur un tableau, et après tu utilise une notation objet. A mon avis y a quelque chose à faire de ce côté là...

**Bovino** · 14/03/2014, 15h07

Déjà :

Code :

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

setInterval("ajax()",5000);

C'est la pire façon de faire un setInterval()...

Code :

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

setInterval(ajax,5000);

est beaucoup plus propre.

Sinon, les requêtes sont par défaut en GET, tu es donc confronté à un problème manifeste de cache : ton script récupère toujours le résultat en cache, donc pas la valeur actualisée.
L'idéal est de passer en POST ou d'utiliser le paramètre cache avec la valeur false.

**vbaguet** · 14/03/2014, 15h14

Si jet mets

Code :

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

setInterval(ajax,5000);

, ca ne fonctionne pas, si je mets

Code :

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

setInterval(ajax(),5000);

, là ca fonctionne.

Donc pour le moment j'ai ceci :

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
 
$(document).ready(function(){
 
    function ajax(){
        $.ajax({                                      
            url: 'likes.php',     
            data: "",
            cache: false,
            dataType: 'json',    
            success: function(data)
            {
                var nbLikes = data; 
                $('#output').html(nbLikes);
            } 
        });
    }
 
    setInterval(ajax(),5000);
 
});

Mais même avec le cache à false, ça ne fonctionne pas... Pour passer en POST, je fais comment ?

**Spartacusply** · 14/03/2014, 15h18

Code :

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

1
2
3
$.ajax({
     type: 'POST',
        .....

**vbaguet** · 14/03/2014, 15h22

Merci j'ai testé, mais cela ne fonctionne toujours pas, j'attends 5 min et toujours pas d'actualisation...

**Bovino** · 14/03/2014, 15h36

Code :

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

setInterval(ajax(),5000);

Ben là, c'est sûr que tu vas pas arriver à grand chose...

Les fonctions de rappel (callback) ou les utilisations cachées de eval()

**Spartacusply** · 14/03/2014, 15h37

Il faut que tu debug ce que contient exactement le retour de l'appel à l'API facebook (le resultat de curl_exec). Je suis complètement sceptique sur l'utilisation des objets et de fonctions d'encodage et décodage json comme ça au ptit bonheur la chance, j'ai vraiment l'impression que tu les utilises à l'aveugle ici.

**Bovino** · 14/03/2014, 15h43

Oui, c'est tout à fait probable...

D'ailleurs, la fonction ajax() est codée dans le même esprit...

Code :

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

1
2
3
4
5
dataType: 'json',    
success: function(data){
    var nbLikes = data; 
    $('#output').html(nbLikes);
}

Si tu dis que tu es supposé recevoir un résultat JSON, tu ne peux pas l'intégrer tel quel dans la page dans le callback success...

**vbaguet** · 14/03/2014, 15h45

Je comprends pas, si je retirer les parenthèses, cela ne m'affiche plus rien...

Envoyé par Bovino

Si tu dis que tu es supposé recevoir un résultat JSON, tu ne peux pas l'intégrer tel quel dans la page dans le callback success...

N'étant pas très au point avec l'ajax, vous me préconisez quoi ? Parce que là je suis perdu...
Merci de votre aide en tout les cas.

**Spartacusply** · 14/03/2014, 15h52

Appel ton fichier php sans ajax dans un premier temps et debug ton script pour voir s'afficher vraiment le nombre de likes (en gros assure toi que ton script php fonctionne correctement). Ensuite seulement quand tu seras sûr de son bon fonctionnement, tu l’intégreras sur ta page avec de l'ajax.

**vbaguet** · 14/03/2014, 16h01

J'ai testé sans l'ajax ca fonctionne et m'affiche correctement le nombre de likes, en vérifiant sur la page Facebook correspondante. Ici le seul problème, c'est que l'Ajax ne met pas à jour le chiffre sauf si je rafraîchi la page, ce qui n'est pas le but...

**Spartacusply** · 14/03/2014, 16h04

Bien, dans ce cas là, qu'est ce qui est exactement affiché à l'écran ? Juste le nombre ? Ou un objet Json ?

**vbaguet** · 14/03/2014, 16h09

Comment le savoir ? :/

**Spartacusply** · 14/03/2014, 16h12

J'ai testé sans l'ajax ca fonctionne et m'affiche correctement le nombre de likes

Qu'est ce qui est affiché à l'écran quand tu fais ca ?

**vbaguet** · 14/03/2014, 16h16

Envoyé par Spartacusply

Qu'est ce qui est affiché à l'écran quand tu fais ca ?

Juste le nombre, j'ai l'impression que c'est mon setInterval qui fonctionne pas...

**vbaguet** · 14/03/2014, 16h24

J'ai trouvé la solution, ca venait bien du set interval

Code :

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

1
2
3
4
 
    setInterval(function(){
 ajax()
},5000);

Mais bizarrement lors du premier affichage cela mets 3-4 secondes avant de s'afficher, après ca se rafraichit automatiquement.
Quelque chose à faire pour ce retard de 3 sec ?