Ajar anda cara menggunakan laravel-websockets untuk membina sistem penyiaran 'berprofil rendah'.

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Laravel terutamanya cara menggunakan laravel-websockets untuk melaksanakan sistem penyiaran "versi konfigurasi rendah" Rakan-rakan yang berminat harus melihatnya kepada semua orang.

Kata Pengantar

Saya mendapati beberapa tutorial di Internet tidak berjaya, dan kemudian saya berpegang pada satu tutorial dan terus mempelajarinya dan akhirnya berjaya. Kemudian saya menulis tutorial ini, dengan harapan dapat membantu orang yang bodoh seperti saya. Juga, saya harap tidak mengelirukan pembaca. Saya harap pembaca tidak akan terlalu mempercayai tutorial saya. Saya sebenarnya berjaya dalam keadaan terpinga-pinga, dan mungkin terdapat perangkap dalam tutorial saya ini. Perkara lain ialah saya merasakan bahawa proses penyelidikan saya nampaknya agak membuahkan hasil. Jika anda mempunyai masa yang mencukupi, saya cadangkan anda melakukan penyelidikan anda sendiri.

Pada permulaan tutorial, saya akan memperkenalkan secara ringkas bagaimana saya menghasilkan kaedah yang diperkenalkan dalam tutorial ini. Saya mencadangkan agar orang yang membaca tutorial memberi perhatian kepada bahagian ini, kerana saya mengesyaki bahawa sebaik sahaja Laravel atau perpustakaan berkaitan dikemas kini, mereka mungkin menjadi tidak serasi atau mengelirukan, dan kemudian akan ada masalah lagi. Pada masa itu, pembaca mungkin perlu membuat kajian sendiri.

Mengapa saya katakan ia adalah pengenalan umum kerana saya merasakan banyak tempat dicipta oleh saya? Di samping itu, ia mungkin memerlukan pengalaman yang tidak terkata.

Cuba kurangkan saiz subjek eksperimen dan cari tutorial dengan langkah yang lebih sedikit

Pada mulanya saya mengikuti versi bahasa Cina bagi dokumen rasmi, tetapi kemudian saya mendapati bahawa ia terlalu rumit dan Saya mungkin telah membuat kesilapan. Dan kadang-kadang tidak terdapat mesej ralat Walaupun terdapat mesej ralat, sama ada ia tidak dapat ditemui atau terdapat terlalu banyak soalan dengan jawapan yang sama sekali berbeza. Jika anda mengurangkan skala sebanyak mungkin, anda sepatutnya dapat mengelakkan seberapa banyak perangkap yang mungkin.

Uraikan tugasan supaya anda boleh mendapatkan maklum balas tentang kejayaan subtugasan

Pada mulanya saya mengikutinya langkah demi langkah, dan akhirnya melihat sama ada ia berjaya Kemudian saya mendapati bahawa ini kaedah terlalu tidak cekap. Kemudian saya mendapati bahawa beberapa sub-langkah boleh dinilai dengan beberapa kaedah untuk menentukan sama ada ia berjaya Contohnya, selepas laravel-websockets berjaya dipasang, papan pemuka boleh dibuka. Ia adalah /laravel-websockets . Terdapat juga kod untuk menghantar siaran Jika berjaya, anda boleh melihat kesannya di papan pemuka yang dinyatakan sebelum ini. Akhirnya, jika semuanya berjaya, anda boleh melihat kesannya dalam pelayar. Jadi kemudian, jika saya tidak berjaya pada peringkat sekarang, saya tidak akan terus melakukannya, dan saya akan terus mengkaji apa yang salah pada peringkat ini.

Log lagi

Saya dapati dengan mengelog bahawa Echo pelanggan tidak berjaya dimulakan sama sekali kerana terdapat lebih sedikit parameter. Nampaknya ada mesej ralat sebelum ini, tetapi saya nampaknya tidak memahaminya. Dengan mengeluarkan dua Log berbeza sebelum dan selepas memulakan Echo, saya mendapati bahawa hanya yang pertama telah dilaksanakan, dan yang terakhir tidak dilaksanakan sama sekali, jadi saya membuat kesimpulan bahawa program berhenti melaksanakan apabila ia menghadapi ralat.

Biasa dengan subjek yang diuji sebanyak mungkin

Sebagai contoh, saya tidak menemui sebarang maklumat yang berkaitan dengan laporan ralat tertentu. Tetapi kemudian saya mendapati bahawa perkataan tertentu di dalamnya muncul dalam konfigurasi, jadi saya hanya menukar konfigurasi dan ia baik-baik saja. Ini adalah: "Objek Pilihan Tidak Ditangkap mesti menyediakan kluster". Tetapi kemudian saya menemui kaedah di Internet yang sama dengan saya Mungkin saya pernah melihat kaedah itu sebelum ini Mungkin kerana poster itu mengatakan ia tidak berguna, jadi saya tidak mencubanya.

Maklumat yang menyeluruh daripada semua pihak terutama mereka yang berjaya

Walaupun mungkin tidak mudah digunakan malah boleh mengelirukan, saya percaya lebih banyak maklumat akan lebih membantu dalam menyelesaikan masalah bermasalah. Contohnya, saya mencari "siaran laravel" di Bilibili dan menonton beberapa video. Juga mencari beberapa tutorial dokumentasi tidak rasmi.

Jika mesej ralat carian tidak berguna atau terlalu banyak hasil carian, lihat kodnya

Tetapi saya rasa kebarangkalian ini berguna adalah rendah, jadi gunakan sahaja apabila anda tidak mempunyai pilihan lain. Melalui kaedah ini, saya mendapati bahawa saya menyahkomen satu baris yang kurang apabila menyahkomen kod, dan kemudian mesej ralat yang sangat pelik muncul.

Jangan terlalu gembira walaupun berjaya, amalkan beberapa kali lagi

Semakin banyak langkah, semakin mudah untuk menghadapi masalah sistem penyiaran. Semakin banyak anda berlatih, semakin akrab anda.

Cuba pilih tutorial yang dikemas kini

Saya biasanya menambah syarat dalam masa satu tahun pada enjin carian.

Pengaturcaraan untuk enjin carian

Saya rasa lebih separuh daripada masalah kali ini telah diselesaikan melalui enjin carian, dan nampaknya terdapat sangat sedikit bahagian yang diselesaikan sepenuhnya oleh saya sendiri.

Ontology

Sesetengah aspek tutorial saya agak panjang Ia bermula dengan mencipta projek dan juga menyebut mengkonfigurasi pangkalan data. Pembaca lanjutan mungkin mengabaikan beberapa kandungan. Bagi pembaca kelas atas, tidak perlu membaca perkara saya ini. Walau bagaimanapun, saya pada dasarnya tidak mempunyai pengenalan kepada arahan Jika anda memerlukannya, saya mengesyorkan membaca artikel Bahasa Inggeris berikut.
Memo

Ini ialah saluran awam. Terdapat juga baris gilir yang menggunakan penyegerakan lalai, yang dikatakan hanya digunakan dalam persekitaran pembangunan. Pendek kata, tutorial saya mungkin agak lumpuh, tetapi jika anda menjalankannya, anda sepatutnya boleh menggunakannya sebagai titik permulaan untuk mencuba konfigurasi baharu dan menambah fungsi baharu mengikut dokumen rasmi.

Tutorial saya terutamanya berdasarkan artikel ini: Cara menggunakan Laravel WebSockets.

Buat projek

Jalankan arahan berikut dalam Apache24htdocs atau serupa:

composer create-project laravel/laravel bc

Jalankan arahan berikut dalam laluan projek:

php artisan serve

Perhatikan bahawa selepas menjalankan arahan di atas, tetingkap baris arahan semasa secara amnya tidak boleh menjalankan arahan, dan tetingkap baris arahan perlu dimulakan semula. Anda mahu terus menjalankan arahan dalam tetingkap baris arahan semasa melainkan anda bekerjasama dengan arahan yang dijalankan di latar belakang.

Mengkonfigurasi maklumat pangkalan data

Sebelum mengkonfigurasi pangkalan data, anda perlu mencipta pangkalan data saya menggunakan ujian. Walau bagaimanapun, walaupun ia tidak dibuat, ia akan digesa untuk menciptanya apabila berhijrah. Saya hampir terlupa tentang ini kerana saya tidak pernah memadam pangkalan data ini sebelum ini.

.env

DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=testDB_USERNAME=rootDB_PASSWORD=1234

Pastikan anda mengisi maklumat sebenar pangkalan data anda, jangan salin konfigurasi saya.

Pasang pakej sisi pelayan beyondcode/laravel-websockets

Jalankan arahan berikut dalam laluan projek:

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Pasang penolak

Dalam laluan projek Jalankan arahan berikut:

composer require pusher/pusher-php-server

Perhatikan bahawa artikel ini berbeza daripada artikel yang saya rujuk. Artikel yang saya pasang mestilah versi terkini. Teks asal nampaknya mempunyai versi tertentu.

Konfigurasikan Laravel WebSockets

.env

BROADCAST_DRIVER=pusherPUSHER_APP_ID=12345PUSHER_APP_KEY=ABCDEFGPUSHER_APP_SECRET=HIJKLMNOPPUSHER_HOST=127.0.0.1PUSHER_PORT=6001PUSHER_SCHEME=httpPUSHER_APP_CLUSTER=mt1

Perhatikan bahawa ini berbeza daripada artikel Bahasa Inggeris yang saya rujuk saya mengalami gangguan obsesif-kompulsif dan merasakan bahawa perubahan . env adalah lebih elegan. Lagipun tempat lain akan baca .env dulu. Rasanya .env lebih seperti fungsi Jika anda menukarnya di satu tempat, anda tidak perlu mengubah suai semua tempat panggilan. Aku rasa macam ada yang tak kena dengan ayat tadi, mungkin itu maksudnya.

Sila ambil perhatian bahawa nilai dari item kedua hingga keempat diisi secara santai.

Jalankan pelayan Laravel WebSockets

Jalankan arahan berikut dalam laluan projek:

php artisan websockets:serve

Ini juga yang semasa selepas dijalankan Anda tidak boleh memasukkan arahan dalam tetingkap baris arahan. [Pembelajaran yang disyorkan: tutorial video laravel] Selepas

masukkan 127.0.0.1:8000/laravel-websockets dalam bar alamat penyemak imbas untuk melihat sama ada operasi sebelumnya berjaya . Jika anda tidak menjalankan pelayan melalui "php artisan serve", port mungkin berbeza. Klik butang Sambung dan jika sesuatu muncul di bawah Acara, ia sepatutnya kejayaan berperingkat. Ambil perhatian bahawa halaman web ini sangat lambat dibuka tanpa itu, sekurang-kurangnya ia sangat perlahan untuk saya. Kerana terdapat perpustakaan js di dalamnya yang sangat lambat untuk dimuat turun. Perhatikan bahawa tingkah laku menukar templat bilah berikut adalah pilihan! Selain itu, saya tidak tahu sama ada terdapat sebarang masalah dengan CDN di bawah Lagipun, ia nampaknya bukan CDN daripada pengeluar utama. Jika anda terlalu lambat dan tidak mahu berbuat demikian, anda boleh menggantikan

<script  src="//m.sbmmt.com/link/19e0c9edc141240b5de750fa83ba1bed"></script>

dalam vendorbeyondcodelaravel-websocketsresourcesviewsdashboard.blade.php dengan

<script  src="https://cdn.bootcdn.net/ajax/libs/plotly.js/2.17.0/plotly.min.js"></script>

saya mencari dengan Kod VS Fungsi mencari terus cdn.plot.ly/plotly-latest.min.js untuk mencari fail ini. Di samping itu, dalam rangkaian alat pembangun Firefox, saya mendapati kelajuan pemuatan perpustakaan js ini adalah perlahan. Di samping itu, adalah tidak elok untuk terus menukar fail di tempat tersebut.

Buat acara

Jalankan arahan berikut dalam laluan projek:

php artisan make:event NewTrade

appEventsNewTrade.php

<?php
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;
class NewTrade implements ShouldBroadcast{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $trade;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($trade)
    {
        $this->trade = $trade;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('trades');
    }}

Jalankan arahan berikut dalam laluan projek :

php artisan tinker

Selepas menjalankan arahan ini, penterjemah interaktif Laravel akan dimulakan. Saya faham ia boleh dilaksanakan secara langsung dengan memasukkan beberapa pernyataan. Terdapat juga beberapa arahan praktikal yang lain. Ini juga bermakna bahawa selepas berjalan, tetingkap baris arahan semasa tidak boleh memasukkan arahan sistem biasa, tetapi selepas tetingkap baris arahan ini, pernyataan php mesti dimasukkan. Dengan cara ini, terminal dalam Kod VS tidak boleh menggunakan Ctrl + V dalam tinker, tetapi fungsi klik kanan boleh digunakan untuk menampal.

Kemudian jalankan arahan berikut dalam tetingkap baris arahan di mana php artisan tinker telah dilaksanakan di atas:

event (new \App\Events\NewTrade('test'))

Kemudian anda boleh menjalankan yang disebutkan di atas 127.0.0.1:8000 / laravel-websockets halaman untuk melihat mesej yang dihantar. Jika anda boleh melihatnya, bermakna pentas itu berjaya.

Pasang pakej klien laravel-echo

Jalankan arahan berikut dalam laluan projek:

npm installnpm install --save-dev laravel-echo pusher-js

resourcesjsbootstrap.js

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,
    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'],
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,});

Nota di sini Ia juga berbeza dengan artikel bahasa Inggeris yang saya rujuk. Saya hanya menyahkomen perkara tersebut dalam fail itu dan menambah baris "cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER," pada penghujungnya.

Jalankan arahan berikut dalam laluan projek:

npm run dev

Ini juga bermakna selepas menjalankan ini, arahan tidak boleh dimasukkan dalam tetingkap baris arahan semasa.

添加客户端脚本

在文件
resources\views\welcome.blade.php
的 head 标签的结尾添加以下代码：

        @vite('resources/js/app.js')        <script>
            window.onload = function(){
                Echo.channel('trades')
                .listen('NewTrade', (e) => {
                    console.log(e.trade);
                });
            };
        </script>
    </head>

注意这里也跟我参考的那篇英文文章不一样。改了两处，一个是导入 app.js 的方法换了。另外套了一层 window.onload。

然后在浏览器的地址栏输入 127.0.0.1:8000/ 启动开发者工具并切换到控制台标签页。然后再在前面运行过 php artisan tinker 的那个命令行窗口中执行以下命令：

event (new \App\Events\NewTrade('test'))

最后切换到前面提到的开发者工具中的控制台标签页，应该能看到一条“test”消息。能看到就说明最终成功了。

结语

我只是个菜狗，不要问我太复杂的问题。我从开始搞这个广播系统到最终成功好像用了两三天的时间，就凭这个时间你应该就能体会到我有多菜了。

最后因为我是菜狗，所以可能会有一些理解上的错误，欢迎指出来。不过按照我的这个教程做基本上应该是会成功的。我做完这个教程自己照着又做了两遍，没问题。不过也可能会因为我没注意到一些东西，或者读者的环境跟我的不一样导致读者不成功。所以我也不敢保证。感觉早晚会失效，失效了如果我没更新的话谁看到了就回复一下提醒一下别人吧。

原文地址：https://learnku.com/articles/74366

Atas ialah kandungan terperinci Ajar anda cara menggunakan laravel-websockets untuk membina sistem penyiaran 'berprofil rendah'.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!