Sukurkite Real-Time pokalbių programą naudodami Laravel WebSocket

Pokalbių real-time programa yra puikus pavyzdys, kaip WebSocket gali pakeisti real-time interaktyvų bendravimą internete. Šiame straipsnyje apžvelgsime, kaip sukurti paprastą pokalbių programą naudojant Laravel ir integruoti WebSocket naudojant, kad laravel-websockets package naudotojams būtų teikiamos reaguojančios ir interaktyvios komunikacijos.

Paraiškos tikslai

Sukursime real-time pokalbių programą su šiomis funkcijomis:

Siųskite ir gaukite pranešimus akimirksniu: vartotojai gali siųsti ir gauti pranešimus akimirksniu, neatnaujindami puslapio.

Internetinių vartotojų sąrašas: programa parodys prisijungusių vartotojų sąrašą ir jų pokalbių būseną.

Siųsti vaizdus ir failus: vartotojai gali bendrinti vaizdus ir failus pokalbio metu.

Diegimo ir konfigūravimo pradžia

Norėdami pradėti, turime įdiegti laravel-websockets package ir sukonfigūruoti, kad jis būtų integruotas WebSocket su Laravel. Atlikite šiuos veiksmus:

Įdiegti laravel-websockets package: Pradėkite diegdami package naudodami Composer.

composer require pusher/pusher-php-server

Paskelbti konfigūracijos failą: po įdiegimo paskelbkite konfigūracijos failą, kad tinkintumėte nustatymus.

 

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

Vykdyti migration: sukurkite reikiamas duomenų bazės lenteles WebSocket.

php artisan migrate

Pradėti WebSocket serverį: paleiskite WebSocket serverį, kad galėtumėte tvarkyti real-time ryšius

php artisan websockets:serve

Vartotojo sąsajos kūrimas

Sukursime paprastą vartotojo sąsają naudodami HTML, CSS ir JavaScript, kad būtų rodomas pranešimų sąrašas, įvesties laukelis ir prisijungusių vartotojų sąrašas.

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

Integruojant WebSocket ir Broadcasting

Naudosime Laravel Broadcasting integruodami WebSocket su programa.

Įdiegti Pusher: įdiekite, kad pusher/pusher-php-server package galėtumėte naudoti Pusher kaip Broadcasting tvarkyklę.

composer require pusher/pusher-php-server

Konfigūruoti Broadcasting: faile config/broadcasting.php sukonfigūruokite tvarkyklę ir pateikite savo Pusher kredencialus.

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

Sukurkite įvykį ir transliuokite: sukurkite „ChatMessageSent“ įvykį ir transliuokite jį, kai vartotojas siunčia pranešimą.

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

„JavaScript“ scenarijus: naudokite „JavaScript“, kad klausytumėte įvykių iš serverio ir atnaujintumėte vartotojo sąsają.

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

Išvada

Baigę šią mokymo programą sėkmingai sukūrėte real-time pokalbių programą WebSocket naudodami Laravel. Vartotojai gali akimirksniu siųsti ir gauti žinutes, o jūs matėte, kaip tai WebSocket užtikrina reaguojantį ir interaktyvų bendravimą.