Discussion :

[laverdure25]

bonjour,

voila j'essaye de faire un tchat en php/ajax en suivant le tutoj'arrive a afficher les joueurs en ligne, ajouter des messages dans la base de donnée mais je n'arrive pas a les afficher

Sans plus tarder mon code

Chat.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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylechat.css">
<script src="chat.js"></script>
<?php
session_start();
include('phpscripts/functions.php');
$db = db_connect();
?>
<div id="container">
	<h1>Mon super chat</h1>
<?php
// permettra de créer l'utilisateur lors de la validation du formulaire
if(isset($_POST['login']) AND !preg_match("#^[-. ]+$#", $_POST['login'])) 
{
/* On crée la variable login qui prend la valeur POST envoyée
car on va l'utiliser plusieurs fois */
$login = $_POST['login'];
$pass = $_POST['pass'];
 
// On crée une requête pour rechercher un compte ayant pour nom $login
$query = $db->prepare("SELECT * FROM chat_accounts WHERE account_login = :login");
$query->execute(array(
    'login' => $login
));
// On compte le nombre d'entrées
$count=$query->rowCount();
 
// Si ce nombre est nul, alors on crée le compte, sinon on le connecte simplement
if($count == 0) {           
    // Création du compte
    $insert = $db->prepare('
        INSERT INTO chat_accounts (account_id, account_login, account_pass) 
        VALUES(:id, :login, :pass)
    ');
    $insert->execute(array(
        'id' => '',
        'login' => htmlspecialchars($login),
        'pass' => md5($pass)
    ));
 
    /* Création d'une session id ayant pour valeur le dernier ID créé
    par la dernière requête SQL effectuée */
    $_SESSION['id'] = $db->lastInsertId();
    // On crée une session time qui prend la valeur de la date de connexion
    $_SESSION['time'] = time();
    $_SESSION['login'] = $login;
} else {
    $data = $query->fetch();    
 
    if($data['account_pass'] == md5($pass)) {           
        $_SESSION['id'] = $data['account_id'];
        // On crée une session time qui prend la valeur de la date de connexion
        $_SESSION['time'] = time();
        $_SESSION['login'] = $data['account_login'];
    }
}
 
// On termine la requête
$query->closeCursor();
}
 
/* 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 {
?>
 
<option value="2">En ligne</option>
  <!-- Statut //////////////////////////////////////////////////////// -->				
	<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&eacute;</option>
				<option value="2" selected>En ligne</option>
			</select>
		</td>
	</tr></table>
 
 
 
<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>
	<input type="hidden" id="dateConnexion" value="<?php echo $_SESSION['time']; ?>" />		
	<!-- colonne avec les membres connectés au chat -->
	<td valign="top" id="users-td"><div id="users">Chargement</div></td>
</tr></table>
 
 
<!-- Zone de texte //////////////////////////////////////////////////////// -->
        <a name="post"></a>
	<table class="post_message"><tr>
		<td>
		<form action="post" method="chat.php" onsubmit="postMessage(); return false;">
			<input type="text" id="message" maxlength="255" />
			<input type="button" onclick="postMessage()" value="Envoyer" id="envoyer" />
		</form>
                <div id="responsePost" style="display:none"></div>
 
 
	</td>
</tr></table>
<?php
	}
?>
</div>

chat.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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
$(document).ready(function() {
	// On vérifie 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 membres connectés
		window.setInterval(getOnlineUsers, reloadTime);
		// actualisation des messages
		window.setInterval(getMessages, reloadTime);
		// on sélectionne la zone de texte
		$("message").focus();
 
	}
});
 
function insertLogin(login) {
	var $message = $("#message");
	$message.val($message.val() + login + '> ').focus();
}
var reloadTime = 10000;
var scrollBar = false;
 
function getMessages() {
 
 
	// On lance la requête ajax
	$.getJSON('phpscripts/get-message.php?dateConnexion='+$("#dateConnexion").val(), function(data) {
			/* On vérifie 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 après, le message a déjà é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
				// Après 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 première 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");
 
			}
 
	});
}
function postMessage() {
	// On lance la requête ajax
	// type: POST > nous envoyons le message
 
	// On encode le message pour faire passer les caractères spéciaux comme +
	var message = encodeURIComponent($("#message").val());
	$.ajax({
		type: "POST",
		url: "phpscripts/post-message.php",
		data: "message="+message,
		success: function(msg){
			// Si la réponse 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 resélectionne la zone de texte, en cas d'utilisation du bouton "Envoyer"
			$("#message").focus();
		},
		error: function(msg){
			// On alerte d'une erreur
			alert('Erreur');
		}
	});
}
 
 
 
function getOnlineUsers() {
	// On lance la requête ajax
	$.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&eacute;';
					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 insérer 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&eacute;.</span>');
	});
}
 
function setStatus(status) {
	// On lance la requête ajax
	// type: POST > nous envoyons le nouveau statut
	$.ajax({
		type: "POST",
		url: "phpscripts/set-status.php",
		data: "status="+status.value,
		success: function(msg){
			// On affiche la réponse
			$("#statusResponse").html('<span style="color:green">Le statut a &eacute;t&eacute; mis &agrave; jour</span>');
			setTimeout(rmResponse, 3000);
		},
		error: function(msg){
			// On affiche l'erreur dans la zone de réponse
			$("#statusResponse").html('<span style="color:orange">Erreur</span>');
			setTimeout(rmResponse, 3000);
		}
	});
}
 
function rmResponse() {
    $("#statusResponse").html('');
}

et enfin get-messages.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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<?php
session_start();
include('functions.php');
$db = db_connect();
 
/* On vérifie d'abord que le compte existe, si ce n'est pas le cas, 
on s'arrête, 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);
// 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();
/* On effectue la requête sur la table contenant les messages. On récupère
les 100 derniers messages. Enfin, on affiche le tout. */
 
/* Si vous voulez faire appraître 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

    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 crée 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 dès que l'ID du membre est différent du précédent
        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 même 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 .= '&nbsp;<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 apparaît suivi de >, on le colore en orange
        if(user_verified()){
            if(preg_match('#'.$_SESSION['login'].'&gt;#is', $message)) {
                $message = preg_replace('#'.$_SESSION['login'].'&gt;#is', '<b><span style="color:orange;">'.$_SESSION['login'].'&gt;</span></b>', $message);
            }
        }
 
        // On ajoute le message en remplaçant les liens par des URLs cliquables
        $text .= $message.'<br />';
        $text .= '</td></tr>';
 
        $i++;
        $prev = $data['account_id'];
    }
 
    /* On crée 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.';
}
$query->closeCursor();
 
 
?>

Merci à L'avance

[bretus]

Heu... On dirait qu'il manque un echo json_encode($json) dans "get-messages.php" non?

Code :

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

1
2
3
4
 
//...
$query->closeCursor();
echo json_encode($json);