Un Chat en PHP Ajax

Un chat en PHP/AJAX
Par Codel96
www.openclassrooms.com
Licence Creative Commons 6 2.0
Dernire mise jour le 6/05/2012
Sommaire
2 Sommaire ...........................................................................................................................................
3 Un chat en PHP/AJAX .......................................................................................................................
3 Prsentation ......................................................................................................................................................................
3 Fonctionnalits ............................................................................................................................................................................................................
4 Les pr-requis .............................................................................................................................................................................................................
4 Bases de donnes et code HTML .....................................................................................................................................
4 Les tables SQL ............................................................................................................................................................................................................
5 Code HTML/CSS .........................................................................................................................................................................................................
8 Attaquons le PHP ..............................................................................................................................................................
8 Cration des fonctions ................................................................................................................................................................................................
10 Pages appeles en Ajax ............................................................................................................................................................................................
18 Adaptation du fichier chat.php... a faisait longtemps ! .............................................................................................................................................
20 Codons Javascript ! .........................................................................................................................................................
20 Utilisation d'une librairie ............................................................................................................................................................................................
21 Mise en place des fonctions ......................................................................................................................................................................................
26 Annexes ..........................................................................................................................................................................
26 Fonctions en plus ......................................................................................................................................................................................................
29 Amliorations ............................................................................................................................................................................................................
30 Partager .....................................................................................................................................................................................................................
2/31
Un chat en PHP/AJAX
Par Codel96
Mise jour : 06/05/2012
Difficult : Intermdiaire Dure d'tude : 1 heure
Salut tous, braves citoyens !
Si vous tes ici, c'est pour une bonne raison, me tromp-je ? Une seule et unique raison. Vous avez dcid de raliser un chat
pour votre site internet ! Le moins que je puisse dire c'est que vous tes sur la bonne page.
Mais un chat, a peut faire peur. Et oui, car dans la plupart des cas, sa ralisation requiert des connaissances dans plusieurs
domaines. Ceux que nous aborderons dans ce tutoriel seront simplement le PHP et l'AJAX (Javascript). Mais aussi
l'HTML/CSS.
Bon, et bien armez-vous de courage et si vous dsirez toujours continuer, je vous invite poursuivre la lecture de ce tutoriel qui
s'annonce fort en rebondissements !
Que la force soit avec vous, mes amis.
Sommaire du tutoriel :
Prsentation
Bases de donnes et code HTML
Attaquons le PHP
Codons Javascript !
Annexes
Prsentation
Nous nous apprtons commencer programmer, mais avant cela, une petite prsentation s'impose. Et c'est ce que je vais faire.
Alors voil, nous y sommes. Tout d'abord, je vais vous expliquer ce qu'est un chat. Nous verrons comment raliser un chat qui
affiche les x derniers messages envoys, du plus rcent, au plus ancien. Je vous promets que ce sera trs simple. La partie la
plus complique pour les javascrophobes sera de raliser la partie dynamique de ce chat. En effet, nous n'utiliserons aucune
"frame" (fentre intgre dans une autre fentre) dans notre page HTML et l'actualisation des messages se fera uniquement en
AJAX.
Comment dis-tu ? Ajax ?
Oui, j'ai bien dit Ajax. Et je vais ressortir une vieille vanne : pas la lessive, hein ? Pour comprendre l'Ajax si ce terme vous est
inconnu, STOP. Allez directement ici :
AJAX et l'change de donnes en JavaScript
Ce tutoriel est trs explicite et c'est celui dont je me suis servi principalement pour connatre les fonctionnalits de cette merveille.
Fonctionnalits
Venons-en aux fonctionnalits de notre chat. Elles seront trs simples. Notre chat disposera des messages, d'une liste de
connects et enfin : une petite annonce que vous pourrez modifier qui s'actualisera en direct en haut dans le chat.
La fonction de bannissement est mon got, inutile puisqu'il est extrmement facile de contourner un bannissement. Je vous
Sommaire 3/31
laisserais donc vous en occuper si vous le souhaitez. C'est nanmoins une fonction trs intressante pour les sites disposant
d'un espace membre.
Pour notre chat, l'utilisateur arrivera sur une page o on lui demandera de saisir un pseudo. Il sera inscrit dans la base de
donnes. Cette insertion servira de rfrence pour les autres tables. Le pseudo pourra donc tre affich devant chaque message
correspondant. Deux sessions seront cres : une session id qui contiendra l'ID du membre et une session login pour le pseudo.
Si l'une des sessions existe, alors on affiche le chat.
Les pr-requis
Coder en HTML/CSS - HTML5/CSS3
Savoir programmer en PHP - PHP dbutant
Connatre les bases du SQL, ici MySQL - Langage SQL
Il est prfrable d'avoir dj utilis la librairie PDO en PHP. Le cours sur le langage SQL a t mis jour rcemment pour
apprendre l'utiliser. Si vous ne connaissez pas, je vous conseille de vous mettre jour.
Avoir de bonnes bases en Javascript - Javascript
S'y connatre un minimum dans le domaine de l'Ajax, ce dont je ne doute pas aprs le lien que je vous ai donn... n'est-ce
pas ? (bande de coquins !)
Bases de donnes et code HTML
Je pense qu'il est grand temps de commencer expliquer les bases de notre chat. Commenons... par le commencement.
Les tables SQL
Nous allons donc commencer par crer les tables ncessaires au bon fonctionnement du chat. En effet, nous ne fonctionnerons
pas par un systme de fichiers pour crire les messages, mais par MySQL que vous connaissez tous ! Je trouve ce systme
plus simple manipuler et modifier. Il vous sera donc possible d'y rajouter les fonctionnalits que vous souhaitez trs facilement.
Pour nos tables, nous aurons besoin d'une table pour les membres connects, donc avec la dernire date de connexion, d'une
table avec les messages et enfin, d'une table contenant l'annonce apparaissant en haut du chat !
Voil le code SQL pour la cration de nos tables avec nos meilleures explications :
Les tables :
chat_messages > La table contenant l'ensemble des messages
chat_online > Table contenant les membres connects au chat
chat_annonce > Contient l'annonce visible en haut du chat
chat_accounts > Table des membres qui se sont connects
Secret (cliquez pour afficher)
Code : SQL
--
-- Structure de la table `chat_messages`
-- - message_id > L'ID du message
-- - message_user > L'ID de l'utilisateur
-- - message_time > La date d'envoi
-- - message_text > Le contenu du message
--
CREATE TABLE IF NOT EXISTS `chat_messages` (
`message_id` int(11) NOT NULL auto_increment,
`message_user` int(11) NOT NULL,
`message_time` bigint(20) NOT NULL,
`message_text` varchar(255) collate latin1_german1_ci NOT NULL,
PRIMARY KEY (`message_id`)
) ENGINE=MyISAM ;
--
-- Structure de la table `chat_online`
-- - online_id > L'ID du membre connecte
-- - online_ip > Son adresse IP
-- - online_user > L'ID de l'utilisateur
Un chat en PHP/AJAX 4/31
-- - online_status > Pour informer les membres (ex : en ligne,
absent, occupe)
-- - online_time > Pour indiquer la date de derniere
actualisation
--
CREATE TABLE IF NOT EXISTS `chat_online` (
ònline_id` int(11) NOT NULL auto_increment,
ònline_ip` varchar(100) collate latin1_german1_ci NOT NULL,
ònline_user` int(11) NOT NULL,
ònline_status` enum('0','1','2') collate latin1_german1_ci NOT
NULL,
ònline_time` bigint(21) NOT NULL,
PRIMARY KEY (ònline_id`)
) ENGINE=MyISAM ;
--
-- Structure de la table `chat_annonce`
-- - annonce_id > L'ID de l'annonce
-- - annonce_text > Le contenu de l'annonce
--
CREATE TABLE IF NOT EXISTS `chat_annonce` (
ànnonce_id` int(11) NOT NULL auto_increment,
ànnonce_text` varchar(300) collate latin1_german1_ci NOT NULL,
PRIMARY KEY (ànnonce_id`)
) ENGINE=MyISAM ;
--
-- Structure de la table `chat_accounts`
-- - account_id > L'ID du membre
-- - account_login > Le pseudo du membre entre 2 et 30 caractres
-- - account_pass > Le mot de passe
--
CREATE TABLE IF NOT EXISTS `chat_accounts` (
àccount_id` int(11) NOT NULL auto_increment,
àccount_login` varchar(30) collate latin1_german1_ci NOT NULL,
àccount_pass` varchar(255) collate latin1_german1_ci NOT NULL,
PRIMARY KEY (àccount_id`)
) ENGINE=MyISAM ;
Et voil ! C'est termin ! Les explications sont suffisantes j'espre. Vous tes des professionnels ! Je suis sr que vous n'en
aviez mme pas besoin. Mais bon, vous voyez ? C'tait trs simple ! Maintenant, place au code HTML de la page. Nous y
verrons aussi l'interface de notre page code en CSS. Un aperu du chat est donn plus bas.
Code HTML/CSS
Vous voulez sans doute avoir un aperu de ce quoi ressemblera notre page de chat ? Non ? Et bien passez votre chemin. En cas
contraire, cliquez sur l'image ci-dessous pour voir un exemple de la page (le lien vous mnera vers la page de test que j'ai
cre) :
Sans plus attendre, c'est parti ! Celui qui me reproduit ce design au pixel prt remporte le prix du plus courageux. Bon
srieusement, voici les deux pages dont nous aurons besoin actuellement. Le fichier chat.js inclut au dbut de la page
chat.php sera cr dans un chapitre suivant.
La page HTML
Dcortiquons notre code HTML (la page est nanmoins enregistre en .php pour des ajouts PHP sur celle-ci plus tard).
Entre les balises <head>, effectuons une mini-requte sur les fichiers dont nous aurons besoin (je vous laisse le choix pour le
titre, j'ai mis "Mon super chat" moi) :
Code : HTML
<link rel="stylesheet" type="text/css" href="stylechat.css">
<script src="chat.js"></script>
Ensuite, nous devons afficher le champ de slection du statut :
Code : HTML
<div id="container">
<h1>Mon super chat</h1>

<table class="status"><tr>
<td>
<span id="statusResponse"></span>
<select name="status" id="status" style="width:200px;"
onchange="setStatus(this)">
<option value="0">Absent</option>
<option value="1">Occupé</option>
<option value="2" selected>En ligne</option>
</select>
</td>
</tr></table>
Ensuite, nous incluons la zone o les messages seront affichs et les membres connects. Veuillez noter que l'image ajax-
loader.gif peut tre modifie. Je vous donne donc un bon site d'images de prchargements : Ajaxload. Celle utilise
actuellement est la suivante :
Code : HTML
<table class="chat"><tr>

<td valign="top" id="text-td">
<div id="annonce"></div>
<div id="text">
<div id="loading">
<center>
<span class="info" id="info">Chargement du chat en
cours...</span><br />
<img src="ajax-loader.gif" alt="patientez...">
</center>
</div>
</div>
</td>


<td valign="top" id="users-td"><div
id="users">Chargement</div></td>
</tr></table>
Enfin, nous affichons la barre contenant la zone de texte pour taper le message et le bouton :
Code : PHP

<a name="post"></a>
<table class="post_message"><tr>
<td>
<form action="" method="" onsubmit="envoyer(); return false;">
<input type="text" id="message" maxlength="255" />
<input type="button" onclick="envoyer()" value="Envoyer"
id="post" />
</form>
<div id="responsePost" style="display:none"></div>
</td>
</tr></table>
</div>
Le fichier CSS
Et le code du fichier CSS pour appliquer un joli design notre chat. Libre vous de modifier les balise <table> prsentes dans
le code HTML, donc aussi adapter dans le code CSS prsent ci-dessous. La balise <table> a t adopte pour plus de
facilit. En effet, en utilisant cette balise, TOUS les navigateurs ont le mme comportement.
Code : CSS - stylechat.css
body {
background: #d2d2d2;
}
/* Pour que les liens ne soient pas souligns */
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
/* Conteneur principal des blocs de la page */
#container {
width: 80%;
margin: 50px auto;
padding: 2px 20px 20px 20px;
background: #fff;
}
/* Bloc contenant la zone de texte et bouton */
.post_message {
width: 95%;
margin: auto;
border: 1px solid #d2d2d2;
background: #f8fafd;
padding: 3px;
}
/* Zone de texte */
.post_message #message {
width: 80%;
}
/* Bouton d'envoi */
.post_message #post {
width: 18%;
}
/* La zone o sont affichs les messages
et utilisateurs connects */
.chat {
width: 95%;
margin: 10px auto;
border: 1px solid #d2d2d2;
padding: 0px;
}
/* Bloc de chargement */
.chat #loading {
margin-top: 50px;
}
/* Annonce */
.chat #annonce {
background: #f8fafd;
margin: -6px -7px 5px -7px;
padding: 5px;
height:20px;
box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 0px 8px 15px #aaa;
}
/* Zone des messages */
.chat #text-td {
margin: 0px;
padding: 5px;
width: 80%;
background: #fff;
}
/* Zone des utilisateurs connects */
.chat #users-td, .chat #users-chat-td {
margin: 0px;
padding: 5px;
width: 20%;
background: #ddd;
}
.chat #text, .chat #users, .chat #users-chat {
height:500px;
overflow-y: auto;
}
/* Modification du statut */
.status {
width: 95%;
border: none;
background: #fff;
margin: auto;
text-align: right;
}
.info {
color: green;
}
Attaquons le PHP
Nous y voil ! Au cur de l'action. Nous allons enfin pouvoir commencer programmer. Mais quel langage utiliser ? Le titre le dit
: nous nous attaquons au PHP. Vous allez devoir vous atteler un petit exercice qui runira des comptences trs pointues.
En fait ce sera assez simple.
Dans tous les cas, comme d'habitude le code se trouve plus bas dans la page.
Cration des fonctions
Ici, vous allez devoir crer une page de fonctions qui nous servira tout au long de l'aventure. Quels genre de fonctions ?
La premire, la plus logique, la fonction de connexion la base de donnes pour ne pas avoir la rcrire sur chaque
page.
La seconde permettra de vrifier si l'utilisateur est connect. Nous aurons donc une variable session <?php
$_SESSION['id'] ?> contenant le nom d'utilisateur du membre.
Enfin, la dernire fonction dtectera les liens et les transformera en URL cliquables.
Vous devrez enregistrer ce fichier sous le nom de functions.php dans un dossier que vous nommerez
"phpscripts". Ce dossier contiendra l'ensemble des fichiers de codes PHP que nous utiliserons : donc le fichier de
fonctions et les fichiers d'interactions avec la base de donnes (pour rcuprer les messages, poster un message etc.).
Vous n'avez plus qu' retrousser vos manches et commencer programmer. Un LONG petit travail vous attend. Je resterai ct.
Quand vous avez fini faites-moi signe.
Quoi ? Dj ???
Et bien on peut dire que vous n'avez pas chm mes enfants. Vous tes all plus vite que moi pour coder mes propres
fonctions. Mais ct de grands pros comme vous, j'ai dsormais peur de les dvoiler.
Allez... je me lance quand mme !
Voici mes fonctions contenues dans la page functions.php (j'ai pour habitude d'appeler mes pages en anglais).
Connexion la base de donnes
La premire fonction s'intitule db_connect(). Elle permettra de se connecter la base de donnes, via l'utilisation de la librairie
PDO. Pour la rendre utilisable, remplacez seulement les informations contenues dans INFORMATIONS DE CONNEXION par vos
identifiants de connexion.
Code : PHP - functions.php
<?php
function db_connect() {
// dfinition des variables de connexion la base de donnes
try {
$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
// INFORMATIONS DE CONNEXION
$host = 'nom d\' hote';
$dbname = 'nom de la base';
$user = 'nom d\'utilisateur';
$password = 'mot de passe';
// FIN DES DONNEES

$db = new PDO('mysql:host='.$host.';dbname='.$dbname.'', $user,
$password, $pdo_options);
return $db;
} catch (Exception $e) {
die('Erreur de connexion : ' . $e->getMessage());
}
}
?>
Test de la connexion de l'utilisateur
La seconde fonction sera nomme user_verified(). Elle vrifiera que l'utilisateur est connect et renvoie true si la session 'id'
existe, false en cas contraire.
Code : PHP
<?php
function user_verified() {
return isset($_SESSION['id']);
}
?>
Dtection des liens
Enfin, la dernire fonction, appele urllink() dtectera les liens dans les messages et les transformera en URLs cliquables.
Code : PHP
<?php
function urllink($content='') {
$content = preg_replace('#(((https?://)|(w{3}\.))+[a-zA-Z0-
9&;\#\.\?=_/-]+\.([a-z]{2,4})([a-zA-Z0-9&;\#\.\?=_/-]+))#i', '<a
href="$0" target="_blank">$0</a>', $content);
// Si on capte un lien tel que www.test.com, il faut rajouter le
http://
if(preg_match('#<a href="www\.(.+)" target="_blank">(.+)<\/a>#i',
$content)) {
$content = preg_replace('#<a href="www\.(.+)"
target="_blank">(.+)<\/a>#i', '<a href="http://www.$1"
target="_blank">www.$1</a>', $content);
//preg_replace('#<a href="www\.(.+)">#i', '<a
href="http://$0">$0</a>', $content);
}
$content = stripslashes($content);
return $content;
}
?>
Pages appeles en Ajax
Avant de programmer notre fichier Javascript chat.js, nous allons coder les fonctions du chat. Elles seront au nombre de 4 :
Le fichier de rcupration des derniers messages affichant galement l'annonce en haut.
Celui recherchant les membres connects.
Un fichier permettant de poster son message.
Et enfin, un fichier permettant de modifier son statut.
Mthode d'appel
Pour appeler nos pages, nous utiliserons le format de donnes JSON. Pour ceux qui ont dj utilis le format XML, vous
comprendrez trs vite. Si vous n'avez jamais utilis le JSON, ce ne sera pas trs compliqu mais je vous conseille de vous rfrer
Google et sur notre fabuleux SdZ afin d'en savoir plus.
Nos pages PHP seront donc parses au format JSON. Petit rappel, il est de la forme :
Code : JavaScript
{
"variable-1" : "valeur",
"variable-2" : "valeur",
"variable-3" : {
"sous-variable-1" : "valeur",
"sous-variable-2" : "valeur",
"sous-variable-3" : "valeur"
}
}
Ce sera donc trs simple, je vous expliquerais au fur et mesure.
Rcupration des messages - get-message.php
Crez un nouveau fichier et enregistrez-le dans le dossier phpscripts cr prcdemment. Nommez-le : get-message.php. Ce
fichier se trouvera donc dans le mme dossier que functions.php.
Tout d'abord, tant donn que ce fichier sera appel via la mthode Ajax, il devra inclure functions.php et demander la
connexion la base de donnes. L'appel de la fonction session_start() permettra d'utiliser les sessions que nous crerons par la
suite.
Code : PHP
<?php
session_start();
include('functions.php');
// Appel de la fonction de connexion la base de donnes
$db = db_connect();
?>
Ici, nous allons vrifier que le compte de l'utilisateur existe toujours. S'il a t supprim, il ne faut pas le laisser crire des
messages et on doit le rediriger aprs avoir supprim ses sessions. La redirection s'effectuera en Javascript. Le fichier renvoie 0
si le compte a t supprim et les messages dans le cas contraire.
Code : PHP
<?php
/* On vrifie d'abord que le compte existe, si ce n'est pas le
cas,
on s'arrte, on supprime les sessions et on renvoie 0. */
$checkUser = $db->prepare("SELECT * FROM chat_accounts WHERE
account_id = :id AND account_login = :login ");
$checkUser->execute(array(
'id' => $_SESSION['id'],
'login' => $_SESSION['login']
));
$countUser = $checkUser->rowCount();
if($countUser == 0) {
// On indique qu'il y a une erreur de type unlog
// donc que l'utilisateur connect n'a pas de compte
$json['error'] = 'unlog';
// On supprime les sessions
unset($_SESSION['time']);
unset($_SESSION['id']);
unset($_SESSION['login']);
} else {
// On indique qu'il n'y a aucune erreur
$json['error'] = '0';
// ON PEUT CONTINUER !!!
}
$checkUser->closeCursor();
// Encodage de la variable tableau json et affichage
echo json_encode($json);
?>
Nous devons ensuite afficher l'annonce, situe en haut dans le chat. Extrmement simple, nous ne feront qu'afficher le message
prsent dans la table chat_annonce. Pour rappel, nous utilisons la librairie PDO pour effectuer des interactions avec la base de
donnes. Les autres codes qui vont suivre devront se trouver la place du commentaire "ON PEUT CONTINUER !!!" du code
prcdent.
Code : PHP
<?php
// Affichage de l'annonce
//////////////////////////////////////////
$query = $db->query("SELECT * FROM chat_annonce LIMIT 0,1");
while ($data = $query->fetch())
$json['annonce'] = $data['annonce_text'];
$query->closeCursor();
?>
Pour terminer, il nous suffit d'afficher les derniers messages du chat. Pour ce faire, nous devons effectuer une jointure entre la
table chat_messages et chat_accounts afin de rcuprer le pseudo du membre ayant envoy le message.
Code : PHP
<?php
/* On effectue la requte sur la table contenant les messages. On
rcupre
les 100 derniers messages. Enfin, on affiche le tout. */
/* Si vous voulez faire appratre les messages depuis
l'actualisation
de la page, laissez l'AVANT-DERNIERE ligne de la requete, sinon,
supprimez-la */
$query = $db->prepare("
SELECT message_id, message_user, message_time, message_text,
account_id, account_login
FROM chat_messages
LEFT JOIN chat_accounts ON chat_accounts.account_id =
chat_messages.message_user
WHERE message_time >= :time
ORDER BY message_time ASC LIMIT 0,100
");
$query->execute(array(
'time' => $_GET['dateConnexion']
));
$count = $query->rowCount();
if($count != 0) {
$json['messages'] = '<div id="messages_content">';
// On cre un tableau qui continendra notre...tableau
// Afin de placer les emssages en bas du chat
// On triche un peu mais c'est plus simple :D
$json['messages'] .= '<table><tr><td style="height:500px;"
valign="bottom">';
$json['messages'] .= '<table style="width:100%">';
$i = 1;
$e = 0;
$prev = 0;
while ($data = $query->fetch()) {
// Change la couleur ds que l'ID du membre est diffrent du
prcdent
if($i != 1) {
$idNew = $data['message_user'];
if($idNew != $id) {
if($colId == 1) {
$color = '#077692';
$colId = 0;
} else {
$color = '#666';
$colId = 1;
}
$id = $idNew;
} else
$color = $color;
} else {
$color = '#666';
$id = $data['message_user'];
$colId = 1;
}
$text .= '<tr><td style="width:15%" valign="top">';
// Si le dernier message est du mme membre, on crit pas de
nouveau son pseudo
if($prev != $data['account_id']) {
// contenu du message
$text .= '<a href="#post"
onclick="insertLogin(\''.addslashes($data['account_login']).'\')"
style="color:black">';
$text .= date('[H:i]', $data['message_time']);
$text .= ' <span
style="color:'.$color.'">'.$data['account_login'].'</span>';
$text .= '</a>';
}
$text .= '</td>';
$text .= '<td style="width:85%;padding-left:10px;"
valign="top">';

// On supprime les balises HTML
$message = htmlspecialchars($data['message_text']);
// On transforme les liens en URLs cliquables
$message = urllink($message);

// Si le nom apparat suivi de >, on le colore en orange
if(user_verified()){
if(preg_match('#'.$_SESSION['login'].'>#is', $message)) {
$message = preg_replace('#'.$_SESSION['login'].'>#is',
'<b><span
style="color:orange;">'.$_SESSION['login'].'></span></b>',
$message);
}
}

// On ajoute le message en remplaant les liens par des URLs
cliquables
$text .= $message.'<br />';
$text .= '</td></tr>';
$i++;
$prev = $data['account_id'];
}

/* On cre la colonne messages dans le tableau json
qui contient l'ensemble des messages */
$json['messages'] = $text;
$json['messages'] .= '</table>';
$json['messages'] .= '</td></tr></table>';
$json['messages'] .= '</div>';
} else {
$json['messages'] = 'Aucun message n\'a t envoy pour le
moment.';
}
?>
Notre fichier est fin prt ! Il est dsormais votre service, O grand seigneur. Ds qu'on l'appellera, et on le fera bien vite, via notre
magnifique fichier JS que vous rvez tous de programmer, le fichier sera appel et insrera tous les messages ET l'annonce dans
le bloc ayant pour ID "text". Si votre courage ne vous a pas encore perdu, alors continuez et je suis sr que vous irez trs vite.
Persvrez. Vous voyez ? Ce n'est quand mme pas bien compliqu, si ?
Rcupration des membres connects - get-online.php
Nous y voil ! L'une des principales raisons pour lesquelles j'ai dcid autrefois, il y a fort longtemps, de concevoir mon propre
chat. Je cherchais partout sur internet des chats entirement prts tre utiliss, mais je n'en ai trouv aucun permettant
d'afficher la liste des membres de la faon dont je voulais. Ici, on va le faire. Et ce sera trs simple.
Crez donc un nouveau fichier que vous appellerez get-online.php et que vous enregistrerez dans le dossier phpscripts
comme get-message.php.
Tout d'abord, on effectue la mme chose que pour la rcupration des messages, soit :
Code : PHP
<?php
session_start();
include('functions.php');
$db = db_connect();
?>
Ensuite, on doit vrifier que l'utilisateur est inscrit dans la table des membres connects. Si c'est le cas, alors on modifie sa date
de dernire connexion pour qu'il ne soit pas ensuite supprim. Dans le cas contraire, on ajoute l'utilisateur dans la base de
donnes.
Code : PHP
<?php
// On vrifie que l'utilisateur est inscrit dans la base de
donnes
SELECT *
FROM chat_online
WHERE online_user = :user
");
'user' => $_SESSION['id']
));
// On compte le nombre d'entres
$data = $query->fetch();
if(user_verified()) {
/* si l'utilisateur n'est pas inscrit dans la BDD, on l'ajoute,
sinon
on modifie la date de sa derniere actualisation */
if($count == 0) {
$insert = $db->prepare('
INSERT INTO chat_online (online_id, online_ip, online_user,
online_status, online_time)
VALUES(:id, :ip, :user, :status, :time)
');
$insert->execute(array(
'id' => '',
'ip' => $_SERVER["REMOTE_ADDR"],
'user' => $_SESSION['id'],
'status' => '2',
'time' => time()
));
} else {
$update = $db->prepare('UPDATE chat_online SET online_time =
:time WHERE online_user = :user');
$update->execute(array(
'time' => time(),
));
}
}
?>
On doit maintenant supprimer tous les membres dont la dernire date de connexion date de plus de cinq secondes. Voil pourquoi
nous devions actualiser la date de dernire connexion dans le code prcdent. Si le membre n'a pas actualis depuis cinq
secondes, il n'est, soit plus sur le chat, soit bugg.
Code : PHP
<?php
// On supprime les membres qui ne sont pas sur le chat,
// donc qui n'ont pas actualis automatiquement ce fichier
rcemment
$time_out = time()-5;
$delete = $db->prepare('DELETE FROM chat_online WHERE online_time
< :time');
$delete->execute(array(
'time' => $time_out
));
?>
Pour terminer, on doit afficher la liste des membres connects. Le champ online_status va enfin servir. Il va nous permettre de
dfinir le statut de l'utilisateur (qui peut le modifier, on verra a plus tard). Le code ci-dessous :
Code : PHP
<?php
// Rcupre les membres en ligne sur le chat
// et retourne une liste
SELECT online_id, online_id, online_user, online_status,
online_time, account_id, account_login
FROM chat_online
LEFT JOIN chat_accounts ON chat_accounts.account_id =
chat_online.online_user
ORDER BY account_login
");
$query->execute();
// On compte le nombre de membres
/* Si au moins un membre est connect, on l'affiche.
Sinon, on affiche un message indiquant que personne n'est
connect */
if($count != 0) {
// On affiche qu'il n'y a aucune erreur

$i = 0;
while($data = $query->fetch()) {
if($data['online_status'] == '0') {
$status = 'inactive';
} elseif($data['online_status'] == '1') {
$status = 'busy';
} elseif($data['online_status'] == '2') {
$status = 'active';
}

// On enregistre dans la colonne [status] du tableau
// le statut du membre : busy, active ou inactive (occup, en
ligne, absent)
$infos["status"] = $status;
// Et on enregistre dans la colonne [login] le pseudo
$infos["login"] = $data['account_login'];

// Enfin on enregistre le tableau des infos de CE MEMBRE
// dans la [i me] colonne du tableau des comptes
$accounts[$i] = $infos;
$i++;
}
// On enregistre le tableau des comptes dans la colonne [list]
de JSON
$json['list'] = $accounts;
} else {
// Il y a une erreur, aucun membre dans la liste
}
// Encodage de la variable tableau json et affichage
echo json_encode($json);
?>
Envoi d'un message - post-message.php
Et voil ! On y est presque. Cette fois, crez encore un fichier nomm post-message.php et enregistrez-le...encore dans
phpscripts.
Inutile de rpter qu'il faut appeler la fonction session_start() et l'inclusion du fichier de fonctions avec l'appel de la fonction
db_connect()...hein ? Mince je l'ai dj fait ! Tant pis ! Mais n'allez pas croire que a se repassera encore une fois. Bon et
n'oubliez pas que db_connect() est appele de la manire suivante : <?php $db = db_connect(); ?>, tant qu' faire.
Ne nous reste plus qu' programmer la suite, trs simple !
Tout d'abord, vrifier que l'utilisateur est connect et que la zone de texte n'est pas vide. On ne va pas envoyer un message sans
contenu, pas vrai ? Donc si l'utilisateur n'est pas connect, on renvoie l'erreur. En cas contraire, on teste la zone de texte. Si elle
est vide, on renvoie une nouvelle erreur, sinon, on continue ! Ensuite, on doit vrifier la similitude du nouveau message avec le
dernier message de l'utilisateur. Si les deux messages sont trop ressemblants, alors on affiche une erreur. Enfin, on vrifie que le
dernier message n'est pas trop rcent pour viter les floods automatiques.
Et comme je suis un magicien, pouf !
Code : PHP
<?php
if(isset($_POST['message']) AND !empty($_POST['message'])) {
/* On teste si le message ne contient qu'un ou plusieurs points
et
qu'un ou plusieurs espaces, ou s'il est vide.
^ -> dbut de la chaine - $ -> fin de la chaine
[-. ] -> espace, rien ou point
+ -> une ou plusieurs fois
Si c'est le cas, alors on envoie pas le message */
if(!preg_match("#^[-. ]+$#", $_POST['message'])) {
$query = $db->prepare("SELECT * FROM chat_messages WHERE
message_user = :user ORDER BY message_time DESC LIMIT 0,1");
));
// Vrification de la similitude
if($count != 0)
similar_text($data['message_text'], $_POST['message'],
$percent);
if($percent < 80) {
// Vrification de la date du dernier message.
if(time()-5 >= $data['message_time']) {
// YES ! ON PEUT CONTINUER ! Ouiiiii.
} else
echo 'Votre dernier message est trop rcent. Baissez le
rythme :D';
} else
echo 'Votre dernier message est trs similaire.';
} else
echo 'Votre message est vide.';
} else
echo 'Votre message est vide.';
} else
echo 'Vous devez tre connect.';
?>
Pour terminer, ou continuer comme je l'ai dit, nous devons insrer le message dans la base de donnes. On renvoie true la fin
de l'insertion SQL.
Code : PHP
<?php
// A placer l'intrieur du if(time()-5 >=
$data['message_time'])
INSERT INTO chat_messages (message_id, message_user, message_time,
message_text)
VALUES(:id, :user, :time, :text)
');
'id' => '',
'user' => $_SESSION['id'],
'time' => time(),
'text' => $_POST['message']
));
echo true;
?>
Modification du statut du membre - set-status.php
C'est fini pour les actions, enfin pas encore, mais presque. Plus qu'une page programmer et ce sera bon ! Nous allons donc
coder de nos propres mains ce fichier. Je vous prviens : a ne va pas tre un jeu d'enfant ! Attention, coeurs fragiles, s'abstenir !
Non je PLAISANTE. Trve de bavardage, allons-y !
Srieusement a va tre trs simple, sans aucun doute la plus rapide raliser. Vous allez donc crer un nouveau fichier du nom
de set-status.php et le placer dans phpscripts/.
Comme d'habitude, commencez par inclure les trois lignes cites deux, voire trois fois plus haut. Ensuite, ajoutez une condition
pour vrifier que le visiteur est connect. Pour finir, il ne vous reste qu' raliser une requte SQL pour modifier le statut du
membre concern.
Je suis magicien, mais aussi un ange et je vais faire appel mes pouvoirs divins :
Code : PHP
<?php
UPDATE chat_online SET online_status = :status WHERE online_user =
UPDATE chat_online SET online_status = :status WHERE online_user =
:user
');
'status' => $_POST['status'],
));
}
?>
On peut dire que ce fut trs dur et fort en motions, non ? Ah ben tant pis. Moi j'ai souffert. Si si je vous jure.
Voil pour les actions PHP que nous appellerons via notre fichier JS. Ne vous inquitez pas, sa programmation approche. Je sais
que vous rvez de toucher au Javascript.
Adaptation du fichier chat.php... a faisait longtemps !
Cette fois, a va tre plutt rapide. Nous allons devoir indiquer notre fichier chat.php qu'il doit demander un pseudo et son
mot de passe l'utilisateur s'il n'est pas connect. Aprs le formulaire rempli, l'utilisateur est connect et peut donc "chatter"
avec les autres membres.
Premirement, il va encore falloir inclure les trois petites lignes au dbut de la page chat.php, donc session_start() etc. Mais
voil, si vous avez fait attention, il y a une correction apporter. La voici :
Code : PHP
<?php
session_start();
include('phpscripts/functions.php');
$db = db_connect();
?>
Vous avez pu constater que nous avons rajout phpscripts/ avant functions.php. Pourquoi ? Ah, et bien si vous ne savez
pas, c'est que vous avez d faire une ENORME erreur. Non c'est une blague. En fait, vous n'avez peut-tre pas cr le dossier
phpscripts/ dans lequel vous avez plac les fichiers suivants : functions.php, get-message.php, get-online.php,
set-status.php et post-message.php. Dans ce cas, si TOUS les fichiers sont la racine du site, vous pouvez mettre :
<?php include('functions.php'); ?> tout simplement. Nanmoins, la cration de ce dossier permet une meilleure
organisation.
Maintenant, nous devons vrifier que l'utilisateur est connect. S'il l'est, alors nous affichons le chat, sinon nous affichons le
formulaire. Vous devez donc rajouter ce bout de code entre les lignes surlignes :
Code : PHP
<h1>Mon super chat</h1>
<?php
// permettra de crer l'utilisateur lors de la validation du
formulaire
if(isset($_POST['login']) AND !preg_match("#^[-. ]+$#",
$_POST['login'])) {
}
/* Si l'utilisateur n'est pas connect,
d'o le ! devant la fonction, alors on affiche le formulaire */
if(!user_verified()) {
?>
<div class="unlog">
<form action="" method="post">
Indiquez votre pseudo afin de vous connecter au chat.
Aucun mot de passe n'est requis. Entrez simplement votre
pseudo.<br><br>

<center>
<input type="text" name="login" placeholder="Pseudo" /><br />
<input type="password" name="pass"
placeholder="Mot de passe" /><br />
<input type="submit" value="Connexion" />
</center>
</form>
</div>
<?php
} else {
?>
<table class="post_message"><tr>
Vous devez aussi rajouter entre les lignes surlignes :
Code : PHP
<option value="2">En ligne</option>
</select>
</td>
</tr></table>
<?php
}
?>
</div>
Pour vous donner un aperu du formulaire de connexion, voici une image de la page de connexion.
Vous avez d remarquer la prsence du <?php if(isset($_POST['login'])) ?>. Nous allons devoir la remplir. Pour
rappel, elle vrifie s'il existe une variable de type POST nomme login. Si la fonction isset() renvoie true, alors il faut continuer,
sinon, on passe cette tape.
Dans ce traitement, nous vrifions s'il existe un membre portant ce pseudo, s'il existe, alors il est seulement connect. En cas
contraire, nous l'enregistrons dans la base de donnes. Voici le code insrer dans la condition prcdente <?php
if(isset($_POST['login']) AND !empty($_POST['login'])) ?> :
Code : PHP
<?php
/* On cre la variable login qui prend la valeur POST envoye
car on va l'utiliser plusieurs fois */
$login = $_POST['login'];
$pass = $_POST['pass'];

// On cre une requte pour rechercher un compte ayant pour nom
$login
$query = $db->prepare("SELECT * FROM chat_accounts WHERE
account_login = :login");
'login' => $login
));
// On compte le nombre d'entres
$count=$query->rowCount();

// Si ce nombre est nul, alors on cre le compte, sinon on le
connecte simplement
if($count == 0) {
// Cration du compte
INSERT INTO chat_accounts (account_id, account_login,
account_pass)
VALUES(:id, :login, :pass)
');
'id' => '',
'login' => htmlspecialchars($login),
'pass' => md5($pass)
));

/* Cration d'une session id ayant pour valeur le dernier ID cr
par la dernire requte SQL effectue */

$_SESSION['id'] = $db->lastInsertId();
// On cre une session time qui prend la valeur de la date de
connexion
$_SESSION['time'] = time();
$_SESSION['login'] = $login;
} else {

if($data['account_pass'] == md5($pass)) {
$_SESSION['id'] = $data['account_id'];
// On cre une session time qui prend la valeur de la date de
connexion
$_SESSION['time'] = time();
$_SESSION['login'] = $data['account_login'];
}
}

// On termine la requte
?>
Pour terminer, placez ce bout de code n'importe-o sur la page visible des membres connects, pas des visiteurs. Il permettra
notre fichier JS de rcuprer la date de connexion afin d'afficher les messages depuis cette date. (optionnel, vous pouvez dfinir
d'afficher tous les messages).
Code : PHP
<input type="hidden" id="dateConnexion" value="<?php echo
$_SESSION['time']; ?>" />
Et voil, c'est fini pour les codes PHP. Dsormais nous allons nous attaquer la programmation du fichier Javascript. Le grand, le
plus fort, le plus courageux...j'ai nomm CHAT.JS !!!! merci vous c'est trop d'applaudissements !
Codons Javascript !
Utilisation d'une librairie
Citation : Vous
On a russi ! Ah oups non c'est vrai il reste le Javascript ! Grrrrr...Bon, et bien comme je ne suis pas un vilain je ne vais pas
recopier btement, mais je vais essayer de comprendre.
Ce fut long ! Et je veux vous rassurer. Nous avons presque fini ! En effet, nous ne raliserons pas la fonction Ajax
permettant d'appeler des pages PHP, mais nous allons utiliser une fonction toute prte. Nous allons donc nous armer
du fabuleux, du magnifique : jQuery !
Je suis en effet convaincu, dsol pour ceux qui prfrent crer leurs propres fonctions, que pour aller vite, il est inutile de
rinventer la roue. jQuery nous fournit tout a et il est assez lger et simple d'utilisation.
Nous allons donc commencer par inclure cette librairie Javascript entre les balises <head> de notre page juste avant l'inclusion
du fichier chat.js (donc <head> jquery.js -> chat.js </head>).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Ce fichier Javascript hberg sur Google Apis inclue la toute dernire version de jQuery et sera donc mis jour automatiquement.
Vous pouvez prfrer une autre version comme la dernire, qui ne s'actualisera pas :
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Voil pour jQuery. Dsormais nous sommes pourvus de tout ce dont nous avons besoin et nous pouvons donc commencer !
Mise en place des fonctions
Nous y voil ! Au coeur du chat ! Tout d'abord, commencez par crer un fichier du nom de chat.js si ce n'est pas dj fait et
enregistrez-le dans le mme dossier que celui o se trouve chat.PHP, soit, le dossier parent de phpscripts/. Quand c'est fait,
poursuivez mes amis !
jQuery dispose de deux fonctions intressantes afin d'appeler des fichiers extrieurs et les voici :
$.ajax(); - elle permet d'appeler un fichier PHP, ou autre, et d'y envoyer des informations par deux mthodes : POST
ou GET.
$.getJSON(); - elle permet la mme chose que la prcdente. Elle est seulement plus rapide crire. Elle permet de de
rcuprer les donnes reues en format JSON de notre fichier.
Nous utiliserons chacune d'entre elles pour nous entraner. Ci-dessous un code exemple permettant de comprendre leur
fonctionnement.
Code : JavaScript
$.ajax({
type: "GET",
url: "page-a-appeler.php",
data: "valeur="+valeur+"&nom="+nom,
success: function(msg){
$("#bloc").html(msg);
}
});
Cette fonction insrera la rponse de la page appele, page-a-appeler.php, dans un bloc ayant pour ID 'bloc'.
Maintenant que nous avons compris son fonctionnement, passons la suite.
Fonction utile
Si vous avez remarqu dans le fichier get-message.php, on peut voir qu'en cliquant sur le lien du pseudo, on a une fonction qui
se dclenche : insertLogin(). Celle-ci permet d'insrer le pseudo dans la zone de texte. Voici donc cette merveilleuse fonction.
Code : JavaScript
function insertLogin(login) {
var $message = $("#message");
$message.val($message.val() + login + '> ').focus();
}
Passons la suite des vnements (jeu de mot excellent, non ? Javascript -> vnements...bref.)
Affichage des derniers messages
Si il y a au moins une chose que vous voulez faire, c'est, je pense, afficher les messages de votre chat, je me trompe ? C'est bien
ce que je pensais. Ce que nous allons faire, c'est crer une fonction qui s'en chargera.
Code : JavaScript
var reloadTime = 1000;
var scrollBar = false;
function getMessages() {
// On lance la requte ajax
$.getJSON('phpscripts/get-message.php?
dateConnexion='+$("#dateConnexion").val(), function(data) {
/* On vrifie que error vaut 0, ce
qui signifie qu'il n'y aucune erreur */
if(data['error'] == '0') {
// On intialise les variables pour le scroll jusqu'en bas
// Pour voir les derniers messages
var container = $('#text');
var content = $('#messages_content');
var height = content.height()-500;
var toBottom;
// Si avant l'affichage des messages, on se trouve en bas,
// alors on met toBottom a true afin de rester en bas
// Il faut tester avant affichage car aprs, le message a dj
t
// affich et c'est aps facile de se remettre en bas :D
if(container[0].scrollTop == height)
toBottom = true;
else
toBottom = false;
$("#annonce").html('<span
class="info"><b>'+data['annonce']+'</b></span><br /><br />');
$("#text").html(data['messages']);
// On met jour les variables de scroll
// Aprs avoir affich les messages
content = $('#messages_content');
height = content.height()-500;

// Si toBottom vaut true, alors on reste en bas
if(toBottom == true)
container[0].scrollTop = content.height();

// Lors de la premire actualisation, on descend
if(scrollBar != true) {
container[0].scrollTop = content.height();
scrollBar = true;
}
} else if(data['error'] == 'unlog') {
/* Si error vaut unlog, alors l'utilisateur connect n'a pas
de compte. Il faut le rediriger vers la page de connexion */
$("#annonce").html('');
$("#text").html('');
$(location).attr('href',"chat.php");
}
});
}
Vous voyez ? C'tait trs simple... et en plus a marche ! Vous pouvez modifier la variable reloadTime qui contient le temps
d'attente entre chaque actualisation. On l'utilisera par la suite.
Envoi d'un message
Cette fois, c'est la mthode POST que nous allons utiliser afin de poster le message saisi dans la zone de texte ddie cet effet.
Toujours aussi simple, nous allons cette fois transmettre des donnes notre fichier afin qu'il puisse insrer le message dans la
table SQL.
Essayez d'imaginer la fonction correspondante sachant que notre zone de texte porte l'ID 'message'.
Vous avez russi ? Non ? Cool parce que si c'tait le cas, je me serai senti bien nul. Ben oui faut dire vous tes d'une
rapidit !!! Bon alors voil la fonction que j'avais faite.
Code : JavaScript
function postMessage() {
// type: POST > nous envoyons le message
// On encode le message pour faire passer les caractres spciaux
comme +
var message = encodeURIComponent($("#message").val());
$.ajax({
type: "POST",
url: "phpscripts/post-message.php",
data: "message="+message,
// Si la rponse est true, tout s'est bien pass,
// Si non, on a une erreur et on l'affiche
if(msg == true) {
// On vide la zone de texte
$("#message").val('');
$("#responsePost").slideUp("slow").html('');
} else
$("#responsePost").html(msg).slideDown("slow");
// on reslectionne la zone de texte, en cas d'utilisation du
bouton "Envoyer"
$("#message").focus();
},
error: function(msg){
// On alerte d'une erreur
alert('Erreur');
}
});
}
Et maintenant, afin que le chat s'actualise toutes les x secondes (toujours dfini dans la variable reloadTime), il suffit de rajouter
ce bout de code :
Code : JavaScript
// Au chargement de la page, on effectue cette fonction
$(document).ready(function() {
// On vrifie que la zone de texte existe
// Servira pour la redirection en cas de suppression de compte
// Pour ne pas rediriger quand on est sur la page de connexion
if(document.getElementById('message')) {
// actualisation des messages
window.setInterval(getMessages, reloadTime);
// on slectionne la zone de texte
$("#message").focus();
}
});
Page de test - Envoi/Affichage des messages
Voil pour l'envoi du message, passons la suite !
Affichage des membres connects
Cette fonction sera trs similaire celle d'affichage des messages, pour ne pas dire exactement la mme. D'ailleurs ce serait faux
de le dire puisque la page que nous appellerons ne sera pas la mme ! Bon, et bien allons-y. Voyons comment nous allons coder
tout ceci. Ah j'avoue que je ne le sens pas.
Merlin tu es l ? Oui ? Cool. Viens m'aider s'il-te-plat ! (oui oui je connais Merlin l'Enchanteur, je suis son apprenti)
Code : JavaScript
function getOnlineUsers() {
$.getJSON('phpscripts/get-online.php', function(data) {
// Si data['error'] renvoi 0, alors a veut dire que personne
n'est en ligne
// ce qui n'est pas normal d'ailleurs
if(data['error'] == '0') {
var online = '', i = 1, image, text;
// On parcours le tableau inscrit dans
// la colonne [list] du tableau JSON
for (var id in data['list']) {

// On met dans la variable text le statut en toute lettre
// Et dans la variable image le lien de l'image
if(data["list"][id]["status"] == 'busy') {
text = 'Occupé';
image = 'busy';
} else if(data["list"][id]["status"] == 'inactive') {
text = 'Absent';
image = 'inactive';
} else {
text = 'En ligne';
image = 'active';
}
// On affiche d'abord le lien pour insrer le pseudo dans la
zone de texte
online += '<a href="#post"
onclick="insertLogin(\''+data['list'][id]["login"]+'\')"
title="'+text+'">';
// Ensuite on affiche l'image
online += '<img src="status-'+image+'.png" /> ';
// Enfin on affiche le pseudo
online += data['list'][id]["login"]+'</a>';

// Si i vaut 1, a veut dire qu'on a affich un membre
// et qu'on doit aller la ligne
if(i == 1) {
i = 0;
online += '<br>';
}
i++;
}
$("#users").html(online);
} else if(data['error'] == '1')
$("#users").html('<span style="color:gray;">Aucun utilisateur
connecté.</span>');
});
}
Et on va devoir rajouter un petit quelque chose pour que la liste des membres connects s'actualise. Ce petit quelque chose,
vous devrez l'ajouter dans ce code $(document).ready(function() {
if(document.getElementById('message')) { :
Code : JavaScript
// actualisation des membres connects
window.setInterval(getOnlineUsers, reloadTime);
Page de test - Affichage des membres connects
Il ne nous reste qu'une dernire fonction a concevoir !
Mise jour du statut
Et voil. On y est ! La dernire fonction programmer. Je suis dj tout nostalgique...mais bon. C'est la vie ! Allez on va essayer
de faire vite. C'est aussi une fonction trs simple coder. Et oui il nous suffira de mettre jour le statut lors de la modification du
champ de slection (d'o l'attribut onchange sur le <select>). Donc allons-y :
Code : JavaScript
function setStatus(status) {
// type: POST > nous envoyons le nouveau statut
$.ajax({
type: "POST",
url: "phpscripts/set-status.php",
data: "status="+status.value,
// On affiche la rponse
$("#statusResponse").html('<span style="color:green">Le statut a
été mis à jour</span>');
setTimeout(rmResponse, 3000);
},
error: function(msg){
// On affiche l'erreur dans la zone de rponse
$("#statusResponse").html('<span
style="color:orange">Erreur</span>');
setTimeout(rmResponse, 3000);
}
});
}
J'espre que vous aurez devin... sinon ! En fait le setTimeout() permet d'appeler la fonction rmResponse() au bout de
trois secondes afin d'enlever le message : "Le statut a t mis jour". De cette faon, l'utilisateur verra quand il rechangera son
statut qu'il se met bel et bien jour (si le message reste, l'utilisateur ne voit aucune diffrence).
Code : JavaScript
function rmResponse() {
$("#statusResponse").html('');
}
Et voil ! Notre fichier chat.js est termin ! Vous pouvez toujours tester la mise jour du statut sur cette page
encore une fois !
Annexes
Vous tes encore l ? Et bien on peut dire que vous avez du courage. Je ne sais mme pas si j'aurai tenu. Bon, et bien tant qu'
faire, je vais vous donner un petit cours en plus.
Dans ces annexes, je runirai les bonnes ides que VOUS, bande de zr0s (je n'en suis pas un bien sr, vu que j'ai fait ce
cours...hem hem :D), me donnerez !
Fonctions en plus
Emoticnes
La premire, de tsunami33, consiste permettre aux membres d'insrer des smileys (moticnes). Je ne ferai que leur intgration.
Je vous laisse vous dbrouiller pour afficher ces smileys sur la page et, lors du clic, l'insrer dans la zone de texte.
Pour l'affichage d'un smiley, on pourrait procder ainsi : supprimer la fonction urllink() et la transformer en parseText() par
exemple. Elle convertirait ainsi les liens en URLs cliquables et les smileys en images. On transformera donc :
Code : PHP
<?php
function urllink($content='') {
9&;\#\.\?=_/-]+\.([a-z]{2,4})([a-zA-Z0-9&;\#\.\?=_/-]+))#i', '<a
http://
$content)) {
}
return $content;
}
?>
en cette fonction :
Code : PHP
<?php
function parseText($content='') {
9&;\#\.\?=_/-]+\.([a-z]{2,4})([a-zA-Z0-9&;\#\.\?=_/-]+))#i', '<a
http://
$content)) {
}
// Insrez vos smiley ici, dans le premier tableau smiliesName
// Et dans la colonne correpsondante du second tableau
smiliesUrl
// Indiquez le nom de l'image

$smiliesName = array(':magicien:', ':colere:', ':diable:',
':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:',
':honte:', ':soleil:', ':\'\$', ':waw:', ':\$', ':D', ';\\)',
':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O',
'\\^\\^', ':\\-@');
$smiliesUrl = array('magicien.png', 'angry.gif', 'diable.png',
'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png',
'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png',
'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif',
'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png',
'siffle.png');
$smiliesPath =
"http://www.siteduzero.com/Templates/images/smilies/";
for ($i = 0, $c = count($smiliesName); $i < $c; $i++) {
$content = preg_replace('`' . $smiliesName[$i] . 'ìsU', '<img
src="' . $smiliesPath . $smiliesUrl[$i] . '" alt="smiley" />',
$content);
}

return $content;
}
?>
Notification lors d'un message priv
Vous avez remarqu que lorsque l'on voit un message avec son pseudo dedans, alors il se colore en orange. On pourrait trs bien
galement mettre un petit bip en plus.
Pour ce faire, on pourrait ajouter un champ "message_read" de type varchar [100] (il ne peut pas y avoir 10 000 destinataires, 100
caractres suffisent donc) dans la table chat_messages. Celui-ci prendrait pour valeur 0 lors de son envoi et quand on actualise
la liste des messages, notre script PHP compte le nombre de messages non lus ayant le pseudo du membre dedans et si ce
nombre est non nul, alors on envoie un son et on inscrit 1 dans la colonne message_read du message.
Le retour PHP effectu via la page get-message.php renverrait donc dans une colonne du tableau json['unreads'] le nombre de
messages non lus avec le pseudo.
Et dans le code comment doit-on faire ? Il suffit d'initialiser une variable $e, valeur 0, par exemple que vous mettez n'importe-o
dans le fichier get-message.php, sauf dans la boucle qui liste les messages. Ensuite, on aurait quelque chose comme :
Ne pas oublier d'ajouter message_read dans la requte SQL.
Code : PHP
<?php
if(user_verified()){
if(preg_match('#'.$_SESSION['login'].'>#is', $message)) {
// Si le message n'a pas t lu, alors on compte
if(!preg_match('#'.$_SESSION['id'].'#', $data['message_read']))
{
$read = $db->prepare("
UPDATE chat_messages
SET message_read = :user
WHERE message_id = :id
");
$read->execute(array(
'user' => $data['message_read'].';'.$_SESSION['id'].';',
'id' => $data['message_id']
));
$e++;
}
$message = preg_replace('#'.$_SESSION['login'].'>#is',
'<b><span
style="color:orange;">'.$_SESSION['login'].'</span></b>',
$message);
}
}
?>
Et rajouter aprs la ligne surligne juste aprs avoir list les messages :
Code : PHP
<?php
$json['messages'] .= $text;

$json['messages'] .= '</table>';
$json['messages'] .= '</div>';
// Dans la colonne unreads, on affiche le nombre de non lus
$json['unreads'] = $e;
?>
Pour finir, ditions la fonction Javascript getMessages().
Nous allons crer une fonction qui jouera le son.
Code : JavaScript
function playSound() {
if(!isFocus)
$('#soundNotification').trigger("play");
}
Vous avez vu le if(!isFocus) ? Il sert dtecter le focus sur la fentre. Si le visiteur ne se trouve pas sur la fentre, on joue
le son. mais pour a, il faut initialiser cette variable en dbut de fichier chat.js :
Code : JavaScript
var isFocus = true;
$(window).focus(function() {isFocus=true});
$(window).blur(function() {isFocus=false});
C'est tout ? Et bien oui ! Nous n'utiliserons pas de fichier Flash car le dmarrage de la notification alourdirait le scripte.
De ce fait, beaucoup l'auront remarqu, le .play() permet de jouer une squence audio initialise dans une balise
HTML5, la balise <audio>.
Il ne nous reste plus qu' dire notre fichier Javascript quand jouer le son. Nous allons donc modifier la fonction getMessages().
Rajoutez ce bout de code dans la fonction getMessages() dans l'attribut "Success" :
Code : JavaScript
// On joue un son si le nombre de messages non lus est non nul
if(data['unreads'] > 0) {
playSound();
}
Enfin, nous n'avons plus qu' ajouter la balise <audio> dans notre fichier chat.php !
Code : HTML
<!-- A placer n'importe o dans la page visible par les membres -
->
<audio style="display:none" id="soundNotification">
<source src="sound.ogg" type="audio/ogg" />
<source src="sound.mp3" type="audio/mp3" />
</audio>
Vous pouvez toujours essayer cette fonction sur la page de dmonstration. Pour faire le test, tapez votre pseudo dans
la zone de texte, vous entendrez ainsi le son de... SKYPE ! Je l'ai fait exprs comme a vous ne saurez pas d'o vient la
notification si vous utilisez Skype en mme temps. Voici les deux fichiers audios (obligatoire pour une meilleure
compatibilit des navigateurs) :
http://worldcraftors.com/tests/sound.ogg
http://worldcraftors.com/tests/sound.mp3
Amliorations
Ci-dessous quelques ides d'amliorations que vous pourriez apporter au chat :
Des commandes d'admin
Une couleur par pseudo. Au bout de 14 couleurs, revenir la premire (ide de tsunami33)
Mettre plusieurs salons
Pouvoir ajouter plusieurs annonces qui dfilent. Requiert donc la cration d'une nouvelle fonction JS qui appellerait un
autre fichier PHP comme get-annonces.php
Amliorer mon design.
etc.
Et bien et bien. Ce fut long, mais nous avons survcu...attendez je n'ai mme pas vrifi... Vous m'entendez ? Etes-vous mort ?
Non ??? Fiou...vous m'avez fait peur pendant une fraction de seconde. Pour les petits malins qui se sont amuss recopier les
codes que je vous ai fournis, sachez que j'ai gliss plusieurs erreurs dans ce tutoriel afin de vous faire rflchir.
IL N'EN EST RIEN. C'tait une blague. Moi ? Vous faire a ? Non le tutoriel fonctionne la perfection et j'interdis quiconque d'en
assurer le contraire.
Avant de vous laisser, il faut que vous sachiez que ce systme n'est pas la solution la plus fiable et la plus optimise.
En effet, un chat va envoyer et recevoir des dizaines de requtes. Il serait donc plus judicieux d'aller voir du ct des
sockets pour raliser un chat qui sera charg ! Le chat que nous avons ralis reste fiable si le nombre d'changes
serveurs est assez faible.
Sur ce, je vous quitte mes amis. Soyez braves et forts ! Persvrez et vous russirez de grandes choses. Je vous propose un
dernier dfi, essayez de faire votre propre de chat et faites-nous part de vos modifications, pour aider les utilisateurs n'tant pas
convaincu de ce tutoriel.
Merci vous d'avoir lu ce tutoriel et a+ vers de nouvelles aventures ! Vers l'infini et l'au-del.
Partager

Un Chat en PHP Ajax

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Un Chat en PHP Ajax

Uploaded by

Copyright:

Available Formats

Un chat en PHP/AJAX

par la dernire requte SQL effectue */

You might also like