Un chat sencillo con jQuery, PHP y MySQL
El chat consistirá en tres archivos:
chat.php: contendrá la cara visible del chat y el JavaScript que generará la interacción.cargar-mensajes.php: se encargará de cargar los mensajes que mostraremos en el chat.insertar-mensajes.php: tomará el mensaje y lo insertará en la base de datos.
cargar-mensajes.php e insertar-mensajes.php serán invocados a través de eventos configurados con jQuery.En primer lugar, crearemos la tabla en la base de datos. La llamaremos “chat” y tendrá los campos:
id, usuario, mensaje, fecha.Procedemos a crear
cargar-mensajes.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php<br> require('conexion_a_la_bd'); // Seleccionamos la base de datos mysql_select_db('base_de_datos'); // Realizamos la consulta de los ultimos 50 mensajes en el chat $resultado = mysql_query("SELECT * FROM chat ORDER BY fecha DESC LIMIT 0, 50"); // Creamos la entrada HTML para cada mensaje $ret = ''; while($msj = mysql_fetch_object($resultado)) {<br> $arrDateTime = explode(" ", $msj->fecha);<br> $arrDate = explode("-", $arrDateTime[0]);<br> $arrTime = explode(":", $arrDateTime[1]);<br> if($arrDateTime[0] == date("Y-m-d"))<br> $dia = "Hoy, ";<br> else<br> $dia = $arrDate[2].'/'.$arrDate[1].'/'.$arrDate[0].', ';<br><br> if($arrTime[0] > 12)<br> $hora = ($arrTime[0]-12).':'.$arrTime[1].'pm';<br> else<br> $hora = $arrTime[0].':'.$arrTime[1].'pm';<br> <br> $ret = '<div><span title="'.$dia.$hora.'" class="chat-usuario">'.$msj->usuario.'</span>: '.$msj->mensaje.'</div>'."\n".$ret; } // Liberamos la consulta mysql_free_result($resultado); // Imprimimos los mensajes echo $ret;?> |
insertar-mensaje.php:
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
| <?php <br> require('conexion_a_la_bd'); //Verificamos que el nombre usuario este presente en el campo de texto oculto $u = false; if(isset($_POST['chat-usuario']) and strlen(trim($_POST['chat-usuario'])) > 0) { $usuario = $_POST['chat-usuario']; $u = true; } //Verificamos que el mensaje sea valido $m = false; if(isset($_POST['chat-mensaje']) and strlen(trim($_POST['chat-mensaje'])) > 0) { $mensaje = $_POST['chat-mensaje']; $m = true; } $ret = ''; // Si ambos son validos if($u and $m) { mysql_select_db('base_de_datos'); mysql_query("INSERT INTO chat (usuario,mensaje) VALUES ('".$usuario."','".$mensaje."')"); $ret = '<div><span title="Hoy, '.date('h:i').'" class="chat-usuario">'.$usuario.'</span>: '.$mensaje.'</div>'."\n"; } echo $ret;?> |
title que colocamos conteniendo al nombre de usuario nos permitirá que aparezca un mensaje con la hora de publicación, al posarnos sobre el nombre de usuario.Ahora, nos toca la parte visible de chat.
En el
<body> de chat.php colocaremos el cuadro de mensajes y el formulario de inserción de mensajes nuevos:
43
44
45
46
47
48
49
50
51
| <div id="chat"> <div id="chat-mensajes"></div> <form id="chat-form"> <input type="hidden" name="chat-usuario" value="<?php echo $chat_usuario; ?>"> <label for="chat-form-mensaje">Mensaje:</label> <textarea name="chat-mensaje" id="chat-form-mensaje"></textarea> <input type="submit" value="Enviar"> </form></div> |
1
2
3
| #chat-mensajes { overflow: auto;} |
<div>.En el
<head> irá el código JavaScript que permitirá el dinamismo. Para ello emplearemos dos bibliotecas: jQuery (framework) y jQuery.scrollTo (nos permitirá poder ubicar el <div> en el mensaje más reciente). Colocaremos entre las etiquetas <head>:
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
| <script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.scrollto.min.js"></script><script type="text/javascript"> $(document).ready(function() { // Accion que nos ubica en el mensaje mas reciente function setScroll(){ $('#chat-mensajes').scrollTo('div:last', 1000 ); } // Indicamos las acciones a ejecutar al enviar un mensaje $('#chat-form').submit(function() { $.post('insertar-mensaje.php', $('#chat-form').serialize(), function(data) { $('#chat-mensajes').append(data); // Añadir el nuevo mensaje al final $('#chat-form-mensaje').val(''); // Limpiar el cuadro de texto setScroll(); }); return false; }); // Cargamos los mensajes y nos ubicamos al ultimo $('#chat-mensajes').load('chat/cargar-mensajes.php', function(response, status, xhr) { if (status == "error") { var msg = "Hubo un error en la carga del chat: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } else { setScroll(); } }); // Le indicamos cargar los mensajes cada 15 segundos setInterval(function() { $('#chat-mensajes').load('cargar-mensajes.php'); setScroll(); },15000); }); </script> |
No hay comentarios