close

Bygge en Real-Time chat-applikasjon med Laravel WebSocket

En real-time chat-applikasjon er et utmerket eksempel på hvordan WebSocket kan revolusjonere real-time interaktiv kommunikasjon på nettet. I denne artikkelen går vi gjennom å bygge en enkel chat-applikasjon ved å bruke Laravel og integrere WebSocket ved å bruke laravel-websockets package for å levere responsive og interaktive kommunikasjonsopplevelser til brukere.

Mål for søknaden

Vi vil bygge en real-time chat-applikasjon med følgende funksjoner:

Send og motta meldinger umiddelbart: Brukere kan sende og motta meldinger umiddelbart uten å måtte oppdatere siden.

Online brukerliste: Applikasjonen vil vise en liste over online brukere og deres chat-status.

Send bilder og filer: Brukere kan dele bilder og filer i chatten.

Komme i gang med installasjon og konfigurasjon

For å komme i gang må vi installere laravel-websockets package og konfigurere den til å integreres WebSocket med Laravel. Følg disse instruksjonene:

Installer laravel-websockets package: Begynn med å installere package bruken Composer.

composer require pusher/pusher-php-server

Publiser konfigurasjonsfilen: Etter installasjonen publiserer du konfigurasjonsfilen for å tilpasse innstillingene.

 

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

Kjør migration: Lag de nødvendige databasetabellene for WebSocket.

php artisan migrate

Start WebSocket server: Start WebSocket serveren for å håndtere real-time tilkoblinger 

php artisan websockets:serve

Bygge brukergrensesnittet

Vi vil lage et enkelt brukergrensesnitt ved å bruke HTML, CSS og JavaScript for å vise meldingslisten, inndataboksen og listen over online-brukere.

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

Vi vil bruke Laravel Broadcasting til å integrere WebSocket med applikasjonen.

Installer Pusher: Installer pusher/pusher-php-server package for å bruke Pusher som Broadcasting driver.

composer require pusher/pusher-php-server

Konfigurer Broadcasting: config/broadcasting.php Konfigurer driveren i filen og oppgi Pusher legitimasjonen din.

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

Opprett en hendelse og kringkast: Opprett en ChatMessageSent-hendelse og kringkast den når en bruker sender en melding.

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

JavaScript-skript: Bruk JavaScript til å lytte etter hendelser fra serveren og oppdatere brukergrensesnittet.

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

Konklusjon

Ved å fullføre denne opplæringen har du lykkes med å bygge et real-time chatteprogram ved å bruke WebSocket i Laravel. Brukere kan sende og motta meldinger umiddelbart, og du har sett hvordan WebSocket gir en responsiv og interaktiv kommunikasjonsopplevelse.