close

Real-Time Een chattoepassing bouwen met Laravel WebSocket

Een real-time chattoepassing is een uitstekend voorbeeld van hoe interactieve communicatie op internet radicaal WebSocket kan veranderen. real-time In dit artikel laten we zien hoe u een eenvoudige chattoepassing bouwt met Laravel en integreert WebSocket om laravel-websockets package gebruikers responsieve en interactieve communicatie-ervaringen te bieden.

Doelstellingen van de applicatie

We gaan een real-time chat applicatie bouwen met de volgende features:

Direct berichten verzenden en ontvangen: Gebruikers kunnen direct berichten verzenden en ontvangen zonder de pagina te hoeven vernieuwen.

Online gebruikerslijst: de applicatie toont een lijst met online gebruikers en hun chatstatus.

Afbeeldingen en bestanden verzenden: gebruikers kunnen afbeeldingen en bestanden delen in de chat.

Aan de slag met installatie en configuratie

Om aan de slag te gaan, moeten we het installeren laravel-websockets package en configureren om te integreren WebSocket met Laravel. Volg deze stappen:

Installeer de laravel-websockets package: Begin met het installeren van de package using Composer.

composer require pusher/pusher-php-server

Publiceer het configuratiebestand: publiceer na de installatie het configuratiebestand om de instellingen aan te passen.

 

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

Uitvoeren migration: maak de benodigde databasetabellen voor WebSocket.

php artisan migrate

Start WebSocket server: start de WebSocket server om real-time verbindingen te verwerken 

php artisan websockets:serve

De gebruikersinterface bouwen

We zullen een eenvoudige gebruikersinterface maken met behulp van HTML, CSS en JavaScript om de berichtenlijst, het invoervak ​​en de lijst met online gebruikers weer te geven.

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

Integratie WebSocket en Broadcasting

We zullen gebruiken Laravel Broadcasting om te integreren WebSocket met de applicatie.

Installeren Pusher: Installeer de om als driver pusher/pusher-php-server package te gebruiken. Pusher Broadcasting 

composer require pusher/pusher-php-server

Configureren Broadcasting: Configureer de driver in het config/broadcasting.php bestand en geef uw Pusher inloggegevens op.

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

Een evenement maken en uitzenden: maak een ChatMessageSent-evenement en zend het uit wanneer een gebruiker een bericht verzendt.

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

JavaScript-script: gebruik JavaScript om naar gebeurtenissen van de server te luisteren en de gebruikersinterface bij te werken.

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

Conclusie

Door deze zelfstudie te voltooien, hebt u met succes een real-time chattoepassing gebouwd met behulp WebSocket van in Laravel. Gebruikers kunnen direct berichten verzenden en ontvangen, en u hebt gezien hoe WebSocket een responsieve en interactieve communicatie-ervaring wordt geboden.