close

Izrada Real-Time aplikacije za chat sa Laravel WebSocket

Aplikacija real-time za chat izvrstan je primjer kako WebSocket se može revolucionarizirati real-time interaktivna komunikacija na webu. U ovom ćemo članku proći kroz izradu jednostavne aplikacije za chat korištenjem Laravel i integracijom WebSocket kako laravel-websockets package bismo korisnicima pružili responzivna i interaktivna komunikacijska iskustva.

Ciljevi aplikacije

Napravit ćemo real-time aplikaciju za chat sa sljedećim značajkama:

Trenutno šaljite i primajte poruke: korisnici mogu slati i primati poruke trenutno bez potrebe za osvježavanjem stranice.

Popis online korisnika: Aplikacija će prikazati popis online korisnika i njihov status chata.

Pošaljite slike i datoteke: korisnici mogu dijeliti slike i datoteke unutar chata.

Početak rada s instalacijom i konfiguracijom

Za početak moramo instalirati laravel-websockets package i konfigurirati ga za integraciju WebSocket s Laravel. Prati ove korake:

Instalirajte laravel-websockets package: Započnite instaliranjem package pomoću Composer.

composer require pusher/pusher-php-server

Objavite konfiguracijsku datoteku: Nakon instalacije objavite konfiguracijsku datoteku da biste prilagodili postavke.

 

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

Pokreni migration: Stvorite potrebne tablice baze podataka za WebSocket.

php artisan migrate

Pokreni WebSocket poslužitelj: Pokreni WebSocket poslužitelj za rukovanje real-time vezama 

php artisan websockets:serve

Izrada korisničkog sučelja

Napravit ćemo jednostavno korisničko sučelje koristeći HTML, CSS i JavaScript za prikaz popisa poruka, okvira za unos i popisa online korisnika.

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

Integriranje WebSocket i Broadcasting

Koristit ćemo se Laravel Broadcasting za integraciju WebSocket s aplikacijom.

Instaliraj Pusher: Instalirajte pusher/pusher-php-server package da biste ga koristili Pusher kao Broadcasting upravljački program.

composer require pusher/pusher-php-server

Konfiguriraj Broadcasting: U config/broadcasting.php datoteci konfigurirajte upravljački program i unesite svoje Pusher vjerodajnice.

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

Stvorite događaj i emitirajte: Stvorite događaj ChatMessageSent i emitirajte ga kada korisnik pošalje poruku.

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

JavaScript skripta: Koristite JavaScript za slušanje događaja s poslužitelja i ažurirajte korisničko sučelje.

// 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čak

Dovršavanjem ovog vodiča, uspješno ste izgradili real-time aplikaciju za chat koristeći WebSocket in Laravel. Korisnici mogu odmah slati i primati poruke, a svjedoci ste kako WebSocket pruža responzivno i interaktivno komunikacijsko iskustvo.