close

Construirea unei Real-Time aplicații de chat cu Laravel WebSocket

O real-time aplicație de chat este un exemplu excelent al modului în care WebSocket poate revoluționa real-time comunicarea interactivă pe web. În acest articol, vom parcurge construirea unei aplicații de chat simplă folosind Laravel și integrând WebSocket folosind pentru laravel-websockets package a oferi utilizatorilor experiențe de comunicare receptive și interactive.

Obiectivele aplicației

Vom construi o real-time aplicație de chat cu următoarele caracteristici:

Trimiteți și primiți mesaje instantaneu: utilizatorii pot trimite și primi mesaje instantaneu, fără a fi nevoie să reîmprospăteze pagina.

Lista de utilizatori online: aplicația va afișa o listă de utilizatori online și starea lor de chat.

Trimiteți imagini și fișiere: utilizatorii pot partaja imagini și fișiere în chat.

Noțiuni introductive de instalare și configurare

Pentru a începe, trebuie să instalăm laravel-websockets package și să îl configuram pentru a se integra WebSocket cu Laravel. Urmați acești pași:

Instalați laravel-websockets package: Începeți prin instalarea package utilizării Composer.

composer require pusher/pusher-php-server

Publicați fișierul de configurare: după instalare, publicați fișierul de configurare pentru a personaliza setările.

 

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

Run migration: Creați tabelele de bază de date necesare pentru WebSocket.

php artisan migrate

Porniți WebSocket serverul: Lansați WebSocket serverul pentru a gestiona real-time conexiunile 

php artisan websockets:serve

Construirea interfeței cu utilizatorul

Vom crea o interfață de utilizator simplă folosind HTML, CSS și JavaScript pentru a afișa lista de mesaje, caseta de introducere și lista de utilizatori online.

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

Integrarea WebSocket și Broadcasting

Vom folosi Laravel Broadcasting pentru a integra WebSocket cu aplicația.

Instalare Pusher: Instalați pusher/pusher-php-server package pentru a utiliza Pusher ca Broadcasting driver.

composer require pusher/pusher-php-server

Configurare Broadcasting: În config/broadcasting.php fișier, configurați driverul și furnizați-vă Pusher acreditările.

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

Creați un eveniment și difuzați: creați un eveniment ChatMessageSent și difuzați-l atunci când un utilizator trimite un mesaj.

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

Script JavaScript: utilizați JavaScript pentru a asculta evenimentele de pe server și pentru a actualiza interfața cu utilizatorul.

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

Concluzie

Prin finalizarea acestui tutorial, ați creat cu succes o real-time aplicație de chat folosind WebSocket în Laravel. Utilizatorii pot trimite și primi mesaje instantaneu, iar tu ai văzut cum WebSocket oferă o experiență de comunicare receptivă și interactivă.