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

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

Dalam aplikasi web moden, komunikasi pemesejan masa nyata adalah penting. WebSockets ialah protokol untuk komunikasi dua hala. Selain HTTP, WebSockets membenarkan pelayan menghantar mesej kepada klien apabila perlu.

Laravel Echo Server ialah pelayan WebSockets yang dibina pada Node.js untuk komunikasi mesej masa nyata. Ia membolehkan anda menggunakan pakej Laravel Echo untuk berkomunikasi dengan mudah dengan pelanggan melalui WebSockets, menjadikannya lebih mudah untuk mewujudkan komunikasi masa nyata.

Dalam artikel ini, kita akan membincangkan cara menggunakan Laravel Echo Server untuk melaksanakan komunikasi WebSockets.

Langkah 1 - Pemasangan Laravel dan Laravel Echo

Sebelum menggunakan Laravel Echo Server, kita perlu memasang Laravel dan kebergantungannya.

Kita boleh mendapatkan maklumat lanjut tentang Laravel di: https://laravel.com/docs/8.x/installation

Begitu juga, dalam artikel ini, Laravel juga perlu dipasang Echo bag . Kita boleh memasangnya menggunakan Komposer:

$ composer require laravel/echo

Langkah 2 - Pasang Laravel Echo Server

Sekarang, kita perlu memasang Laravel Echo Server.

$ npm install -g laravel-echo-server

Langkah 3 - Fail Konfigurasi

Setelah Pelayan Echo Laravel dipasang, kita perlu mencipta fail konfigurasi. Fail konfigurasi lalai boleh dijana menggunakan arahan berikut:

$ laravel-echo-server init

Ini akan menjana fail laravel-echo-server.json dalam direktori semasa.

Seterusnya, kami perlu mengubah suai beberapa konfigurasi fail ini untuk memastikan ia memenuhi keperluan aplikasi kami.

Dalam fail laravel-echo-server.json, kita perlu mengkonfigurasi sifat berikut:

{
    "authHost": "http://your-app.com",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "127.0.0.1",
            "port": "6379"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

• authHost: Mentakrifkan alamat yang akan didengari oleh Pelayan Echo (umumnya sama seperti alamat permohonan) ).
• authEndpoint: Mentakrifkan bahawa Pelayan Echo akan menunggu pada alamat ini untuk pelanggan menghantar maklumat Pengesahan untuk pengesahan.
• database: Mentakrifkan jenis pangkalan data yang digunakan oleh Echo Server untuk menyimpan maklumat sambungan dan saluran.
• databaseConfig: Konfigurasi pangkalan data khusus, di sini kami menggunakan Redis.
• devMode: Jika ditetapkan kepada benar, anda akan melihat log nyahpepijat.
• host: Tentukan alamat yang didengari oleh Pelayan Echo. Jika tidak ditetapkan, Echo Server akan mendengar pada semua antara muka rangkaian yang tersedia.
• port: Tentukan port yang didengari oleh Pelayan Echo.
• protocol: Tentukan protokol yang digunakan oleh Pelayan Echo.
• socketio: Untuk parameter konfigurasi lanjutan, sila rujuk dokumentasi.
• sslCertPath: Laluan ke sijil akar SSL.
• sslKeyPath: Laluan ke kunci SSL.
• sslCertChainPath: Digunakan untuk memuat naik rantaian sijil akar SSL pilihan.
• sslPassphrase: Nilai ini mungkin diperlukan jika kunci SSL ditulis.
• subscribers: Mentakrifkan jenis pelanggan yang boleh melanggan Pelayan Echo.
• apiOriginAllow: Hos yang membenarkan permintaan merentas domain.

Setelah kami melengkapkan konfigurasi di atas dan menyimpan fail laravel-echo-server.json, kami boleh memulakan Pelayan Echo menggunakan arahan berikut:

$ laravel-echo-server start

Langkah 4 - Kod Frontend

Kini, kami perlu memperkenalkan pakej Echo ke dalam kod bahagian hadapan kami. Pastikan anda menambah kod berikut di bahagian bawah

<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.9.3/dist/echo.js"></script>

Dalam fail JavaScript anda tambahkan kod berikut:

import Echo from 'laravel-echo'

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    }
});

window.Echo.channel('YourChannel')
    .listen('YourEvent', (e) => {
        console.log(e);
    });

Ini akan menyambung ke pelayan Echo dan mengesahkan menggunakan panggilan kebenaran. Saluran YourChannel juga akan dibuat dan mendengar acara YourEvent.

Langkah 5 - Senario Aplikasi

Kini, kami telah berjaya mengkonfigurasi Pelayan Echo Laravel dan kod bahagian hadapan. Kami boleh menggunakan alatan ini untuk pelbagai senario aplikasi, seperti:

• Aplikasi bilik sembang masa nyata
• Ulasan blog masa nyata
• Status pengguna masa nyata kemas kini

Perlu diambil perhatian bahawa Echo Server hanya melaksanakan bahagian pelayan komunikasi WebSockets. Jika kita perlu melaksanakan fungsi komunikasi masa nyata, kita juga perlu melaksanakan logik yang sepadan dalam aplikasi.

Kita boleh menggunakan ciri broadcast Laravel untuk melaksanakan logik ini. Lihat dokumentasi Laravel untuk cara menggunakan siaran.

Kesimpulan

Dalam artikel ini, kami memperincikan cara untuk melaksanakan komunikasi WebSockets menggunakan Laravel Echo Server.

Prosesnya mudah dan boleh digunakan untuk melaksanakan pelbagai aplikasi masa nyata, membolehkan anda menghantar mesej kepada pengguna anda dan menerima maklum balas daripada mereka dalam masa nyata.

Dengan menggunakan Laravel Echo Server, kami boleh melaksanakan aplikasi komunikasi masa nyata yang cekap dengan lebih mudah dan meningkatkan pengalaman pengguna dan interaktiviti aplikasi kami.

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