En este caso no se trata de un artículo original, sino de una medio traducción medio interpretación de este original en inglés. Podéis descargaros todo el código desde el enlace.
Se trata de un chat web simple, programado en php y basado en Ajax, haciendo uso de jQuery, con función de login y logout y soporte para varios usuarios.
El tutorial comienza creando un archivo index.php tal cual este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
</body>
</html>
Como podéis ver se trata de un marcado HTML normal. La referencia a jQuery del código original está anticuada, en este ejemplo ya veréis una apuntando una dirección actualizada. En cuanto a la estructura hay tres grandes divs: el #wrapper, que contiene los otros dos y el formulario de envío de mensaje; el #menu, que sólo es un mensaje de bienvenida y un botón de logout y, finalmente, el #chatbox, que es donde se incluirán los mensajes.
El css sería tal que así:
/* CSS Document */
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input { font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover { text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:504px;
border:1px solid #ACD8F0; }
#loginform { padding-top:18px; }
#loginform p { margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit { width: 60px; }
.error { color: #ff0000; }
#menu { padding:12.5px 25px 12.5px 25px; }
.welcome { float:left; }
.logout { float:rightright; }
.msgln { margin:0 0 2px 0; }
Poca cosa que comentar, pero entre esto y el marcado ya tenemos la apariencia definida del chat.
Ahora toca el formulario de login en PHP:
<?
session_start();
function loginForm(){
echo'
<div id="loginform">
<form action="index.php" method="post">
<p>Please enter your name to continue:</p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<input type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
';
}
if(isset($_POST['enter'])){
if($_POST['name'] != ""){
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}
else{
echo '<span class="error">Please type in a name</span>';
}
}
?>
En este caso se trata de un login simple, no comprueba usuarios registrados en una base de datos. Sobre su funcionamiento hay poco que comentar: nos pide un nombre y lo incluye dentro de una variable de sesión (de ahí la llamada a session_start()). El uso de htmlspecialchars() es para evitar ataques XSS.
Lo siguiente es motrar tanto el nombre de usuario en el Welcome como el formulario si el usuario no está logueado. La idea es dejar el primer archivo, el index.php tal cual este:
<?php
if(!isset($_SESSION['name'])){
loginForm();
}
else{
?>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
});
</script>
<?php
}
?>
Bien, ahora vamos con el código de Javascript para la funcionalidad de logout. Dentro del script que ya tenemos creado en nestro código insertamos:
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Are you sure you want to end the session?");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
</script>
Esto no sólo nos permite enviar una llamada por el método GET para desconectar al usuario, sino que también nos sacará una ventana de confirmación antes de hacerlo. Y claro está, tendremos que tocar nuestro código del index.php para comprobar que se ha hecho una petición de logout y destruir la sesión que se había creado en el login:
if(isset($_GET['logout'])){
//Simple exit message
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
fclose($fp);
session_destroy();
header("Location: index.php"); //Redirect the user
}
Este código, además, escribe en un archivo de logs (más tarde vemos para qué se usará) que el usuario se ha desconectado y redirecciona de nuevo a la página principal.
Lo siguiente es manejar las inserciones de mensajes de los usuarios. Hay que empezar por definir una función de jQuery para enviar los mensajes por el método POST haciendo uso de Ajax. El proceso sería recoger el evento de click del formulario, leer los datos del campo de texto, enviarlos al script de php que los va a tratar y borrar el campo de texto para que quede de nuevo en blanco:
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
Y claro, esto implica crear el archivo post.php para manejar los datos en el lado del servidor. Un archivo que llevaría este código:
<?
session_start();
if(isset($_SESSION['name'])){
$text = $_POST['text'];
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
}
?>
De nuevo iniciamos sesión, comprobamos que el usuario está logueado, recogemos el texto del mensaje del array $_POST y escribimos el mensaje junto al nombre de usuario en el log del chat.
Finalmente llevamos a la parte de mostrar los mensajes de chat en pantalla. Lo primero es cargar el log del chat dentro del #chatbox si este existe, para ahorrarnos tiempo:
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);
echo $contents;
}
?></div>
Lo siguiente es la carga por Ajax de los datos contenidos en el archivo de log. La cosa se arreglaría con el método de jQuery para Ajax:
//Load the file containing the chat log
function loadLog(){
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
},
});
}
El parámetro url nos indica a qué archivo intentamos acceder por Ajax, cache es para definir si queremos cachear el archivo o no (en este caso, por lógica, no, porque queremos recargarlo en cada llamada) y finalmente la función que se ejecutará en caso de éxito (en este caso insertar el log en el div #chatbowx).
Para añadir autoscrolling, modificas el código anterior añadiendo lo siguiente:
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log into the #chatbox div
//Auto-scroll
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
}
Básicamente consiste en ir modificando el tamaño para ocultar la parte de arriba y ampliar la de abajo. Simple truquillo. Ahora nos falta que el chat se auto recargue, cosa que haremos desde javascript:
setInterval (loadLog, 2500);
Esto lanza la función loadLog cada dos segundos y medio, logrando recargar los datos.
En el artículo orginal además encontraréis al final una serie de artículos con consejos varios para mejorar el código (en inglés) y todo el código completo para descargar.
DonnierocK 