Pembangunan Laravel: Bagaimana untuk melaksanakan komunikasi WebSockets menggunakan Laravel Echo?

Laravel ialah rangka kerja PHP popular yang mempunyai banyak alatan berguna dan perpustakaan sambungan yang membolehkan pembangun membina aplikasi web berkualiti tinggi dengan mudah. Antaranya, Laravel Echo ialah alat komunikasi WebSockets yang berkuasa yang boleh membantu pembangun mencapai komunikasi masa nyata dalam aplikasi web.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan Laravel Echo dan mewujudkan pelayan WebSockets untuk mencapai komunikasi masa nyata. Kami mula-mula akan menerangkan secara ringkas apa itu WebSockets dan Laravel Echo, kemudian kami akan menerangkan cara memasang dan mengkonfigurasi Laravel Echo, dan akhirnya menunjukkan cara menggunakan Laravel Echo untuk berkomunikasi dengan pelanggan JavaScript.

Apakah itu WebSockets?

WebSockets ialah protokol yang membenarkan sambungan komunikasi masa nyata antara aplikasi web dan pelayan web. Sambungan ini boleh kekal terbuka untuk masa yang lama dan adalah dua arah, membolehkan membaca dan menulis serentak.

Tidak seperti permintaan HTTP, pembukaan sambungan WebSockets yang berterusan membolehkan pelayan menolak data kepada pelanggan dalam masa nyata tanpa memerlukan pengundian atau tinjauan panjang. Ini membolehkan aplikasi web berkomunikasi dengan cepat, cekap dan dalam masa nyata.

Apakah itu Laravel Echo?

Laravel Echo ialah perpustakaan sambungan rasmi rangka kerja Laravel, yang boleh membantu pembangun melaksanakan komunikasi WebSockets dalam aplikasi web. Ia menyediakan API mudah untuk melanggan saluran penyiaran dengan mudah dan menghantar mesej antara pelanggan dan pelayan menggunakan JavaScript.

Gunakan Laravel Echo dan Laravel Pusher untuk menyediakan pelayan WebSockets dengan mudah dan menggunakan saluran penyiaran untuk mengatur komunikasi WebSockets. Di sisi pelanggan, kami boleh menggunakan JavaScript dan Laravel Echo untuk mendengar mesej dalam masa nyata bagi membolehkan komunikasi masa nyata dalam aplikasi web.

Memasang dan Mengkonfigurasi Laravel Echo

Sebelum mula menggunakan Laravel Echo, kami perlu memasang dan mengkonfigurasi perisian yang diperlukan: Laravel dan pusher PHP SDK. Laravel Echo dan pusher PHP SDK boleh dipasang melalui pengurus pakej Composer.

Mula-mula kita perlu memasang Laravel:

composer create-project laravel/laravel your-project-name

Seterusnya, kita perlu memasang pusher PHP SDK. Pemasangan pusher PHP SDK boleh dilakukan dengan menjalankan arahan berikut:

composer require pusher/pusher-php-server

Untuk mengintegrasikan Laravel Echo dan pusher PHP SDK, kami perlu menambah penyedia perkhidmatan dan alias dalam fail config/app.php :

// config/app.php

'providers' => [
    // ...
    LaravelBroadcastingBroadcastServiceProvider::class,
],

'aliases' => [
    // ...
    'Broadcast' => LaravelBroadcastingBroadcastFacade::class,
],

Seterusnya, mari lakukan beberapa kerja konfigurasi untuk memastikan Laravel Echo dan pusher PHP SDK berfungsi dengan betul. Kami perlu menambah semua konfigurasi yang diperlukan untuk Laravel Echo dan pusher PHP SDK dalam fail .env:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_CLUSTER=your-pusher-app-cluster

Create WebSockets Server

Seterusnya, kami akan menyediakan menggunakan Laravel Echo dan pusher PHP SDK pelayan WebSockets. Kita perlu menentukan saluran siaran dalam fail route/channels.php. Saluran siaran menentukan pengguna yang boleh menerima mesej siaran.

// routes/channels.php

use IlluminateSupportFacadesBroadcast;

Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    // ...
});

Dalam contoh di atas, kami mentakrifkan saluran siaran bernama "sembang" dan memberikannya parameter "roomId". Hanya pengguna dengan kebenaran "chat.roomId" boleh menerima mesej daripada saluran siaran ini.

Seterusnya, kita perlu menentukan acara siaran dan menolak mesejnya. Buat kelas acara baharu dalam direktori aplikasi/Acara, contohnya:

// app/Events/ChatMessageSent.php

<?php

namespace AppEvents;

use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;

class ChatMessageSent implements ShouldBroadcast
{
    use Dispatchable, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chat.' . $this->message['room_id']);
    }
}

Kelas acara ini mengandungi logik acara siaran dan perlu melaksanakan antara muka ShouldBroadcast untuk disiarkan.

Kini kami boleh membuat instantiate acara dalam aplikasi kami dan menghantar mesej siaran. Sebagai contoh, tambahkan kaedah penghantaran mesej berikut dalam fail app/Http/Controllers/ChatController.php:

// app/Http/Controllers/ChatController.php

<?php

namespace AppHttpControllers;

use AppEventsChatMessageSent;
use IlluminateHttpRequest;

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {
        $message = [
            'user_id' => $request->user()->id,
            'room_id' => $request->get('room_id'),
            'message' => $request->get('message'),
        ];

        event(new ChatMessageSent($message));

        return response()->json(['status' => 'Message Sent!']);
    }
}

Sila ambil perhatian bahawa dalam kod di atas, acara(New ChatMessageSent($message)) mencetuskan acara dan menghantar Acara siaran yang mengandungi data mesej.

Mewujudkan komunikasi masa nyata

Akhir sekali, kami perlu menggunakan Laravel Echo dalam klien JavaScript untuk mendengar acara penyiaran untuk mendapatkan komunikasi WebSockets masa nyata. Dalam JavaScript, kami boleh menggunakan dua cara untuk mendengar acara siaran:

• Echo.channel(channelName).listen(eventName, callback): Langgan acara siaran dan daftarkan fungsi panggil balik untuk menerima Dilaksanakan apabila peristiwa itu berlaku.
• Echo.private(channelName).listen(eventName, callback): Langgan acara siaran peribadi dan daftar fungsi panggil balik untuk dilaksanakan apabila acara diterima.

Sebagai contoh, dalam aplikasi sembang kami, kami boleh menggunakan kod berikut untuk mendengar acara bagi mesej baharu:

// resources/js/app.js

import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
});

window.Echo.channel(`chat.${roomId}`)
    .listen('ChatMessageSent', (e) => {
        console.log(e);
    });

Dalam kod di atas, kami melanggan menggunakan klien Laravel Echo saluran "chat.roomId" dan mencetak data acara apabila acara "ChatMessageSent" diterima.

Kesimpulan

Dengan menggunakan Laravel Echo dan pusher PHP SDK, kami boleh menyediakan pelayan WebSockets dengan mudah dan menggunakan saluran siaran untuk melaksanakan komunikasi WebSockets. Di sisi pelanggan, kami boleh menggunakan JavaScript dan Laravel Echo untuk memantau mesej dalam masa nyata untuk mencapai komunikasi masa nyata.

Selain itu, Laravel Echo menyediakan banyak saluran siaran dan acara lain yang tersedia, yang boleh kami gunakan untuk membina aplikasi web yang kompleks. Jika anda sedang mencari penyelesaian komunikasi masa nyata moden, Laravel Echo dan pusher PHP SDK ialah pilihan yang baik.

Atas ialah kandungan terperinci Pembangunan Laravel: Bagaimana untuk melaksanakan komunikasi WebSockets menggunakan Laravel Echo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!