玩具版 Laravel 私有广播系统

前言

首先我的这个教程是在我之前发的一个教程的基础上改的。链接： 博客：laravel-websockets 实现“低配版”广播系统 。基本可以肯定必须照着我的那个教程做完接着照着这个教程做才行。另外我参考的主要是这个英文教程： medium.com/@dennissmink/laravel-ec... 。不过由于年代久远，这个英文教程已经发霉了，没法食用。直接按照那个英文教程做可能会导致项目文件被破坏。

如果读者不是在做完我之前发的那篇教程之后马上做这个的话，比如重启过电脑之类的。需要重新运行以下命令：

php artisan serve
php artisan websockets:serve
npm run dev

说实话我是不建议读者直接用我这个方法的，除非你只是为了辅助理解广播系统。这篇教程很多地方我只是一知半解，甚至最后有没有成功我都是没法百分百确认的。其实我写这篇文章更多算是给自己做的一个笔记吧。也希望有人能帮我挑挑毛病。

本体

取消注释 BroadcastServiceProvider

在 config\app.php 里取消注释这条：

App\Providers\BroadcastServiceProvider::class,

这条默认是注释掉的。

安装 Laravel Breeze

在项目目录中运行以下命令：

composer require laravel/breeze --dev
php artisan breeze:install
npm install
php artisan migrate

第二条命令好像有点卡。我这里后两条命令不执行好像也没问题，可能是因为在上一篇文章里执行过了吧。为了尽量严谨一些还是加上吧。上面几条命令来自这里： 入门套件《Laravel 9 中文文档》 。

安装完之后打开 127.0.0.1:8000/ ，点右上角的 Register，然后注册一个账号。注册成功之后会自动登陆。

创建事件

在项目目录中运行以下命令：

php artisan make:event PrivateEvent

app\Events\PrivateEvent.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;
use App\Models\User;

class PrivateEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('user.' . $this->user->id);
    }
}

客户端脚本

在 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);
                });
                user = {{ Auth::check() ? Auth::user()->id : "null" }};
                window.Echo.private('user.' + user)
                .listen('PrivateEvent', (e) => {
                    console.log(e);
                });
            };
        </script>
    </head>

再说一下如何改吧。之前的这里的代码是这样的：

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

把上段的代码改成上段代码的上段代码那样就行了。

我自作聪明把 {!! !!} 换成 {{ }} 了。还改了获取 user id 的方法。还有 null 改成 “null” 了，反正改成这个在不登录的时候这里就不会报错了。

修改 routes/channels.php

在 routes/channels.php 中添加以下内容：

Broadcast::channel('user.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

修改 routes/web.php

在 routes/web.php 中添加以下内容：

Route::get('test-broadcast', function(){
    event(new \App\Events\PrivateEvent(Auth::user()));
});

验证

打开 127.0.0.1:8000/ ，然后打开开发者模式，切换到控制台。然后再用其他浏览器或者同一个浏览器的不同用户，或者隐私模式再打开一个这个页面，也切换到控制台。然后打开 127.0.0.1:8000/test-broadcast 。可以看到只有登陆过的浏览器实例的控制台才有反应。

不登录的话控制台有个报错，我就暂时不管了。等我以后有时间再研究吧。谁要是有意愿和时间等的话欢迎帮我完善一下。

本作品采用《CC 协议》，转载必须注明作者和本文链接