Real-Time Csevegőalkalmazás készítése Laravel WebSocket

Egy real-time csevegőalkalmazás kiváló példa arra, hogyan WebSocket forradalmasíthatja real-time az interaktív kommunikációt a weben. Laravel Ebben a cikkben egy egyszerű csevegőalkalmazás felépítését mutatjuk be, WebSocket amely a laravel-websockets package reszponzív és interaktív kommunikációs élményt nyújtja a felhasználóknak.

A pályázat céljai

Csevegőalkalmazást készítünk real-time a következő funkciókkal:

Üzenetek küldése és fogadása azonnal: A felhasználók azonnal küldhetnek és fogadhatnak üzeneteket anélkül, hogy frissíteni kellene az oldalt.

Online felhasználók listája: Az alkalmazás megjeleníti az online felhasználók listáját és chat állapotukat.

Képek és fájlok küldése: A felhasználók megoszthatnak képeket és fájlokat a csevegésen belül.

Kezdő lépések a telepítéssel és konfigurálással

A kezdéshez telepítenünk laravel-websockets package kell WebSocket a Laravel. Kovesd ezeket a lepeseket:

Telepítse a laravel-websockets package: Kezdje a telepítésével package a Composer.

composer require pusher/pusher-php-server

A konfigurációs fájl közzététele: A telepítés után tegye közzé a konfigurációs fájlt a beállítások testreszabásához.

 

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

Futtatás migration: Hozza létre a szükséges adatbázistáblákat a következőhöz WebSocket: .

php artisan migrate

Szerver indítása WebSocket: Indítsa el a kiszolgálót a kapcsolatok WebSocket kezelésére real-time

php artisan websockets:serve

A felhasználói felület felépítése

Létrehozunk egy egyszerű felhasználói felületet HTML, CSS és JavaScript használatával az üzenetlista, a beviteli mező és az online felhasználók listájának megjelenítéséhez.

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

Integráló WebSocket és Broadcasting

Az alkalmazással való Laravel Broadcasting integráláshoz használjuk. WebSocket

Telepítés Pusher: Telepítse az illesztőprogramként pusher/pusher-php-server package való használathoz. Pusher Broadcasting

composer require pusher/pusher-php-server

Konfigurálás Broadcasting: A fájlban config/broadcasting.php konfigurálja az illesztőprogramot, és adja meg Pusher hitelesítő adatait.

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

Esemény létrehozása és közvetítés: Hozzon létre egy ChatMessageSent eseményt, és sugározza azt, amikor egy felhasználó üzenetet küld.

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

JavaScript Script: Használja a JavaScriptet a szerverről érkező események figyelésére és a felhasználói felület frissítésére.

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

Következtetés

Az oktatóanyag elvégzésével sikeresen felépített egy real-time csevegőalkalmazást WebSocket a következővel Laravel:. A felhasználók azonnal küldhetnek és fogadhatnak üzeneteket, Ön pedig szemtanúja volt, hogyan WebSocket biztosít reszponzív és interaktív kommunikációs élményt.