Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Cómo crear un script de chat en vivo en PHP

by
Read Time:10 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este artículo, analizaremos cómo puedes crear un script de chat en vivo en PHP. Si bien existen diferentes formas en las que podrías lograrlo, usaremos una implementación basada en sockets.

Si estás creando un sitio de comunidad que involucra la participación de los usuarios, es útil proporcionar una manera para que los usuarios puedan discutir ideas en tiempo real. Cuando se trata de la interacción en tiempo real entre usuarios, lo mejor es suministrar una especie de función de sala de chat en donde puedan reunirse y discutir sus ideas.

Hoy vamos a analizar cómo puedes implementar un chat en vivo en tu sitio web de PHP. Ya que es una función popular, existen muchos scripts de chat disponibles en el mercado que están listos para ser usados. Encontrarás una combinación de scripts de chat de PHP prémium y gratuitos de entre los que puedes elegir.

En este artículo, vamos a usar el módulo "Chat Using WebSocket and PHP Socket" (Chat mediante el uso de WebSocket y Socket de PHP), que está integrado en PHP y es totalmente de código abierto.

En la siguiente sección veremos cómo descargar y configurar el módulo "Chat Using WebSocket and PHP Socket".

Cómo descargar y configurar el módulo "Chat Using WebSocket and PHP Socket"

El módulo "Chat Using WebSocket and PHP Socket" está disponible en GitHub y, por lo tanto, puedes clonar el repositorio o descargar el archivo .zip del paquete.

Si quieres clonar el repositorio "Chat Using WebSocket and PHP Socket", puedes usar el siguiente comando en tu símbolo del sistema.

Por otro lado, si quieres descargar el archivo .zip, puedes descargarlo del repositorio oficial

El directorio Chat-Using-WebSocket-and-PHP-Socket contiene los archivos del paquete. Debes colocar este directorio dentro de la raíz de documentos de tu servidor web para poder acceder a él a través del navegador.

El paquete contiene dos archivos PHP, server.php e index.php y, para continuar, debemos configurar el valor del host en ambos archivos. Abre ambos archivos en tu editor de texto favorito y reemplaza el valor localhost con el nombre de host de tu servidor. Por supuesto, si estás trabajando en la máquina local con fines de prueba, no es necesario que lo modifiques.

Con estos cambios hemos terminado la configuración de nuestro módulo. Antes de que sigamos adelante y veamos cómo ejecutarlo, en la siguiente sección revisaremos los archivos server.php e index.php para comprender cómo funciona este módulo exactamente.

Cómo funciona el módulo "Chat Using WebSocket and PHP Socket"

El módulo "Chat Using WebSocket and PHP Socket" está basado en WebSockets. Veamos rápidamente qué es la API WebSocket:

La API WebSocket es una tecnología avanzada que permite abrir una sesión de comunicación interactiva bidireccional entre el navegador del usuario y un servidor. Con esta API puedes enviar mensajes a un servidor y recibir respuestas basadas en eventos sin tener que sondear al servidor para obtener una respuesta. (MDN)

Una vez que un navegador abre una conexión de socket web con el servidor web, dicho navegador puede realizar una comunicación bidireccional con ese servidor. Por lo tanto, puede enviar datos al servidor web con la ayuda del método send, y puede recibir datos del servidor web con la ayuda del controlador de eventos onmessage. Así que esa es la implementación de WebSockets en el lado del cliente.

En el lado del servidor, debemos usar las funciones de socket de PHP para abrir y enlazar sockets, escuchar conexiones de sockets entrantes, además de leer y enviar datos a todos los sockets disponibles.

Revisemos los fragmentos de código importantes que se encuentran en ambos archivos.

El archivo index.php

El archivo index.php es el responsable de mostrar la interfaz de usuario del chat y gestionar una conexión de socket con el servidor web.

Analicemos el siguiente fragmento de código, que es la parte más importante del archivo index.php.

En primer lugar, la llamada new WebSocket(wsUri) abre una conexión de socket con el servidor web. Una vez que hemos abierto una conexión de socket, definimos diferentes controladores de eventos para capturar diferentes tipos de eventos.

Controladores de eventos

El objeto WebSocket permite principalmente cuatro eventos: onopen, onmessage, onerror y onclose. Nuestro script ha definido controladores de eventos para todos ellos.

El controlador de evento onopen se usa para mostrar un mensaje de bienvenida a los usuarios.

A continuación, el controlador de evento onmessage se usa para mostrar mensajes recibidos desde el servidor web. Básicamente, este analiza los datos JSON recibidos del servidor, prepara el código HTML y lo agrega al cuadro del chat.

Puedes usar el controlador de evento onerror para gestionar errores y mostrar los mensajes de error apropiados a los usuarios.

Finalmente, el controlador de evento onclose se usa para notificar que la conexión está cerrada.

El método send

Si se usan controladores de eventos para escuchar y actuar ante eventos del lado del servidor, el método send te permite enviar datos desde un navegador al servidor web.

En el archivo index.php hemos definido la función send_message, que es llamada cuando los usuarios hacen clic en el botón Enviar o cuando presionan la tecla Intro. La función send_message gestiona la lógica del envío de datos al servidor web.

Como puedes ver, hemos llamado al método websocket.send para enviar datos al servidor web.

El archivo server.php

El archivo server.php es el responsable de escuchar las conexiones de socket entrantes, leer datos y enviarlos a todos los clientes. En esta sección analizaremos fragmentos de código importantes contenidos en el archivo server.php.

El primer paso es crear una conexión de socket usando la función socket_create.

A continuación, enlazaremos un socket a un puerto específico y comenzaremos a escuchar para detectar alguna conexión en ese socket.

Además, hemos inicializado la variable $clients, que contiene diferentes conexiones de socket de distintos usuarios.

Finalmente tenemos el bucle while, que se ejecuta infinitamente y hace dos cosas importantes, como se explica a continuación.

En primer lugar, comprueba si existe una nueva conexión de socket. Si hay una nueva conexión de socket, esta se agrega a la variable global $clients. También notifica a otros clientes sobre esta nueva conexión. Básicamente, otros usuarios reciben una notificación cuando un nuevo usuario se une a la sala de chat.

A continuación, recorre todos los sockets conectados y revisa si hay datos entrantes. Si se han recibido datos en algún socket, el bucle lee esos datos usando la función socket_recv. Los datos recibidos están en formato JSON y, por lo tanto, necesitamos decodificarlos en primer lugar. Finalmente se llama a la función send_message, que envía estos datos a todos los sockets conectados.

La función send_message tiene este aspecto:

Si algún usuario está desconectado, el siguiente código es el responsable de eliminar de la variable $clients al cliente de socket asociado con ese usuario. Además, todos los usuarios conectados también reciben una notificación sobre este evento.

Ya que el bucle while se ejecuta infinitamente, este revisa continuamente si existen nuevas conexiones y mensaje y, por lo tanto, todos los usuarios son notificados instantáneamente sobre eso.

Así que esa es la implementación de los sockets del lado del servidor. En la siguiente sección veremos cómo ejecutar este módulo.

Cómo ejecutar el chat usando el módulo "WebSocket and PHP Socket"

En primer lugar, tenemos que arrancar el servidor de sockets para que pueda comenzar a escuchar las conexiones entrantes.

Sigue adelante y ejecuta el archivo server.php en la línea de comandos, como se muestra en el siguiente fragmento de código. Esto debería arrancar el servidor de sockets.

Ahora debes visitar el archivo index.php en tu navegador. Dado que has colocado el directorio Chat-Using-WebSocket-and-PHP-Socket-master dentro de la raíz de documentos, deberías poder acceder a él a través de https://localhost/Chat-Using-WebSocket-and-PHP-Socket-master/index.php.

Deberías ver la siguiente interfaz de usuario.

Puedes abrir el URL https://localhost/Chat-Using-WebSocket-and-PHP-Socket-master/index.php desde otro navegador para simular una experiencia multiusuario. Recibirás una notificación sobre la nueva conexión de usuario.

Comienza a enviar mensajes en ambas pantallas y se te notificará al instante.

Como puedes ver, es bastante sencillo implementar un módulo de chat basado en sockets de PHP en tu sitio web. También hay otras maneras, como crear un módulo de chat basado en AJAX que sondee a un servidor continuamente para recibir nuevos mensajes de él, pero la implementación basada en sockets es más eficiente y no genera tanto tráfico en tu servidor, por lo que es preferible.

Conclusión

Hoy analizamos cómo puedes implementar un chat en vivo en PHP con la ayuda del módulo "Chat Using WebSocket and PHP Socket". Se trata de una implementación basada en sockets, y hemos discutido partes importantes de este módulo a lo largo del artículo.

También puedes leer sobre los scripts prémium de PHP para crear chats disponibles en CodeCanyon.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.