A continuación se explica el código necesario para crear un chat básico con AJAX, PHP y MySQL.
Se utiliza una tabla creada en MySQL llamada mensaje que posee los campos id (autoincrement), usuario (varchar) y contenido (text).
El archivo index.html contiene la interfaz gráfica (cajas de texto, boton) y el código CSS. Se importa el archivo ajax.js que contiene el objeto XMLHttpRequest que me permite intercambiar datos de forma asíncrona con el servidor. Esto significa que es posible para actualizar partes de una página web, sin volver a cargar toda la página.
Además contiene dos funciones javascript:
1) mostrar: Esta función se ejecuta cada 3 segundos (setInterval(mostrar,3000)) y muestra en el div con id historial los mensajes almacenados en la base de datos a través del archivo mensajes.php que hace una consulta SQL.
2) agregar: Esta función captura el usuario y mensaje ingresado, los valores los almaceno en las variables usuario y cont y se los envío al arhivo proceso.php para que a través del método POST las capture y las inserte a la base de datos.
Código:
Archivo index.html
Archivo ajax.js
Archivo mensajes.php
Archivo procesar.php
Descargar
Funcionamiento
Se utiliza una tabla creada en MySQL llamada mensaje que posee los campos id (autoincrement), usuario (varchar) y contenido (text).
El archivo index.html contiene la interfaz gráfica (cajas de texto, boton) y el código CSS. Se importa el archivo ajax.js que contiene el objeto XMLHttpRequest que me permite intercambiar datos de forma asíncrona con el servidor. Esto significa que es posible para actualizar partes de una página web, sin volver a cargar toda la página.
Además contiene dos funciones javascript:
1) mostrar: Esta función se ejecuta cada 3 segundos (setInterval(mostrar,3000)) y muestra en el div con id historial los mensajes almacenados en la base de datos a través del archivo mensajes.php que hace una consulta SQL.
2) agregar: Esta función captura el usuario y mensaje ingresado, los valores los almaceno en las variables usuario y cont y se los envío al arhivo proceso.php para que a través del método POST las capture y las inserte a la base de datos.
Código:
Archivo index.html
<!DOCTYPE html>
<html>
<head>
<style>
#historial{
border:1px solid gray;
width:325px;
height:400px;
overflow:auto;
}
fieldset{
width:300px;
}
</style>
<script src="ajax.js"></script>
<script>
function mostrar()
{
loadDoc(null,"mensajes.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("historial").innerHTML=xmlhttp.responseText;
}
});
}
setInterval(mostrar,3000);
function agregar()
{
var u=document.getElementById('nombre').value;
var c=document.getElementById('contenido').value;
if(u!="" && c!=""){
loadDoc("usuario="+u+"&cont="+c,"proceso.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("historial").innerHTML=xmlhttp.responseText;
}
});
}else{ alert("No deje campos vacios"); }
}
</script>
</head>
<body>
<h1>CHAT-AJAX</h1>
<hr />
<div id="historial"><img src="ajax-loader.gif" /></div>
<fieldset>
<legend>Chat:</legend>
<input type="text" id="nombre" placeholder="usuario" /><br />
<textarea id="contenido" placeholder="mensaje"></textarea><br />
<button onclick="agregar()">Ok</button>
</fieldset>
<hr />
Creado por: http://codigojerry.blogspot.com/
</body>
</html>
<html>
<head>
<style>
#historial{
border:1px solid gray;
width:325px;
height:400px;
overflow:auto;
}
fieldset{
width:300px;
}
</style>
<script src="ajax.js"></script>
<script>
function mostrar()
{
loadDoc(null,"mensajes.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("historial").innerHTML=xmlhttp.responseText;
}
});
}
setInterval(mostrar,3000);
function agregar()
{
var u=document.getElementById('nombre').value;
var c=document.getElementById('contenido').value;
if(u!="" && c!=""){
loadDoc("usuario="+u+"&cont="+c,"proceso.php",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("historial").innerHTML=xmlhttp.responseText;
}
});
}else{ alert("No deje campos vacios"); }
}
</script>
</head>
<body>
<h1>CHAT-AJAX</h1>
<hr />
<div id="historial"><img src="ajax-loader.gif" /></div>
<fieldset>
<legend>Chat:</legend>
<input type="text" id="nombre" placeholder="usuario" /><br />
<textarea id="contenido" placeholder="mensaje"></textarea><br />
<button onclick="agregar()">Ok</button>
</fieldset>
<hr />
Creado por: http://codigojerry.blogspot.com/
</body>
</html>
Archivo ajax.js
var xmlhttp;
function loadDoc(string,url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(string);
}
function loadDoc(string,url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(string);
}
Archivo mensajes.php
<?php
$con=mysqli_connect("localhost","root","","chatajax");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM mensajes");
while($row = mysqli_fetch_array($result))
{
echo "<b>".$row['usuario']."</b>: ".$row['contenido'];
echo "<hr>";
}
mysqli_close($con);
?>
$con=mysqli_connect("localhost","root","","chatajax");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM mensajes");
while($row = mysqli_fetch_array($result))
{
echo "<b>".$row['usuario']."</b>: ".$row['contenido'];
echo "<hr>";
}
mysqli_close($con);
?>
Archivo procesar.php
<?php
$con=mysqli_connect("localhost","root","","chatajax");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO mensajes (usuario, contenido) VALUES ('".$_POST['usuario']."','".$_POST['cont']."')";
if (!mysqli_query($con,$sql)){
die('Error: ' . mysqli_error($con));
}
//respuesta
$result = mysqli_query($con,"SELECT * FROM mensajes");
while($row = mysqli_fetch_array($result))
{
echo "<b>".$row['usuario']."</b>: ".$row['contenido'];
echo "<hr>";
}
mysqli_close($con);
?>
$con=mysqli_connect("localhost","root","","chatajax");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO mensajes (usuario, contenido) VALUES ('".$_POST['usuario']."','".$_POST['cont']."')";
if (!mysqli_query($con,$sql)){
die('Error: ' . mysqli_error($con));
}
//respuesta
$result = mysqli_query($con,"SELECT * FROM mensajes");
while($row = mysqli_fetch_array($result))
{
echo "<b>".$row['usuario']."</b>: ".$row['contenido'];
echo "<hr>";
}
mysqli_close($con);
?>
Descargar
Funcionamiento
Esta Bueno, seria bueno ponerle los usuarios que estan conectados y un login y pass
ResponderBorraren que parte la funcion mostrar corre?
ResponderBorraruna pregunta por que aqui me sale error
ResponderBorrarWarning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\xampp6\htdocs\whats\mensajes.php on line 12