close

Creación de una Real-Time aplicación de chat con Laravel WebSocket

Una real-time aplicación de chat es un excelente ejemplo de cómo WebSocket puede revolucionar real-time la comunicación interactiva en la web. En este artículo, veremos cómo crear una aplicación de chat simple usando Laravel e integrando WebSocket el uso de laravel-websockets package para brindar experiencias de comunicación receptivas e interactivas a los usuarios.

Objetivos de la Aplicación

Construiremos una real-time aplicación de chat con las siguientes características:

Enviar y recibir mensajes al instante: los usuarios pueden enviar y recibir mensajes al instante sin necesidad de actualizar la página.

Lista de usuarios en línea: la aplicación mostrará una lista de usuarios en línea y su estado de chat.

Enviar imágenes y archivos: los usuarios pueden compartir imágenes y archivos dentro del chat.

Introducción a la instalación y configuración

Para comenzar, necesitamos instalar laravel-websockets package y configurarlo para que se integre WebSocket con Laravel. Sigue estos pasos:

Instale el laravel-websockets package: Comience instalando el package using Composer.

composer require pusher/pusher-php-server

Publique el archivo de configuración: después de la instalación, publique el archivo de configuración para personalizar la configuración.

 

php artisan vendor:publish --tag=websockets-config

Ejecutar migration: crea las tablas de base de datos necesarias para WebSocket.

php artisan migrate

Iniciar WebSocket servidor: inicie el WebSocket servidor para manejar real-time las conexiones 

php artisan websockets:serve

Construcción de la interfaz de usuario

Crearemos una interfaz de usuario simple utilizando HTML, CSS y JavaScript para mostrar la lista de mensajes, el cuadro de entrada y la lista de usuarios en línea.

<!-- resources/views/chat.blade.php -->  
  
<div id="app">  
    <div class="chat-container">  
        <div class="chat-box">  
            <div class="chat-messages">  
                <div class="message" v-for="message in messages":key="message.id">  
                    {{ message.user }}: {{ message.content }}  
                </div>  
            </div>  
            <div class="input-box">  
                <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="Enter your message...">  
            </div>  
        </div>  
    </div>  
</div>

integrando WebSocket y Broadcasting

Lo usaremos Laravel Broadcasting para integrar WebSocket con la aplicación.

Instalar Pusher: Instale el pusher/pusher-php-server package para usarlo Pusher como Broadcasting controlador.

composer require pusher/pusher-php-server

Configurar Broadcasting: en el config/broadcasting.php archivo, configure el controlador y proporcione sus Pusher credenciales.

'pusher' => [  
    'driver' => 'pusher',  
    'key' => env('PUSHER_APP_KEY'),  
    'secret' => env('PUSHER_APP_SECRET'),  
    'app_id' => env('PUSHER_APP_ID'),  
    'options' => [  
        'cluster' => env('PUSHER_APP_CLUSTER'),  
        'encrypted' => true,  
    ],  
],

Cree un evento y transmita: cree un evento ChatMessageSent y transmítalo cuando un usuario envíe un mensaje.

// app/Events/ChatMessageSent.php  
  
public function broadcastOn()  
{  
    return new Channel('chat');  
}

Script de JavaScript: use JavaScript para escuchar eventos del servidor y actualizar la interfaz de usuario.

// resources/js/app.js  
  
require('./bootstrap');  
  
import Vue from 'vue';  
import Chat from './components/Chat.vue';  
  
const app = new Vue({  
    el: '#app',  
    components: {  
        Chat  
    }  
});

Conclusión

Al completar este tutorial, ha creado con éxito una real-time aplicación de chat WebSocket con Laravel. Los usuarios pueden enviar y recibir mensajes al instante, y usted ha sido testigo de cómo WebSocket proporciona una experiencia de comunicación receptiva e interactiva.