本篇文章給大家?guī)?lái)了關(guān)于Laravel的相關(guān)知識(shí)，其中主要介紹了怎么用laravel-websockets來(lái)實(shí)現(xiàn)一個(gè)“低配版”廣播系統(tǒng)，感興趣的朋友一起來(lái)看一下吧，希望對(duì)大家有幫助。

前言

網(wǎng)上找了好幾個(gè)教程都沒(méi)成功，然后死磕一個(gè)教程不斷研究最終成功了。然后就寫(xiě)了這篇教程，希望能幫到跟我一樣笨的人。另外希望不要誤導(dǎo)到讀者。希望讀者最好不要過(guò)于信任我的這個(gè)教程。我其實(shí)是稀里糊涂地成功的，我的這個(gè)教程可能也有坑。還有一點(diǎn)是我覺(jué)得我研究的過(guò)程好像收獲挺大的，如果時(shí)間充裕的話建議自己研究。

教程的開(kāi)頭我先大致介紹一下我是怎么搞出這個(gè)教程介紹的方法的。我建議看教程的人重視一下這部分，因?yàn)槲覒岩?Laravel 或者相關(guān)的庫(kù)一更新可能又會(huì)出現(xiàn)不兼容或者錯(cuò)亂的情況，然后就又有問(wèn)題了。到時(shí)候可能就需要讀者自行研究了。

為什么說(shuō)是大致介紹呢，因?yàn)楹芏嗟胤轿腋杏X(jué)都是我瞎貓碰死耗子蒙出來(lái)的。另外可能需要一些無(wú)法言說(shuō)的經(jīng)驗(yàn)吧。

盡量縮小實(shí)驗(yàn)的對(duì)象的規(guī)模，找步驟少的教程

剛開(kāi)始我是照著官方文檔中文版做的，后來(lái)發(fā)現(xiàn)這個(gè)實(shí)在是太復(fù)雜了，可能錯(cuò)一步就會(huì)失敗。而且有的時(shí)候連錯(cuò)誤提示也沒(méi)有，就算有錯(cuò)誤提示不是搜不到就是有太多回答完全不一樣的問(wèn)題。如果盡量縮小規(guī)模的話，應(yīng)該就能盡量少踩點(diǎn)坑了。

將任務(wù)分解得可以獲得子任務(wù)成功的反饋

剛開(kāi)始我是一步一步跟著做，然后最后看是否成功，后來(lái)發(fā)現(xiàn)這種方法太低效了。然后我發(fā)現(xiàn)某些子步驟是可以通過(guò)一些方法判斷是否成功的，比如 laravel-websockets 安裝成功之后能打開(kāi)那個(gè) dashboard。就是 /laravel-websockets 。另外還有發(fā)送廣播的代碼如果成功了的話可以在前面說(shuō)的那個(gè) dashboard 里看到效果。最后就是全部成功就能在瀏覽器里看到效果了。所以后來(lái)我如果當(dāng)前階段沒(méi)有成功就不會(huì)繼續(xù)做下去了，繼續(xù)研究本階段哪里錯(cuò)了。

多打 Log

我是通過(guò)打 Log 發(fā)現(xiàn)客戶端的 Echo 根本沒(méi)有初始化成功的，因?yàn)樯賯€(gè)參數(shù)。之前好像也有個(gè)錯(cuò)誤提示，但是我好像沒(méi)看懂。通過(guò)在初始化 Echo 的前后分別輸出兩條不一樣的 Log，我發(fā)現(xiàn)只有前一條執(zhí)行了，后一條根本沒(méi)執(zhí)行，所以得出了程序遇到錯(cuò)誤就停止執(zhí)行了的結(jié)論。

對(duì)被實(shí)驗(yàn)的對(duì)象盡量熟悉起來(lái)

比如我沒(méi)搜索到某條報(bào)錯(cuò)的相關(guān)信息。但是后來(lái)發(fā)現(xiàn)里面的某個(gè)詞在配置里出現(xiàn)過(guò)，改了一下那個(gè)配置就好了。就是這個(gè)：“Uncaught Options object must provide a cluster”。不過(guò)后來(lái)我在網(wǎng)上發(fā)現(xiàn)個(gè)跟我一樣的方法，沒(méi)準(zhǔn)我之前看過(guò)那個(gè)方法，可能是因?yàn)闃侵髡f(shuō)沒(méi)用所以我就沒(méi)試。

多綜合各方信息，特別是那些成功的

雖然不一定能拿來(lái)就用，甚至可能會(huì)產(chǎn)生誤導(dǎo)，但是我相信信息多一些還是更有助于解決問(wèn)題的。比如我就在嗶哩嗶哩上搜過(guò)“l(fā)aravel 廣播”看過(guò)幾個(gè)視頻。還搜索了一些非官方文檔的教程。

如果搜錯(cuò)誤提示沒(méi)有用的東西或者搜索結(jié)果太多就看看代碼

不過(guò)我感覺(jué)這條有用的概率不大，實(shí)在沒(méi)招了再用吧。我是通過(guò)這個(gè)方法發(fā)現(xiàn)我在取消注釋代碼的時(shí)候少取消注釋了一行，然后出現(xiàn)了很奇怪的錯(cuò)誤提示。

就算成功了也不要高興得太早，多練習(xí)幾遍

步驟越多越容易出問(wèn)題，這個(gè)廣播系統(tǒng)的步驟是真多。多練習(xí)也能多熟悉一點(diǎn)。

盡量選擇更新的教程

我一般在搜索引擎里加個(gè)一年內(nèi)的條件。

面向搜索引擎編程

感覺(jué)這次大概有一半以上的問(wèn)題都是通過(guò)搜索引擎解決的吧，完全自己解決的部分好像很少。

本體

我這個(gè)教程某些方面比較啰嗦，是從創(chuàng)建項(xiàng)目開(kāi)始的，另外還提到了配置數(shù)據(jù)庫(kù)。水平比較高的讀者可以忽略一些內(nèi)容。至于高端的讀者應(yīng)該用不著看我的這種東西。不過(guò)我對(duì)命令的介紹基本沒(méi)有，有需求建議去看下面的英文文章。
備忘

我這個(gè)是公共頻道的。還有隊(duì)列用的是默認(rèn)的 sync，據(jù)說(shuō)只能用于開(kāi)發(fā)環(huán)境?？傊疫@個(gè)教程應(yīng)該是挺殘廢的，但是跑通了應(yīng)該就可以以此為起點(diǎn)根據(jù)官方文檔實(shí)驗(yàn)新的配置和添加新的功能了。

我的這個(gè)教程主要參考自這篇文章：How to use Laravel WebSockets。

創(chuàng)建項(xiàng)目

在 Apache24htdocs 或者類似的地方運(yùn)行下面的命令：

composer create-project laravel/laravel bc

在項(xiàng)目路徑中運(yùn)行以下命令：

php artisan serve

注意運(yùn)行完上面的命令當(dāng)前命令行窗口一般就不能運(yùn)行命令了，需要重啟一個(gè)命令行窗口。想要在繼續(xù)在當(dāng)前命令行窗口運(yùn)行命令除非配合后臺(tái)運(yùn)行的命令。

配置數(shù)據(jù)庫(kù)信息

在配置數(shù)據(jù)庫(kù)之前需要?jiǎng)?chuàng)建一個(gè)數(shù)據(jù)庫(kù)，我用的是 test。不過(guò)就算不創(chuàng)建在 migrate 的時(shí)候也會(huì)提示創(chuàng)建。這個(gè)差點(diǎn)就忘了，因?yàn)橹耙恢睕](méi)有刪除這個(gè)數(shù)據(jù)庫(kù)。

.env

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

注意要填你的數(shù)據(jù)庫(kù)的實(shí)際的信息，別照抄我的配置。

安裝服務(wù)器端包 beyondcode/laravel-websockets

在項(xiàng)目路徑中運(yùn)行以下命令：

composer require beyondcode/laravel-websockets php artisan vendor:publish --provider="BeyondCodeLaravelWebSocketsWebSocketsServiceProvider" --tag="migrations"php artisan migrate php artisan vendor:publish --provider="BeyondCodeLaravelWebSocketsWebSocketsServiceProvider" --tag="config"

安裝 pusher

在項(xiàng)目路徑中運(yùn)行以下命令：

composer require pusher/pusher-php-server

注意這條我跟我參考的那篇文章不一樣，我這個(gè)安裝的應(yīng)該是最新版的。原文好像指定版本了。

配置 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

注意這里跟我參考的那篇英文文章也不一樣，我強(qiáng)迫癥，感覺(jué)改 .env 更優(yōu)雅一些。畢竟其他地方都會(huì)優(yōu)先讀 .env。感覺(jué) .env 更像是函數(shù)，一個(gè)地方改動(dòng)了不用修改所有調(diào)用的地方。感覺(jué)前一句有點(diǎn)問(wèn)題，大概就是那個(gè)意思吧。

再注意一下第二條到第四條的值是隨便填的。

運(yùn)行 Laravel WebSockets 服務(wù)器

在項(xiàng)目路徑中運(yùn)行以下命令：

php artisan websockets:serve

這個(gè)也是運(yùn)行之后當(dāng)前命令行窗口就不能輸入命令了。【推薦學(xué)習(xí)：laravel視頻教程】

之后在瀏覽器地址欄輸入 127.0.0.1:8000/laravel-websockets 就能看前面的操作是否成功了。如果你不是通過(guò)“php artisan serve”運(yùn)行的服務(wù)器的話可能端口會(huì)不一樣。點(diǎn)擊那個(gè) Connect 按鈕如果在 Events 下面出現(xiàn)一些東西應(yīng)該就是階段性成功了。注意這個(gè)網(wǎng)頁(yè)在沒(méi)那個(gè)啥的情況下打開(kāi)是非常慢的，至少在我這里很慢。因?yàn)槔锩嬗袀€(gè) js 庫(kù)的下載速度很慢。注意下面的改 blade 模板的行為是可選的！另外我不知道下面的那個(gè) cdn 有沒(méi)有問(wèn)題，畢竟好像不是大廠的 cdn。如果你嫌慢又不想那個(gè)啥的話可以將 vendorbeyondcodelaravel-websocketsresourcesviewsdashboard.blade.php 中的

<script  src="https://www.php.cn/link/19e0c9edc141240b5de750fa83ba1bed"></script>

換成

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

我是通過(guò)用 VS Code 搜索功能直接搜索 cdn.plot.ly/plotly-latest.min.js 搜出來(lái)這個(gè)文件的。另外是在火狐的開(kāi)發(fā)者工具的網(wǎng)絡(luò)中發(fā)現(xiàn)這個(gè) js 庫(kù)加載速度慢的。另外這種直接改這種地方的文件應(yīng)該是不太優(yōu)雅。

創(chuàng)建事件

在項(xiàng)目路徑中運(yùn)行以下命令：

php artisan make:event NewTrade

appEventsNewTrade.php

<?php namespace AppEvents;use IlluminateBroadcastingChannel; use IlluminateBroadcastingInteractsWithSockets; use IlluminateBroadcastingPresenceChannel; use IlluminateBroadcastingPrivateChannel; use IlluminateContractsBroadcastingShouldBroadcast;use IlluminateFoundationEventsDispatchable; use IlluminateQueueSerializesModels; 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 IlluminateBroadcastingChannel|array      */     public function broadcastOn()     {         return new Channel('trades');     }}

在項(xiàng)目路徑中運(yùn)行以下命令：

php artisan tinker

運(yùn)行這條命令后會(huì)啟動(dòng) Laravel 的交互式解釋器，我理解就是輸入一些語(yǔ)句可以直接執(zhí)行。另外還有一些其他的實(shí)用的命令。這個(gè)也是運(yùn)行之后當(dāng)前命令行窗口就不能輸入正常的系統(tǒng)命令了，但是這個(gè)命令行窗口之后要輸入 php 語(yǔ)句。順便說(shuō)一下，VS Code 里的終端在 tinker 里沒(méi)法 Ctrl + V，但是右鍵是粘貼的功能。

然后在上面的執(zhí)行過(guò) php artisan tinker 的那個(gè)命令行窗口運(yùn)行以下命令：

event (new AppEventsNewTrade('test'))

之后就能在上面提到的那個(gè) 127.0.0.1:8000/laravel-websockets 頁(yè)面看到發(fā)出的消息了。能看到的話就說(shuō)明階段性成功了。

安裝客戶端包 laravel-echo

在項(xiàng)目路徑中運(yùn)行以下命令：

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,});

注意這里也跟我參考的那篇英文文章不一樣。我只是取消注釋了那個(gè)文件中的那些東西，并在結(jié)尾添加了一行“cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,”。

在項(xiàng)目路徑中運(yùn)行以下命令：

npm run dev

這個(gè)也是運(yùn)行之后當(dāng)前命令行窗口就不能輸入命令了。

添加客戶端腳本

在文件
resourcesviewswelcome.blade.php
的 head 標(biāo)簽的結(jié)尾添加以下代碼：

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

注意這里也跟我參考的那篇英文文章不一樣。改了兩處，一個(gè)是導(dǎo)入 app.js 的方法換了。另外套了一層 window.onload。

然后在瀏覽器的地址欄輸入 127.0.0.1:8000/ 啟動(dòng)開(kāi)發(fā)者工具并切換到控制臺(tái)標(biāo)簽頁(yè)。然后再在前面運(yùn)行過(guò) php artisan tinker 的那個(gè)命令行窗口中執(zhí)行以下命令：

event (new AppEventsNewTrade('test'))

最后切換到前面提到的開(kāi)發(fā)者工具中的控制臺(tái)標(biāo)簽頁(yè)，應(yīng)該能看到一條“test”消息。能看到就說(shuō)明最終成功了。

結(jié)語(yǔ)

我只是個(gè)菜狗，不要問(wèn)我太復(fù)雜的問(wèn)題。我從開(kāi)始搞這個(gè)廣播系統(tǒng)到最終成功好像用了兩三天的時(shí)間，就憑這個(gè)時(shí)間你應(yīng)該就能體會(huì)到我有多菜了。

最后因?yàn)槲沂遣斯罚钥赡軙?huì)有一些理解上的錯(cuò)誤，歡迎指出來(lái)。不過(guò)按照我的這個(gè)教程做基本上應(yīng)該是會(huì)成功的。我做完這個(gè)教程自己照著又做了兩遍，沒(méi)問(wèn)題。不過(guò)也可能會(huì)因?yàn)槲覜](méi)注意到一些東西，或者讀者的環(huán)境跟我的不一樣導(dǎo)致讀者不成功。所以我也不敢保證。感覺(jué)早晚會(huì)失效，失效了如果我沒(méi)更新的話誰(shuí)看到了就回復(fù)一下提醒一下別人吧。

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