Tworzenie Real-Time aplikacji czatu za pomocą Laravel WebSocket

Aplikacja real-time do czatu jest doskonałym przykładem tego, jak WebSocket zrewolucjonizować real-time interaktywną komunikację w sieci. W tym artykule przeprowadzimy proces tworzenia prostej aplikacji czatu przy użyciu Laravel i integracji WebSocket przy użyciu programu laravel-websockets package w celu zapewnienia responsywnych i interaktywnych środowisk komunikacji dla użytkowników.

Cele aplikacji

Zbudujemy real-time aplikację do czatu z następującymi funkcjami:

Błyskawiczne wysyłanie i odbieranie wiadomości: Użytkownicy mogą natychmiast wysyłać i odbierać wiadomości bez konieczności odświeżania strony.

Lista użytkowników online: aplikacja wyświetli listę użytkowników online i ich status na czacie.

Wysyłaj obrazy i pliki: Użytkownicy mogą udostępniać obrazy i pliki na czacie.

Pierwsze kroki z instalacją i konfiguracją

Aby rozpocząć, musimy zainstalować laravel-websockets package i skonfigurować go do integracji WebSocket z Laravel. Wykonaj następujące kroki:

Zainstaluj laravel-websockets package: Rozpocznij od zainstalowania package using Composer.

composer require pusher/pusher-php-server

Opublikuj plik konfiguracyjny: Po instalacji opublikuj plik konfiguracyjny, aby dostosować ustawienia.

 

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

Uruchom migration: Utwórz niezbędne tabele bazy danych dla WebSocket.

php artisan migrate

Uruchom WebSocket serwer: Uruchom WebSocket serwer do obsługi real-time połączeń

php artisan websockets:serve

Budowa interfejsu użytkownika

Stworzymy prosty interfejs użytkownika za pomocą HTML, CSS i JavaScript, aby wyświetlić listę wiadomości, pole wprowadzania i listę użytkowników 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>  

Integracja WebSocket i Broadcasting

Użyjemy Laravel Broadcasting do integracji WebSocket z aplikacją.

Instaluj Pusher: Zainstaluj program, który pusher/pusher-php-server package ma być używany Pusher jako Broadcasting sterownik.

composer require pusher/pusher-php-server

Konfiguruj Broadcasting: w config/broadcasting.php pliku skonfiguruj sterownik i podaj swoje Pusher dane uwierzytelniające.

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

Utwórz wydarzenie i rozgłaszaj: Utwórz wydarzenie ChatMessageSent i rozgłaszaj je, gdy użytkownik wyśle ​​wiadomość.

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

Skrypt JavaScript: Użyj JavaScript, aby nasłuchiwać zdarzeń z serwera i aktualizować interfejs użytkownika.

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

Wniosek

Ukończenie tego samouczka oznacza pomyślne zbudowanie real-time aplikacji czatu przy użyciu WebSocket języka Laravel. Użytkownicy mogą natychmiast wysyłać i odbierać wiadomości, a Ty byłeś świadkiem, jak WebSocket zapewnia responsywną i interaktywną komunikację.