Sistema de chat en vivo con Ajax, PHP y MySQL

baulphp.com/sistema-de-chat-en-vivo-con-ajax-php-y-mysql

24 de enero de 2019

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.

1/8
 Sistema de Chat con 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

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

2/8
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.

3/8
<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.

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.

4/8
<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.

5/8
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.

6/8
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");
?>

7/8
 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.

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.

Descargar Código Fuente

Chat en vivo Chat jQuery Chat PHP Implementar Chat Instalar Chat

8/8