本篇內(nèi)容介紹了“怎么使用laravel-websockets實(shí)現(xiàn)廣播系統(tǒng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的宜川網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

在 Apache24\htdocs 或者類似的地方運(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="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

安裝 pusher

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

composer require pusher/pusher-php-server

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

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

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

php artisan websockets:serve

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

之后在瀏覽器地址欄輸入 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è)啥的話可以將 vendor\beyondcode\laravel-websockets\resources\views\dashboard.blade.php 中的

<script  src="https://www.cdcxhl.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

app\Events\NewTrade.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');
    }}

在項(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 \App\Events\NewTrade('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

resources\js\bootstrap.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)前命令行窗口就不能輸入命令了。

添加客戶端腳本

在文件
resources\views\welcome.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 \App\Events\NewTrade('test'))

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

“怎么使用laravel-websockets實(shí)現(xiàn)廣播系統(tǒng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享名稱：怎么使用laravel-websockets實(shí)現(xiàn)廣播系統(tǒng)
網(wǎng)站URL：http://chinadenli.net/article42/ggpehc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)、標(biāo)簽優(yōu)化、企業(yè)建站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)