[RESOLU] Messagerie - Notification instantanée Ajax et Php PDO

par **jaxfk** » 09 mars 2016, 22:02

Bonsoir! pourrais tu me passé le fameux tu pour la messagerie instantanée??

par **Perine** » 21 févr. 2013, 20:45

[javascript]
// Mauvais
setTimeout(function(){getNotifications()},3000);
// Bon - à noter que les paranthèses ont disparu.
setTimeout(getNotifications,3000);
[/javascript]
8 fois sur 10 la seconde syntaxe ne permet pas d'envoyer des paramètres correctement dans la fonction. Bon ici il n'y en a pas besoin mais s'il il y a une syntaxe à retenir et qui fonctionne dans tous les cas c'est la première et pas la deuxième. D'où sort tu que la première syntaxe est mauvaise ?

Désolée, c'est le mauvais code JS que j'ai copié. Bien entendu, je parlais de la version eval() avec la chaine de caractères. Pour ce qui est du Long Polling et websockets : Google est ton ami.

par **nico44530** » 21 févr. 2013, 18:09

Dans tous les cas, avec des websockets ou en ajax normal, ça encombre le serveur ?
Quelqu'un sait comment faire avec les websockets ?

par AB » 21 févr. 2013, 17:39

[javascript]
// Mauvais
setTimeout(function(){getNotifications()},3000);
// Bon - à noter que les paranthèses ont disparu.
setTimeout(getNotifications,3000);
[/javascript]

8 fois sur 10 la seconde syntaxe ne permet pas d'envoyer des paramètres correctement dans la fonction. Bon ici il n'y en a pas besoin mais s'il il y a une syntaxe à retenir et qui fonctionne dans tous les cas c'est la première et pas la deuxième. D'où sort tu que la première syntaxe est mauvaise ?

par **nico44530** » 21 févr. 2013, 14:25

Merci pour t'a réponse
Je vais utiliser Websockets comme tu dis, mais il n'est pas pris en charge par tous les navigateurs ?
Je ne connais pas cette fonction, peux-tu m'expliquer comment faire ?

Merci

par **Perine** » 21 févr. 2013, 09:06

<li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>

Tu ne définis la classe notification que si le count est > 0 lors de la construction par PHP de la page. Les requêtes Ajax se font bien, mais l'objet jQuery n'a aucun élément pour remplir le résultat de sa requête.

À noter plusieurs détails : pourquoi utilises-tu une classe et pas un id pour cet élément ? Il est unique, non ?
Lorsqu'on bombarde un serveur de requêtes de cette façon, il vaut mieux employer du long polling et/ou des websockets. Ton serveur ne tiendras pas si tu as des centaines d'utilisateurs connectés en même temps.
Il est déconseillé d'utiliser setTimeout avec une chaine de caractères en premier paramètre.
C'est bien mieux comme ça :
[javascript]
// Mauvais
setTimeout(function(){getNotifications()},3000);
// Bon - à noter que les paranthèses ont disparu.
setTimeout(getNotifications,3000);
[/javascript]

D'ailleurs je te conseille de mettre ce setTimeout dans la fonction de success - que tu utilises du long polling ou non, c'est la meilleure chose à faire pour ne pas se faire chevaucher inutilement des requêtes.

Évite de faire select *, même si tu veux récupérer tous les champs. Non seulement ta requête deviendra plus claire - surtout si tu devras retourner dans ce code quelques mois plus tard -, mais en plus, tu éviteras des problèmes dûs à l'ordre des champs.

par **nico44530** » 21 févr. 2013, 05:52

Merci pour t'a réponse
Toujours la même erreur

par AB » 21 févr. 2013, 05:11

Visiblement la requête ajax ne se fait pas ?
Essaies peut-être la syntaxe longue pour setTimeout :

Code : Tout sélectionner

setTimeout(function(){getNotifications()},3000);

Sinon tu as une contradiction dans tes charsets : bdd champ "contenu" en latin1_swedish_ci et le reste (connexion bdd et html) en utf-8.

par **nico44530** » 21 févr. 2013, 04:36

Bonjour,

J'ai suivi un tuto à la lettre, il fonctionne mais pas comme je l'avais imaginé :

Le problème c'est qu'il n'affiche pas la notification dès qu'on reçois un message, on est obligé de recharger la page.
Donc ce n'est pas vraiment de l'ajax.
C'est seulement quand je recharge la page, que la notification affiche un "1" que l'ajax marche.

Vous pouvez tester, voici les codes entier pour mieux comprendre :

Merci pour votre aide

La base de donnée à entrée manuellement :

id INT(11) Auto incre
contenu TEXT latin1_swedish_ci
lu TINYINT(1)
date TIMESTAMP CURRENT_TIMESTAMP

La page connect.php :

$bdd = new PDO('mysql:host=localhost;dbname=tuto','root','root');
$bdd->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_WARNING);
$bdd->exec('SET NAMES utf8');

La page index.php :

<?php
require('connect.php');

$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));

$data = $req->fetch(PDO::FETCH_OBJ);

$count = $data->row;
?>

<!DOCTYPE html> 
<html lang="fr"> 
<head>
<meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  <head>
  <title></title>
  </head>
  <body>
      <div id="content">
        
        <div id="menu">
            <ul>
                <li><a href="index.php">Accueil</a></li>
                <li><a href="#">Compte</a></li>
                <li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>
            </ul>
        </div>
        
        </div>
  </body>
</html>

La page message.php qui affiche le message à lire :

<?php
if(empty($_GET['id'])){exit;} else{$id = $_GET['id'];}

require('connect.php');

$req = $bdd->prepare('UPDATE notifications SET lu=:lu WHERE id=:id');
$req->execute(array(':lu'=>true, ':id'=>$id));

$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));

$data = $req->fetch(PDO::FETCH_OBJ);

$count = $data->row;
?>

<!DOCTYPE html> 
<html lang="fr"> 
<head>
<meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  <head>
  <title></title>
  </head>
  <body>
      <div id="content">
        
        <div id="menu">
            <ul>
                <li><a href="index.php">Accueil</a></li>
                <li><a href="#">Compte</a></li>
                <li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>
            </ul>
        </div>
        
        <div id="messages">
          
         <?php
         $req = $bdd->prepare('SELECT * FROM notifications WHERE id=:id');
         $req->execute(array(':id'=>$id));
         $data = $req->fetch(PDO::FETCH_OBJ);
         ?>
         
         <div class="message">
          <?php echo $data->contenu;?>
          </div>
          
        </div>
        
        </div>
  </body>
</html>

La page messages.php qui regroupe tous les messages non lu et lu :

<?php
require('connect.php');

$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));

$data = $req->fetch(PDO::FETCH_OBJ);

$count = $data->row;
?>

<!DOCTYPE html> 
<html lang="fr"> 
<head>
<meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  <head>
  <title></title>
  </head>
  <body>
      <div id="content">
        
        <div id="menu">
            <ul>
                <li><a href="index.php">Accueil</a></li>
                <li><a href="#">Compte</a></li>
                <li><a href="messages.php" <?php if($count>0):?> class="notification" data-notification="<?php echo $count;?>" <?php endif;?>>Messages</a></li>
            </ul>
        </div>
        
        <div id="messages">
          
          <?php $req = $bdd->prepare('SELECT * FROM notifications ORDER BY lu,id DESC');
          $req->execute();
          while($data = $req->fetch(PDO::FETCH_OBJ)):?>
          
          <div class="message" <?php if(!$data->lu):?> style="background:#e4f4fe;" <?php endif;?>>
          
            <div class="read"><a href="message.php?id=<?php echo $data->id;?>">Voir</a></div>
            <?php echo $data->contenu;?>
          </div>
          
          <?php endwhile;?>
          
        </div>
        
        </div>
  </body>
</html>

La page notification.php qui est rechargé via l'ajax :

<?php
require('connect.php');

$req = $bdd->prepare('SELECT COUNT(id) as row FROM notifications WHERE lu=:lu');
$req->execute(array(':lu'=>false));

$data = $req->fetch(PDO::FETCH_OBJ);

echo $data->row;
?>

Le script ajax :

[javascript]
function getNotifications()
{
$.ajax({

type: 'POST',
url: 'notifications.php',
success: function(data){
if(data>0){
$('.notification').attr('data-notification', data);
}
}
});

setTimeout('getNotifications()', 5000);

}

$(document).ready(function(){
getNotifications();
});
[/javascript]

Le fichier CSS, c'est plus joli pour tester :

body{
    background:#f0f0f0;
}

.notification:after{
    content:attr(data-notification);
    background:#bc0000;
    color:white;
    padding:0 5px;
    margin-left:5px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

#menu{
    margin:20px;
    width:500px;
}

#menu ul{
    background:#3B5998;
    padding:10px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
}

#menu ul li{
    display:inline;
    list-style-type:none;
    padding:5px;
    margin:10px;
    font-size:1.1em;
}

#menu ul li a{
    text-decoration:none;
    color:#f7f7f7;
}

#messages{
    margin:20px 0;
}

.message{
    border-bottom:solid 1px #a7a7a7;
    width:500px;
    margin-left:20px;
    margin-bottom:20px;
}

[RESOLU] Messagerie - Notification instantanée Ajax et Php PDO

Répondre

Étendre la vue Revue du sujet : [RESOLU] Messagerie - Notification instantanée Ajax et Php PDO

Re: [RESOLU] Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Re: Messagerie - Notification instantanée Ajax et Php PDO

Messagerie - Notification instantanée Ajax et Php PDO