Wyobraź sobie, że tworzysz aplikacje internetowe, które reagują natychmiast, gdzie aktualizacje danych i interakcje odbywają się w mgnieniu oka. Witamy w świecie tworzenia stron internetowych w czasie rzeczywistym. W tym artykule postaramy się stworzyć prosty przykład wykorzystania połączenia WebSocket w aplikacji Laravel za pomocą Soketi.
Przedstawimy Soketi, skonfigurujemy niezbędne narzędzia i skonfigurujemy Laravel do pracy z WebSockets. Pod koniec tego artykułu będziesz mieć gotowy do pracy podstawowy system WebSocket.
Co to jest Soketi?
Soketi to prosty, szybki i odporny serwer WebSockets typu open source. Upraszcza to proces konfiguracji WebSocket, pozwalając skupić się na tworzeniu funkcji w czasie rzeczywistym bez złożoności zarządzania serwerem WebSocket.
Instalacja
Możesz przeczytać więcej o instrukcjach instalacji Soketi w oficjalnej dokumentacji Soketi.
Przed zainstalowaniem serwera CLI Soketi WebSockets upewnij się, że masz wymagane narzędzia:
- Python 3.x
- GIT
- Kompilator gcc i zależności kompilacji
Przeczytaj więcej o instalacji CLI tutaj.
Krok 1: Zainstaluj Soketi Rozpocznij od zainstalowania Soketi
globalnie przez npm. Otwórz terminal i uruchom następujące polecenie:
npm install -g @soketi/soketi
To polecenie zainstaluje Soketi w twoim systemie, umożliwiając uruchomienie go z wiersza poleceń.
Krok 2: Uruchom serwer Soketi Po zainstalowaniu Soketi uruchom serwer WebSocket za pomocą tego polecenia:
Soketi będzie teraz służyć jako serwer
WebSocket dla aplikacji Laravel.
Krok 3: Zainstaluj wymagane pakiety
Użyjemy protokołu Pusher z Soketi. Biblioteka pusher/pusher-php-server udostępnia interfejs PHP dla interfejsu API Pusher, który umożliwia wysyłanie i odbieranie wiadomości z kanałów Pusher.
composer require pusher/pusher-php-server
Aby odbierać zdarzenia po stronie klienta, musisz również zainstalować dwa pakiety za pomocą NPM:
npm install --save-dev laravel-echo pusher-js
Te kroki przygotują nas do bezproblemowej komunikacji w czasie rzeczywistym w naszej aplikacji Laravel.
Krok 4: Skonfiguruj rozgłaszanie
Następnie skonfiguruj transmisję w Laravel. config/broadcasting.php Otwórz plik i dodaj lub zmodyfikuj konfigurację Pusher w następujący sposób:
'connections' => [
'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'),
'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
'port' => env('PUSHER_PORT', 443),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => true,
'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
// ...
Ta konfiguracja konfiguruje Pusher jako sterownik emisji dla WebSockets.
Czytaj także:
Krok 5: Ustaw zmienne środowiskowe Teraz skonfiguruj zmienne
środowiskowe Pusher w .env pliku. Zastąp symbole zastępcze poświadczeniami Pusher:
BROADCAST_DRIVER=pusher
# other keys ...
PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Te zmienne są niezbędne, aby Laravel mógł połączyć się z serwerem WebSocket.
Domyślnie, gdy uruchomimy serwer Soketi bez dodatkowej konfiguracji, będzie on działał i 127.0.0.1:6001 używał następujących poświadczeń aplikacji:
- Identyfikator aplikacji: identyfikator aplikacji
- Klucz aplikacji: klucz aplikacji
- Wpis tajny: klucz tajny aplikacji
Te poświadczenia odgrywają kluczową rolę w uwierzytelnianiu aplikacji frontonu i zaplecza, umożliwiając im wysyłanie i odbieranie wiadomości w czasie rzeczywistym. Ważne jest, aby pamiętać, że w przypadku zastosowań produkcyjnych należy zdecydowanie rozważyć zmianę tych ustawień domyślnych, aby zwiększyć bezpieczeństwo i zapewnić płynne działanie Soketi.
Krok 6: Skonfiguruj JavaScript dla Laravel Echo W pliku JavaScript (zazwyczaj resources/js/bootstrap.js) skonfiguruj Laravel Echo
do używania Pusher:
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});
Ta konfiguracja JavaScript umożliwia aplikacji frontonu Laravel komunikowanie się z serwerem WebSocket.
Krok 7: Utwórz wydarzenie emisji Teraz utwórzmy wydarzenie
Laravel, które chcesz transmitować za pomocą WebSockets. W tym przykładzie utworzymy proste zdarzenie o nazwie NewEvent. Utwórz nowy plik w app/Events katalogu o nazwie NewEvent.php. Możemy wykonać zdarzenie za pomocą następującego polecenia:Zaktualizuj następujące NewEvent.php kody:
php artisan make:event NewEvent
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
// make sure to implement the ShouldBroadcast interface.
// This is needed so that Laravel knows to broadcast the event over a WebSocket connection
class NewEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn(): array
{
return [
// we'll broadcast the event on a public channel called new-public-channel.
new Channel('new-public-channel'),
];
}
}
To zdarzenie zostanie nadane do określonego kanału.
Krok 8: Transmisja wydarzenia
Na trasach Laravel (np. ), utwórz trasę, routes/web.phpktóra wywołuje zdarzenie:
use App\Events\NewEvent;
Route::get('/event', function () {
NewEvent::dispatch(request()->msg);
return 'Message sent!';
});
Ta trasa wywoła NewEvent zdarzenie po uzyskaniu dostępu, symulując wyzwalacz zdarzenia w czasie rzeczywistym.
Krok 9: Nasłuchiwanie zdarzenia w JavaScript W kodzie JavaScript
możesz teraz nasłuchiwać transmitowanego zdarzenia i odpowiednio je obsługiwać. Na przykład:
// resources/js/bootstrap.js
window.Echo = new Echo({
// ...
});
window.Echo.channel("new-public-channel").listen("NewEvent", (e) => {
console.log(e);
});
Ten kod JavaScript nasłuchuje NewEvent transmisji na i new-public-channel rejestruje dane zdarzenia.
Czytaj także:
Krok 10: Dołącz aplikację.js do naszego frontendu
Laravel Aby włączyć odbiór wydarzeń, musimy uwzględnić app.js, który importuje bootstrap.js, w naszym interfejsie Laravel. Na przykład dołączmy go do welcome.blade.php file:, wykonaj następujące kroki: Aby przetestować implementację WebSocket
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<!-- Styles -->
<style>
<!-- long css -->
</style>
<!-- include app.js -->
@vite(['resources/js/app.js'])
</head>
, wykonaj następujące kroki:
- Visit the home page that serves
welcome.blade.php(e.g.,http://127.0.0.1:8000) and open the Developer Tools and navigate to Console tab.
- Open a new tab in your web browser.
- Visit the
/eventroute in your Laravel application. - Add an additional query parameter, for example,
/event?msg=itworks, to send an event with a message. This action will dispatch theNewEventevent and trigger the JavaScript listener, allowing you to test and verify your WebSocket functionality.
- Back to the home page tab and check the Dev Tools Console.
Gratulacje! Pomyślnie skonfigurowałeś fundament dla Laravel WebSockets za pomocą Soketi.
Wnioski
Nauczyliśmy się, jak skonfigurować serwer WebSocket, emitować zdarzenia i sprawić, by nasza aplikacja natychmiast reagowała na to, co robią użytkownicy. To tak, jakby ożywić swoją aplikację!
Aplikacje działające w czasie rzeczywistym mogą robić niesamowite rzeczy, takie jak błyskawiczne czatowanie lub płynna współpraca. Z Laravel i Soketi masz narzędzia, aby te fajne rzeczy się wydarzyły. Miłego kodowania!
Repozytorium dla tego przykładu można znaleźć pod adresem fajarwz/blog-laravel-soketi.
