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.

<?php error_reporting(0); include "db.php"; session_start(); ?>
<table style="border-color: #000;" cellpadding="10" id="table_1">
<tr>
<th colspan="3">Ajax Based Chat in PHP</th>
</tr>
<?php $es=0; if(isset($_SESSION["user"])){ $es='1'; } ?>
<tr id="panel_login">
<?php if($es==0){?>
<td><input type="text" id="username" placeholder="Enter username"/></td>
<td><input type="text" id="password" placeholder="Enter password"/></td>
<td><input type="button" name="submit" value="Start Chat" onclick="checklogin();"/></td>
<?php } ?>
</tr>
<tr id="msg_panel">
<?php if($es==0){?>
<td colspan="3">Use username and password combinations from table on right side:</td>
<?php }else{ ?>
<td colspan="2">Welcome <?php echo $_SESSION['user'];?>, Now you can start chat. </td>
<td><input type="button" value="Logout" onclick="logout_now();"/></td>
<?php }?>
 
</tr>
<tr>
<td colspan="3">
<div style="height:180px; background:#fff; overflow:scroll;" class="left wt_100" id="div_message"></div>
</td>
</tr>
<tr>
<td colspan="2"><input type="text" class="wt_100" id="message" placeholder="Enter message..."/></td>
<td><input type="button" value="SEND" onclick="send_message();"/></td>
</tr>
</table>

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.

<script src="<a class="vglnk" href="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" rel="nofollow"><span>https</span><span>://</span><span>ajax</span><span>.</span><span>googleapis</span><span>.</span><span>com</span><span>/</span><span>ajax</span><span>/</span><span>libs</span><span>/</span><span>jquery</span><span>/</span><span>2</span><span>.</span><span>2</span><span>.</span><span>4</span><span>/</span><span>jquery</span><span>.</span><span>min</span><span>.</span><span>js</span></a>" type="text/javascript"></script>
<script src="msg.js" type="text/javascript"></script>
<script>
function checklogin(){
var getUser=document.getElementById("username").value;
var getPassword=document.getElementById("password").value;
$.post('login.php',{getUser:getUser,getPassword:getPassword},
function(data){
if(data.includes("true")){
res=data;
res=res.replace("true","");
document.getElementById("panel_login").innerHTML="";
document.getElementById("msg_panel").innerHTML="<td colspan='2'>Welcome "+res+", Now you can start chat. </td>"+
"<td><input type="button" value="Logout" onclick="logout_now();"/></td>";
}else{
alert("Invalid Login");
}
});
}
function send_message(){
var message=document.getElementById("message").value;
if(message!=""){
$.post('message.php',{message:message},
function(data){
if(data.includes("false")){
res=data;
res=res.replace("false","");
if(data.includes("login")){
document.getElementById("panel_login").innerHTML="<td><input type="text" id="username" placeholder="Enter username"/></td>"+
"<td><input type="text" id="password" placeholder="Enter password"/></td>"+
"<td><input type="button" name="submit" value="Start Chat" onclick="checklogin();"/></td>";
}else{
alert(data);
}
}else{
document.getElementById("message").value="";
}
});
}else{
alert("Unknown Message");
}
}
function logout_now(){
var val="";
$.post('logout.php',{val:val},
function(data){
if(data=="true"){
document.getElementById("panel_login").innerHTML="<td><input type="text" id="username" placeholder="Enter username"/></td>"+
"<td><input type="text" id="password" placeholder="Enter password"/></td>"+
"<td><input type="button" name="submit" value="Start Chat" onclick="checklogin();"/></td>";
document.getElementById("msg_panel").innerHTML="<td colspan='3'>Use username and password combinations from table on right side:</td>";
}else{
alert(data);
}
});
}
</script>

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

<?php
error_reporting(0);
include "db.php";
session_start();
$sql=mysqli_query($con,"select * from ajax_msg order by id desc ");
while($row=mysqli_fetch_array($sql)){
echo "<small><b>".$row['user']." said :</b></br>";
echo "".$row['message']."</small></br>";
}
?>

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

<?php
error_reporting(0);
include "db.php";
session_start();
 
$getUser=$_POST['getUser'];
$getPassword=$_POST['getPassword'];
 
$result = mysqli_query($con,"SELECT * FROM ajax_chat where username='$getUser' and password='$getPassword'");
$c_rows = mysqli_num_rows($result);
$rows=mysqli_fetch_array($result);
$getId=$rows["id"];
$error=0;
if ($c_rows<=0) { $error=1; } if($getUser==""){ $error=1; } if($getPassword==""){ $error=1; } if($error==0) { $_SESSION["user"]=$getUser; $_SESSION["userid"]=$getId; echo "true".$getUser; }else{ echo "false"; } ?>

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

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO