Izdelava Real-Time aplikacije za klepet z Laravel WebSocket

Aplikacija real-time za klepet je odličen primer, kako WebSocket lahko spremenite real-time interaktivno komunikacijo v spletu. V tem članku se bomo sprehodili skozi izdelavo preproste aplikacije za klepet z uporabo Laravel in integracijo WebSocket uporabe laravel-websockets package za zagotavljanje odzivnih in interaktivnih komunikacijskih izkušenj uporabnikom.

Cilji aplikacije

Izdelali bomo real-time aplikacijo za klepet z naslednjimi funkcijami:

Takojšnje pošiljanje in prejemanje sporočil: uporabniki lahko takoj pošiljajo in prejemajo sporočila, ne da bi morali osvežiti stran.

Seznam spletnih uporabnikov: Aplikacija bo prikazala seznam spletnih uporabnikov in njihov status klepeta.

Pošiljanje slik in datotek: uporabniki lahko delijo slike in datoteke v klepetu.

Začetek namestitve in konfiguracije

Za začetek moramo namestiti laravel-websockets package in ga konfigurirati za integracijo WebSocket z Laravel. Sledite tem korakom:

Namestite laravel-websockets package: Začnite z namestitvijo z package uporabo Composer.

composer require pusher/pusher-php-server

Objavite konfiguracijsko datoteko: Po namestitvi objavite konfiguracijsko datoteko, da prilagodite nastavitve.

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

Zaženi migration: Ustvari potrebne tabele baze podatkov za WebSocket.

php artisan migrate

Zaženi WebSocket strežnik: zaženi WebSocket strežnik za upravljanje real-time povezav

php artisan websockets:serve

Gradnja uporabniškega vmesnika

Ustvarili bomo preprost uporabniški vmesnik z uporabo HTML, CSS in JavaScript za prikaz seznama sporočil, polja za vnos in seznama spletnih uporabnikov.

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

Vključevanje WebSocket in Broadcasting

Uporabili ga bomo Laravel Broadcasting za integracijo WebSocket z aplikacijo.

Namesti Pusher: namestite, da ga pusher/pusher-php-server package uporabite Pusher kot Broadcasting gonilnik.

composer require pusher/pusher-php-server

Konfiguriraj Broadcasting: V config/broadcasting.php datoteki konfigurirajte gonilnik in vnesite svoje Pusher poverilnice.

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

Ustvarite dogodek in oddaja: ustvarite dogodek ChatMessageSent in ga oddajte, ko uporabnik pošlje sporočilo.

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

JavaScript skript: uporabite JavaScript za poslušanje dogodkov iz strežnika in posodobite uporabniški vmesnik.

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

Zaključek

Z dokončanjem te vadnice ste uspešno zgradili real-time aplikacijo za klepet z uporabo WebSocket v Laravel. Uporabniki lahko takoj pošljejo in prejmejo sporočila in videli ste, kako WebSocket zagotavlja odzivno in interaktivno komunikacijsko izkušnjo.