Sistema de chat en vivo con Ajax, PHP y MySQL

Sistema de chat en vivo con Ajax, PHP y MySQL. Hoy en día la comunicación prima en todo sistema web o aplicación de chat, estos sistemas se utiliza principalmente para comunicarse con personas, potenciales clientes y usuarios de algún servicio, etc.

Ahora, tener un chat en nuestra organización es muy importante para cualquier tipo de negocio, ya que la mayoría de servicios por internet tiene su sistema de chat integrado en sus sitios web para una constante comunicación con sus clientes.

¿Cuál es la finalidad de usar un Chat en mi Sistema Web?

Básicamente, para ayudarles con respecto a los servicios y resolver problemas que el usuario o cliente pueda experimentar al adquirir un producto o servicio que estamos ofreciendo.

Por lo tanto, si usted está buscando para desarrollar su propio sistema de chat, entonces estás aquí en el lugar correcto en donde le mostraremos de una manera simple como implementar un chat para sus sistema web.

En este artículo web aprenderás cómo desarrollar un modelo de chat en vivo usando herramientas y lenguajes de programación existentes en el mercado como ser el: Ajax, PHP y MySQL.

Sistema de Chat con PHP y MySQL

Sistema de Chat con PHP y MySQL

Sistema de chat en vivo con Ajax, PHP y MySQL

A continuación, veremos una serie de pasos que necesitaremos para tener nuestro propio CHAT en línea.

  1. Index.php
  2. login. php
  3. chat. js
  4. Container.php
  5. chat_action. php
  6. logout. php
  7. Chat. php
  8. Footer.php
  9. logout.php
  10. php_chat.sql
Relacionado  Cómo activar PHP 7.2 en tu Proyecto Web

IMPLEMENTACIÓN DE NUESTRO SISTEMA CHAT EN VIVO

Veremos paso a paso los recursos que necesitaremos para tener nuestro CHAT operativo.

a) Paso 1: Crear tablas de base de datos

Nuestra base de datos tendrá como nombre “php_chat.sql” y en ella vamos a crear tablas de base de datos MySQL que se utilizan para almacenar la información del sistema de chat. Por lo tanto, vamos a crear la tabla chat_users para almacenar a los usuarios y sus respectivas sesiones.

CREATE TABLE `chat_users` (
`userid` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`avatar` varchar(255) NOT NULL,
`current_session` int(11) NOT NULL,
`online` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

A continuación, también insertamos registros de usuarios como ejemplo para que funcione nuestro chat.

INSERT INTO `chat_users` (`userid`, `username`, `password`, `avatar`, `current_session`, `online`) VALUES
(1, 'Rose', '123', 'user1.jpg', 3, 0),
(2, 'Smith', '123', 'user2.jpg', 1, 0),
(3, 'adam', '123', 'user3.jpg', 1, 0),
(4, 'Merry', '123', 'user4.jpg', 0, 0),
(5, 'katrina', '123', 'user5.jpg', 0, 0),
(6, 'Rhodes', '123', 'user6.jpg', 0, 0);

Siguiendo con la instalación, crearemos la tabla de “chat” para almacenar los detalles del chat.

CREATE TABLE `chat` (
`chatid` int(11) NOT NULL,
`sender_userid` int(11) NOT NULL,
`reciever_userid` int(11) NOT NULL,
`message` text NOT NULL,
`timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Crearemos “chat_login_details” tabla para almacenar la actividad de chat iniciada por el usuario.

CREATE TABLE `chat_login_details` (
`id` int(11) NOT NULL,
`userid` int(11) NOT NULL,
`last_activity` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`is_typing` enum('no','yes') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

b) Paso 2: Iniciar sesión de usuario de chat

En esta sección vamos a crear la interfaz de inicio de sesión de chat (Formulario HTML5) en login.php, que nos permitirá iniciar sesión en el sistema de chat.

<div class="row">
<div class="col-sm-4">
<h4>Chat Login:</h4>
<form method="post">
<div class="form-group">
<?php if ($loginError ) { ?>
<div class="alert alert-warning"><?php echo $loginError; ?></div>
<?php } ?>
</div>
<div class="form-group">
<label for="username">User:</label>
<input type="username" class="form-control" name="username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="pwd" required>
</div>
<button type="submit" name="login" class="btn btn-info">Login</button>
</form>
</div>
</div>

c) Paso 3: Crear HTML del sistema de chat y librerías externas

En el fichero index.php, vamos a incluir librerías de estilos llamado Bootstrap, jQuery y archivos CSS para crear la interfaz del sistema de chat con bootstrap para obtener una interfaz profesional.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<link href="css/style.css" rel="stylesheet" id="bootstrap-css">
<script src="js/chat.js"></script>

A continuación, poco después de que el usuario inicie sesión, este se re direccionará a “ index.php” donde se mostrará el sistema de chat con la lista de usuarios a la izquierda y los detalles del chat de usuario a la derecha.

Relacionado  Comprimir archivos ZIP con PHP: Ejemplo completo

Para terminar vamos a obtener detalles del chat actual del usuario de chat activo utilizando el método de chat getUserChat() de chat.php y mostrar los detalles del chat.

<div class="contact-profile" id="userSection">
<?php
$userDetails = $chat->getUserDetails($currentSession);
foreach ($userDetails as $user) {
echo '<img src="userpics/'.$user['avatar'].'" alt="" />';
echo '<p>'.$user['username'].'</p>';
echo '<div class="social-media">';
echo '<i class="fa fa-facebook" aria-hidden="true"></i>';
echo '<i class="fa fa-twitter" aria-hidden="true"></i>';
echo '<i class="fa fa-instagram" aria-hidden="true"></i>';
echo '</div>';
}
?>
</div>
<div class="messages" id="conversation">
<?php
echo $chat->getUserChat($_SESSION['userid'], $currentSession);
?>
</div>

d) Paso 4: Gestionar respuesta de chat de usuario

En esta sección manejaremos la funcionalidad de envío de mensajes en chat.js cuando haga clic en el botón “Enviar mensaje” y la función de llamada sendMessage()

$(document).on("click", '.submit', function(event) {
var to_user_id = $(this).attr('id');
to_user_id = to_user_id.replace(/chatButton/g, "");
sendMessage(to_user_id);
});

En el fichero chat_action.php, llamaremos al método de chat insertChat() para insertar los detalles del chat a la base de datos MySQL para su posterior consulta.

<?php
session_start();
include ('Chat.php');
if($_POST['action'] == 'insert_chat') {
$chat->insertChat($_POST['to_user_id'], $_SESSION['userid'], $_POST['chat_message']);
}
?>

e) Paso 5: Actualizar información de la lista de usuarios de chat

Siguiendo el proceso de instalación, en el archivo chat.js, crearemos la función updateUserList() para actualizar la información de la lista de usuarios de chat como el estado del usuario en línea haciendo la solicitud Ajax a chat_action.php.

function updateUserList() {
$.ajax({
url:"chat_action.php",
method:"POST",
dataType: "json",
data:{action:'update_user_list'},
success:function(response){
var obj = response.profileHTML;
Object.keys(obj).forEach(function(key) {
// update user online/offline status
if($("#"+obj[key].userid).length) {
if(obj[key].online == 1 && !$("#status_"+obj[key].userid).hasClass('online')) {
$("#status_"+obj[key].userid).addClass('online');
} else if(obj[key].online == 0){
$("#status_"+obj[key].userid).removeClass('online');
}
}
});
}
});
}

f) Paso 6: Actualizar detalles de chat de usuario activo

En chat.js, crearemos la función updateUserChat() para actualizar los detalles del chat de usuario activo haciendo la solicitud Ajax a chat_action. php.

function updateUserChat() {
$('li.contact.active').each(function(){
var to_user_id = $(this).attr('data-touserid');
$.ajax({
url:"chat_action.php",
method:"POST",
data:{to_user_id:to_user_id, action:'update_user_chat'},
dataType: "json",
success:function(response){
$('#conversation').html(response.conversation);
}
});
});
}

g) Paso 7: Actualizar recuento de mensajes no leídos del usuario

Fichero chat.js, crearemos la función updateUnreadMessageCount() para actualizar el recuento de mensajes no leídos del usuario haciendo la solicitud Ajax a chat_action.php.

function updateUnreadMessageCount() {
$('li.contact').each(function(){
if(!$(this).hasClass('active')) {
var to_user_id = $(this).attr('data-touserid');
$.ajax({
url:"chat_action.php",
method:"POST",
data:{to_user_id:to_user_id, action:'update_unread_message'},
dataType: "json",
success:function(response){
if(response.count) {
$('#unread_'+to_user_id).html(response.count);
}
}
});
}
});
}

h) Paso 8: Actualizar estado de escritura de usuario

Archivo chat.js, manejaremos el estado de mecanografía del usuario haciendo solicitud Ajax a chat_action.php para actualizar escribiendo como sí si el usuario escribe en el evento de enfoque de entrada.

$(document).on('focus', '.message-input', function(){
var is_type = 'yes';
$.ajax({
url:"chat_action.php",
method:"POST",
data:{is_type:is_type, action:'update_typing_status'},
success:function(){
}
});
});

i) Paso 9: Gestionar sesión de usuario de chat

En cierre.php, manejaremos la funcionalidad de cierre de sesión de usuario y actualizaré el estado offline del usuario.

<?php
session_start();
include ('Chat.php');
$chat = new Chat();
$chat->updateUserOnline($_SESSION['userid'], 0);
$_SESSION['username'] = "";
$_SESSION['userid'] = "";
$_SESSION['login_details_id']= "";
header("Location:index.php");
?>
Sistema de chat en vivo con Ajax, PHP y MySQL

Sistema de chat en vivo con Ajax, PHP

CONCLUSIÓN SISTEMA CHAT

La implementación del CHAT en vivo en nuestros sistemas de ventas es muy recomendable, una de las razones para tal implementación son las siguientes:

  1. Resolver las dudas de nuestros clientes y/ usuarios.
  2. Si un usuario intenta realizar una consulta antes de realizar una compra para despejar su duda.
  3. Plantear sugerencias para nuestros usuarios y/o clientes.
Relacionado  Generar Excel con PhpSpreadsheet y PHP & MySQL

A continuación les dejare un archivo para que puedan descargar e implementarlo. El fichero que les dejare incluye base de datos.

DESCARGA DEL SISTEMA CHAT EN VIVO

Pueden descargar el código fuente del script y también incluye base de datos.

[sociallocker id=5099] Descargar Código Fuente [/sociallocker]
Comprar

 

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación / 5. Recuento de votos:

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Nestor Tapia

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

30 Comentarios
Mostrar todo Más útil Rating más alto Rating más bajo Añade tu reseña
  1. Hola buen día, el chat me funciono de maravilla muchas gracias, quisiera saber si la version paga trae algunas mejoras o que diferencia hay ?

  2. Me podrias ayudar con mi proyecto de un chat, las interfaces dinamicas de los usuarios y sus amigos.

    Tengo experiencia con php/Mysql pero no con ajax.

    Los puntos importantes son: como enviar los mensajes y leer los mensajes en tiempo real.

    Y claro cuanto serian de tus honorarios.

    Soy de la Cd de México.

  3. Responder
    Родион Ждановa 7 octubre, 2021 a 1:24 pm

    NECESITO UNA AYUDA URGENTE NO SE COMO RESOLVERLO EN PHP
    Se trata de visualizar un rombo con asteriscos (*) en una matriz de 7 filas x 7 columnas.
    Visualizar la matriz por pantalla en formato de tabla html.
    Nota:” Solo se rellena el exterior del rombo. Y para el relleno de la matriz hay que usar bucles,
    no asignar directamente los caracteres a una posición del array ‘a mano’ ”.

  4. En local funciona perfectamente! Al subirlo al servidor al logearse se queda en ese formulario y no avanza. 🙁

  5. Muchas gracias aporte me sirvio mucho la de descargar¡¡ voy a probar doy un 5.0

  6. muchas gracias por la aportación

  7. como podria ajustar este chat para crear un chat grupal que se puedan crear grupos y chatear entre ellos

  8. Como podria hacer para que la ventana de chat se vea minimizada como la de facebook?Digamos, que cuando estes chateando puedas ver otra pantalla que no sea la de chat

    Saludos!!!

  9. Hola amigo el chat muy bueno, funciona en localhost. pero al publicarlo en la web genera el siguiente error: Warning: Cannot modify header information – headers already sent by (output started at /srv/disk21/3421888/www/avpalacios.atwebpages.com/header.php:1) in /srv/disk21/3421888/www/avpalacios.atwebpages.com/login.php on line 15
    De tal manera el sitio no es redirigido automáticamente a la pagina Index.php, lo he logrado hacer que funcione, me puedes ayudar.
    quedo atento a sus comentarios.

  10. Me podrias ayudar con mi chat te lo agradeceria sy me escribres por wp o correo electrónico por favor jorgeetrejoo@gmail.com (614)1150388

  11. No me deja descargar, dice que jetpack ha bloqueado la pagina de inicio, podrias subir el link otra vez?

  12. Hola,tengo un chat php versión gratuita que me gustaría agregarle un par de funciones,podrías ayudarme ? desde ya muchas gracias

  13. Hola, no puedo descargar el codigo fuente
    porfavor alguien que me ayude con un link de descargar de mega u otro

    ya que app.box parece que tiene problema

  14. Hola, primero que todo gracias por tu sistema de chat, es un gran aporte
    segundo, estoy intentando cambiar la base de datos para que autentique con los usuarios de mi pagina pero al hacerlo me aparece error al leer esta función
    private function getData($sqlQuery) {
    $result = mysqli_query($this->dbConnect, $sqlQuery);
    if(!$result){
    die(‘Error in query: ‘. mysqli_error($conn));
    }
    $data= array();
    /*while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {*/
    while ($row = mysqli_fetch_assoc ($result)) {
    $data[]=$row;
    }
    return $data;

    me podrías indicar como hago esto
    Gracias

  15. No se declaró la variable $loginError
    No se publicó el código de style.css

  16. Saludos estimado, excelente aporte, estaba usando el ejemplo de php chat, pero a los segundos aparece un mensaje en la consola
    ( jquery.min.js:4 POST https://pawzcr.com/chat/chat_action.php net::ERR_CONNECTION_CLOSED )

  17. Como se puede moderar la conversación? en que momento podemos acceder como administradores y eliminar mensajes indeseados por ejemplo?

  18. No existe el link de descarga, lo pueden habilitar por favor.

  19. no puedo bajarlo habilitalo x fa

  20. No se puede bajar el código fuente arreglalo brother!!

    • Que tal Lisandro,

      Acabo de verificarlo y si se puede descargar, esta alojado en el servidor box.com

      Saludos cordiales.

      • Que tal Nestor buen día
        He estado revisando tu código y en general es muy útil, pero tengo un detalle , no puedo descargar el ZIP, anteriormente ya lo había descargado pero por un tema de cambio de equipo perdí mi info.

        Me puedes ayudar en re-enviarme un link porque el actual ya no me descarga ningún archivo

Deje una respuesta

BaulPHP
Logo
Shopping cart