Cómo crear un chat muy simple mediante AJAX

En este tutorial veremos cómo crear un sistema de chat mediante AJAX de una forma sencilla y apta para todos los niveles de programación. Usamos AJAX para que la experiencia del usuario sea óptima y no tenga que andar recargando la página cada vez que quiera recibir un nuevo mensaje. Este tutorial consta de los siguientes pasos:

• Creación de la base de datos
• Creación del formulario de registro y login
• Uso de javascript para enviar los datos del formulario
• Login y envío de mensaje en PHP

Antes que nada, necesitamos dos tablas. Una para almacenar la información del usuario, y otra para albergar los mensajes de chat de los distintos usuarios. Por lo tanto, copia y pega este query sql en tu gestor de base de datos para poder crear la BD necesaria en este ejemplo:

CREATE TABLE IF NOT EXISTS `ajax_chat` (
`id` int(11) NOT NULL,
`username` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
 
CREATE TABLE IF NOT EXISTS `ajax_msg` (
`id` int(11) NOT NULL,
`user` varchar(20) NOT NULL,
`time` varchar(25) NOT NULL,
`message` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;
 
ALTER TABLE `ajax_chat`
ADD PRIMARY KEY (`id`);
ALTER TABLE `ajax_msg`
ADD PRIMARY KEY (`id`);
 
ALTER TABLE `ajax_chat`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4;
 
ALTER TABLE `ajax_msg`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=13;

Ahora, crea un fichero llamado db.php para establecer la conexión con la base de datos. Copia y pega el siguiente código dentro de el fichero db.php que acabamos de crear:

<?php $mysql_hostname = "localhost"; 
// database server $mysql_user = "username"; 
//database username $mysql_password = "password"; 
// database password $mysql_database = "database"; 
// Database Name $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database"); 
mysql_select_db($mysql_database, $bd) or die("Could not select database"); 
$con = mysqli_connect($mysql_hostname,$mysql_user,$mysql_password,$mysql_database); ?>

Una vez hemos creado la base de datos y el archivo de configuración de BD, tenemos que crear un html para el login del usuario si queremos ver y enviar mensajes en el chat. Para ello, crea un nuevo fichero y renómbralo como index.php. Inserta el siguiente código en su interior.

En el código anterior he utilizado algunas sentencias y métodos de PHP como isset($_SESSION[“user”]). Este “isset” se utiliza para comprobar si el usuario está logueado, es decir, existe la sesión de logueo, o no.

Añade el siguiente código Javascript para gestionar el envío del formulario.

Este será nuestro fichero AJAX, msg.js, cuyo uso es cargar nuestros mensajes dentro del chat box. Copia y pega el siguiente código dentro de msg.js.

$(document).ready(function() {
var interval = setInterval(function(){
$.ajax({
type: "POST",
url: 'getchat.php',
success: function(data){
$('#div_message').html(data);
}
});
},2000);
 
});

getchat.php

Ahora, por fin hay que crear dos archivos login.php y message.php. login.php contendrá código necesario para verificar las credenciales del inicio de sesión y message.php contendrá el código necesario para enviar el mensaje.

login.php

message.php

<?php error_reporting(0); include "db.php"; session_start(); if(isset($_SESSION["user"])){ $userid=$_SESSION["userid"]; $user=$_SESSION["user"]; $message=$_POST['message']; $time=date("H"); $sql=mysqli_query($con,"insert into ajax_msg (user,time,message) values ('$user','$time','$message')"); if($sql){ echo "true"; }else{ echo "false".mysqli_error($con); } }else{ echo "falselogin"; } ?>

Espero que este tutorial te haya ayudado a entender cómo hacer realizar un chat muy simple mediante AJAX. Si siguiendo el tutorial obtienes algún error, por favor, házmelo saber en la caja de comentarios de más abajo. Gracias por leer el tutorial y, ¡feliz código!

Fuente: 7topics.com