Opbygning af en Real-Time chatapplikation med Laravel WebSocket

En real-time chatapplikation er et glimrende eksempel på, hvordan den WebSocket kan revolutionere real-time interaktiv kommunikation på nettet. I denne artikel gennemgår vi opbygningen af ​​en simpel chatapplikation ved at bruge Laravel og integrere WebSocket ved hjælp af laravel-websockets package til at levere responsive og interaktive kommunikationsoplevelser til brugere.

Ansøgningens formål

Vi bygger en real-time chatapplikation med følgende funktioner:

Send og modtag beskeder med det samme: Brugere kan sende og modtage beskeder med det samme uden at skulle opdatere siden.

Onlinebrugerliste: Applikationen viser en liste over onlinebrugere og deres chatstatus.

Send billeder og filer: Brugere kan dele billeder og filer i chatten.

Kom godt i gang med installation og konfiguration

For at komme i gang skal vi installere laravel-websockets package og konfigurere den til at integrere WebSocket med Laravel. Følg disse trin:

Installer laravel-websockets package: Begynd med at installere package vha Composer.

composer require pusher/pusher-php-server

Udgiv konfigurationsfilen: Efter installationen skal du udgive konfigurationsfilen for at tilpasse indstillingerne.

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

Kør migration: Opret de nødvendige databasetabeller til WebSocket.

php artisan migrate

Start WebSocket server: Start WebSocket serveren for at håndtere real-time forbindelser

php artisan websockets:serve

Opbygning af brugergrænsefladen

Vi opretter en simpel brugergrænseflade ved hjælp af HTML, CSS og JavaScript for at vise meddelelseslisten, inputfeltet og listen over onlinebrugere.

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

Integrering WebSocket og Broadcasting

Vi vil bruge Laravel Broadcasting til at integrere WebSocket med applikationen.

Installer Pusher: Installer den pusher/pusher-php-server package for at bruge Pusher som Broadcasting driver.

composer require pusher/pusher-php-server

Konfigurer Broadcasting: I config/broadcasting.php filen skal du konfigurere driveren og angive dine Pusher legitimationsoplysninger.

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

Opret en begivenhed og udsendelse: Opret en ChatMessageSent-begivenhed og udsend den, når en bruger sender en besked.

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

JavaScript Script: Brug JavaScript til at lytte efter hændelser fra serveren og opdatere brugergrænsefladen.

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

Konklusion

Ved at fuldføre dette selvstudie har du med succes bygget en real-time chatapplikation ved hjælp WebSocket af i Laravel. Brugere kan sende og modtage beskeder med det samme, og du har set, hvordan det WebSocket giver en lydhør og interaktiv kommunikationsoplevelse.