Ndërtimi i një Real-Time aplikacioni Chat me Laravel WebSocket

Një real-time aplikacion chat është një shembull i shkëlqyer se si WebSocket mund të revolucionarizojë real-time komunikimin interaktiv në ueb. Në këtë artikull, ne do të ecim në ndërtimin e një aplikacioni të thjeshtë chat duke përdorur Laravel dhe integruar WebSocket duke përdorur laravel-websockets package për të ofruar përvoja të përgjegjshme dhe ndërvepruese të komunikimit për përdoruesit.

Objektivat e Aplikacionit

Ne do të ndërtojmë një real-time aplikacion chat me karakteristikat e mëposhtme:

Dërgo dhe merr mesazhe në çast: Përdoruesit mund të dërgojnë dhe marrin mesazhe në çast pa pasur nevojë të rifreskojnë faqen.

Lista e përdoruesve në internet: Aplikacioni do të shfaqë një listë të përdoruesve në linjë dhe statusin e tyre të bisedës.

Dërgoni imazhe dhe skedarë: Përdoruesit mund të ndajnë imazhe dhe skedarë brenda bisedës.

Fillimi me instalimin dhe konfigurimin

Për të filluar, ne duhet të instalojmë laravel-websockets package dhe konfigurojmë atë për t'u integruar WebSocket me Laravel. Ndiqni këto hapa:

Instaloni laravel-websockets package: Filloni duke instaluar duke package përdorur Composer.

composer require pusher/pusher-php-server

Publikimi i skedarit të konfigurimit: Pas instalimit, publikoni skedarin e konfigurimit për të personalizuar cilësimet.

 

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

Run migration: Krijo tabelat e nevojshme të bazës së të dhënave për WebSocket.

php artisan migrate

Nis WebSocket serverin: Nis WebSocket serverin për të trajtuar real-time lidhjet

php artisan websockets:serve

Ndërtimi i ndërfaqes së përdoruesit

Ne do të krijojmë një ndërfaqe të thjeshtë përdoruesi duke përdorur HTML, CSS dhe JavaScript për të shfaqur listën e mesazheve, kutinë e hyrjes dhe listën e përdoruesve në linjë.

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

Integrimi WebSocket dhe Broadcasting

Ne do të përdorim Laravel Broadcasting për t'u integruar WebSocket me aplikacionin.

Instalo Pusher: Instaloni për pusher/pusher-php-server package ta përdorur Pusher si Broadcasting drejtues.

composer require pusher/pusher-php-server

Konfiguro Broadcasting: Në config/broadcasting.php skedar, konfiguroni drejtuesin dhe jepni Pusher kredencialet tuaja.

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

Krijoni një ngjarje dhe transmetoni: Krijoni një ngjarje ChatMessageSent dhe transmetojeni atë kur një përdorues dërgon një mesazh.

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

Skript JavaScript: Përdorni JavaScript për të dëgjuar ngjarje nga serveri dhe për të përditësuar ndërfaqen e përdoruesit.

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

konkluzioni

Duke përfunduar këtë tutorial, ju keni ndërtuar me sukses një real-time aplikacion chat duke përdorur WebSocket në Laravel. Përdoruesit mund të dërgojnë dhe marrin mesazhe në çast, dhe ju keni parë sesi WebSocket ofron një përvojë komunikimi të përgjegjshme dhe ndërvepruese.