Real-Time Chat-sovelluksen rakentaminen Laravel WebSocket

Chat real-time -sovellus on erinomainen esimerkki siitä, kuinka WebSocket voidaan mullistaa real-time interaktiivinen viestintä verkossa. Tässä artikkelissa käymme läpi yksinkertaisen chat-sovelluksen rakentamisen Laravel ja integroinnin WebSocket sen avulla, laravel-websockets package jotta käyttäjille voidaan tarjota reagoivia ja interaktiivisia viestintäkokemuksia.

Sovelluksen tavoitteet

Rakennamme real-time chat-sovelluksen, jossa on seuraavat ominaisuudet:

Lähetä ja vastaanota viestejä välittömästi: Käyttäjät voivat lähettää ja vastaanottaa viestejä välittömästi ilman, että heidän tarvitsee päivittää sivua.

Online-käyttäjäluettelo: Sovellus näyttää luettelon online-käyttäjistä ja heidän chat-tilansa.

Lähetä kuvia ja tiedostoja: Käyttäjät voivat jakaa kuvia ja tiedostoja chatissa.

Asennuksen ja määrityksen aloittaminen

Aloittaaksesi meidän on asennettava laravel-websockets package ja määritettävä se WebSocket integroitumaan Laravel. Toimi seuraavasti:

Asenna laravel-websockets package: package Aloita asentamalla Composer.

composer require pusher/pusher-php-server

Julkaise määritystiedosto: Julkaise asennuksen jälkeen asetustiedosto asetusten mukauttamiseksi.

 

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

Suorita migration: Luo tarvittavat tietokantataulukot kohteelle WebSocket.

php artisan migrate

Käynnistä WebSocket palvelin: Käynnistä palvelin yhteyksien WebSocket käsittelemiseksi real-time

php artisan websockets:serve

Käyttöliittymän rakentaminen

Luomme yksinkertaisen käyttöliittymän HTML:n, CSS:n ja JavaScriptin avulla viestiluettelon, syöttökentän ja online-käyttäjien luettelon näyttämiseksi.

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

Integrointi WebSocket ja Broadcasting

Käytämme Laravel Broadcasting integrointiin WebSocket sovelluksen kanssa.

Asenna Pusher: Asenna pusher/pusher-php-server package käyttääksesi Pusher ohjaimena Broadcasting.

composer require pusher/pusher-php-server

Määritä Broadcasting: Määritä tiedostossa config/broadcasting.php ohjain ja anna tunnistetietosi Pusher.

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

Luo tapahtuma ja lähetä: Luo ChatMessageSent-tapahtuma ja lähetä se, kun käyttäjä lähettää viestin.

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

JavaScript-skripti: Käytä JavaScriptiä palvelimen tapahtumien kuuntelemiseen ja käyttöliittymän päivittämiseen.

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

Johtopäätös

Suorittamalla tämän opetusohjelman olet onnistuneesti rakentanut real-time chat-sovelluksen WebSocket käyttämällä Laravel. Käyttäjät voivat lähettää ja vastaanottaa viestejä välittömästi, ja olet nähnyt, kuinka se WebSocket tarjoaa reagoivan ja interaktiivisen viestintäkokemuksen.