Vytvoření Real-Time chatovací aplikace s Laravel WebSocket

Chatovací real-time aplikace je vynikajícím příkladem toho, jak WebSocket může způsobit revoluci v real-time interaktivní komunikaci na webu. V tomto článku si projdeme vytvořením jednoduché chatovací aplikace s využitím Laravel a integrací WebSocket pomocí laravel-websockets package k poskytování citlivých a interaktivních komunikačních zážitků uživatelům.

Cíle aplikace

Vytvoříme real-time chatovací aplikaci s následujícími funkcemi:

Okamžité odesílání a přijímání zpráv: Uživatelé mohou odesílat a přijímat zprávy okamžitě, aniž by museli obnovovat stránku.

Seznam online uživatelů: Aplikace zobrazí seznam online uživatelů a jejich stav chatu.

Odeslat obrázky a soubory: Uživatelé mohou sdílet obrázky a soubory v rámci chatu.

Začínáme s instalací a konfigurací

Abychom mohli začít, musíme nainstalovat laravel-websockets package a nakonfigurovat jej pro integraci WebSocket s Laravel. Následuj tyto kroky:

Nainstalujte laravel-websockets package: Začněte instalací package pomocí Composer.

composer require pusher/pusher-php-server

Publikování konfiguračního souboru: Po instalaci publikujte konfigurační soubor pro přizpůsobení nastavení.

 

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

Spustit migration: Vytvořte potřebné databázové tabulky pro WebSocket.

php artisan migrate

Spustit WebSocket server: Spusťte WebSocket server pro zpracování real-time připojení

php artisan websockets:serve

Vytváření uživatelského rozhraní

Vytvoříme jednoduché uživatelské rozhraní pomocí HTML, CSS a JavaScriptu pro zobrazení seznamu zpráv, vstupního pole a seznamu online uživatelů.

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

Integrace WebSocket a Broadcasting

Použijeme Laravel Broadcasting k integraci WebSocket s aplikací.

Install(Instalovat) Pusher: Nainstalujte soubor, pusher/pusher-php-server package který chcete použít Pusher jako Broadcasting ovladač.

composer require pusher/pusher-php-server

Konfigurovat Broadcasting: V config/broadcasting.php souboru nakonfigurujte ovladač a zadejte své Pusher přihlašovací údaje.

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

Vytvoření události a vysílání: Vytvořte událost ChatMessageSent a vysílejte ji, když uživatel odešle zprávu.

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

JavaScript skript: Použijte JavaScript k naslouchání událostem ze serveru a aktualizaci uživatelského rozhraní.

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

Závěr

Dokončením tohoto kurzu jste úspěšně vytvořili real-time chatovací aplikaci pomocí WebSocket in Laravel. Uživatelé mohou odesílat a přijímat zprávy okamžitě a vy jste byli svědky toho, jak WebSocket poskytuje citlivý a interaktivní komunikační zážitek.