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.