Bygga en Real-Time chattapplikation med Laravel WebSocket

En real-time chattapplikation är ett utmärkt exempel på hur WebSocket man kan revolutionera real-time interaktiv kommunikation på webben. I den här artikeln går vi igenom att bygga en enkel chattapplikation med Laravel och integrera WebSocket med hjälp av laravel-websockets package för att leverera responsiva och interaktiva kommunikationsupplevelser till användare.

Målen för ansökan

Vi kommer att bygga en real-time chattapplikation med följande funktioner:

Skicka och ta emot meddelanden direkt: Användare kan skicka och ta emot meddelanden direkt utan att behöva uppdatera sidan.

Onlineanvändarlista: Applikationen visar en lista över onlineanvändare och deras chattstatus.

Skicka bilder och filer: Användare kan dela bilder och filer i chatten.

Komma igång med installation och konfiguration

För att komma igång måste vi installera laravel-websockets package och konfigurera den för att integrera WebSocket med Laravel. Följ dessa steg:

Installera laravel-websockets package: Börja med att installera med package hjälp av Composer.

composer require pusher/pusher-php-server

Publicera konfigurationsfilen: Efter installationen publicerar du konfigurationsfilen för att anpassa inställningarna.

 

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

Kör migration: Skapa de nödvändiga databastabellerna för WebSocket.

php artisan migrate

Starta WebSocket server: Starta WebSocket servern för att hantera real-time anslutningar

php artisan websockets:serve

Bygga användargränssnittet

Vi kommer att skapa ett enkelt användargränssnitt med HTML, CSS och JavaScript för att visa meddelandelistan, inmatningsrutan och listan över onlineanvändare.

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

Integrering WebSocket och Broadcasting

Vi kommer att använda Laravel Broadcasting för att integrera WebSocket med applikationen.

Installera Pusher: Installera pusher/pusher-php-server package för att använda Pusher som Broadcasting drivrutin.

composer require pusher/pusher-php-server

Konfigurera Broadcasting: config/broadcasting.php Konfigurera drivrutinen i filen och ange dina Pusher referenser.

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

Skapa en händelse och sänd: Skapa en ChatMessageSent-händelse och sänd den när en användare skickar ett meddelande.

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

JavaScript-skript: Använd JavaScript för att lyssna efter händelser från servern och uppdatera användargränssnittet.

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

Slutsats

Genom att slutföra den här handledningen har du framgångsrikt byggt en real-time chattapplikation med hjälp av WebSocket i Laravel. Användare kan skicka och ta emot meddelanden direkt, och du har sett hur det WebSocket ger en lyhörd och interaktiv kommunikationsupplevelse.