Creazione di Real-Time un'applicazione di chat con Laravel WebSocket

Un'applicazione real-time di chat è un ottimo esempio di come WebSocket può rivoluzionare real-time la comunicazione interattiva sul web. In questo articolo, illustreremo la creazione di una semplice applicazione di chat utilizzando Laravel e integrando WebSocket l'utilizzo di laravel-websockets package per offrire agli utenti esperienze di comunicazione reattive e interattive.

Obiettivi dell'Applicazione

Costruiremo un'applicazione real-time di chat con le seguenti caratteristiche:

Invia e ricevi messaggi istantaneamente: gli utenti possono inviare e ricevere messaggi istantaneamente senza dover aggiornare la pagina.

Elenco utenti online: l'applicazione visualizzerà un elenco di utenti online e il loro stato di chat.

Invia immagini e file: gli utenti possono condividere immagini e file all'interno della chat.

Introduzione all'installazione e alla configurazione

Per iniziare, dobbiamo installare laravel-websockets package e configurarlo per l'integrazione WebSocket con Laravel. Segui questi passi:

Installa il laravel-websockets package: Inizia installando il package using Composer.

composer require pusher/pusher-php-server

Pubblica il file di configurazione: dopo l'installazione, pubblica il file di configurazione per personalizzare le impostazioni.

 

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

Esegui migration: crea le tabelle di database necessarie per WebSocket.

php artisan migrate

Avvia WebSocket server: avvia il WebSocket server per gestire real-time le connessioni

php artisan websockets:serve

Costruire l'interfaccia utente

Creeremo una semplice interfaccia utente utilizzando HTML, CSS e JavaScript per visualizzare l'elenco dei messaggi, la casella di input e l'elenco degli utenti online.

<!-- 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>  

Integrare WebSocket e Broadcasting

Useremo Laravel Broadcasting per integrare WebSocket con l'applicazione.

Installa Pusher: installa il file pusher/pusher-php-server package da usare Pusher come Broadcasting driver.

composer require pusher/pusher-php-server

Configure Broadcasting: nel config/broadcasting.php file, configura il driver e fornisci le tue Pusher credenziali.

'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,  
    ],  
],  

Crea un evento e trasmetti: crea un evento ChatMessageSent e trasmettilo quando un utente invia un messaggio.

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

Script JavaScript: utilizza JavaScript per ascoltare gli eventi dal server e aggiornare l'interfaccia utente.

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

Conclusione

Completando questo tutorial, hai creato con successo un'applicazione real-time di chat utilizzando WebSocket in Laravel. Gli utenti possono inviare e ricevere messaggi istantaneamente e hai visto come WebSocket fornisce un'esperienza di comunicazione reattiva e interattiva.