Skip to content

广播

简介

在许多现代 Web 应用程序中,WebSocket 用于实现实时、实时更新的用户界面。当服务器上的某些数据更新时,通常会通过 WebSocket 连接发送消息以供客户端处理。WebSocket 提供了一种更高效的替代方案,可以替代持续轮询应用程序服务器以获取应在 UI 中反映的数据更改。

例如,假设你的应用程序能够将用户的数据导出为 CSV 文件并通过电子邮件发送给他们。但是,创建此 CSV 文件需要几分钟时间,因此你选择在队列任务中创建和发送 CSV。当 CSV 已创建并发送给用户时,我们可以使用事件广播来分发一个 App\Events\UserDataExported 事件,该事件由应用程序的 JavaScript 接收。一旦收到事件,我们就可以向用户显示一条消息,告知他们的 CSV 已通过电子邮件发送给他们,而无需刷新页面。

为了帮助你构建这些类型的功能,Laravel 使你可以轻松地通过 WebSocket 连接「广播」服务器端 Laravel 事件。广播 Laravel 事件允许你在服务器端 Laravel 应用程序和客户端 JavaScript 应用程序之间共享相同的事件名称和数据。

广播背后的核心概念很简单:客户端连接到前端的命名频道,而 Laravel 应用程序在后端向这些频道广播事件。这些事件可以包含你希望提供给前端的任何额外数据。

支持的驱动程序

默认情况下,Laravel 包含三个服务器端广播驱动程序供你选择:Laravel ReverbPusher ChannelsAbly

NOTE

在深入了解事件广播之前,请确保你已阅读 Laravel 关于事件和监听器的文档。

快速入门

默认情况下,新的 Laravel 应用程序中未启用广播。你可以使用 install:broadcasting Artisan 命令启用广播:

shell
php artisan install:broadcasting

install:broadcasting 命令将提示你选择要使用的事件广播服务。此外,它将创建 config/broadcasting.php 配置文件和 routes/channels.php 文件,你可以在其中注册应用程序的广播授权路由和回调。

Laravel 开箱即支持多个广播驱动程序:Laravel ReverbPusher ChannelsAbly,以及用于本地开发和调试的 log 驱动程序。此外,还包含一个 null 驱动程序,允许你在测试期间禁用广播。config/broadcasting.php 配置文件中包含每个驱动程序的配置示例。

应用程序的所有事件广播配置都存储在 config/broadcasting.php 配置文件中。如果应用程序中不存在此文件,请不要担心;当你运行 install:broadcasting Artisan 命令时将创建它。

下一步

启用事件广播后,你就可以了解更多关于定义广播事件监听事件的信息。如果你使用 Laravel 的 React 或 Vue 入门套件,你可以使用 Echo 的 useEcho 钩子监听事件。

NOTE

在广播任何事件之前,你应该首先配置并运行队列工作进程。所有事件广播都通过队列任务完成,以便应用程序的响应时间不会受到事件广播的严重影响。

服务端安装

要开始使用 Laravel 的事件广播,我们需要在 Laravel 应用程序中进行一些配置并安装一些包。

事件广播由服务器端广播驱动程序完成,该驱动程序广播 Laravel 事件,以便 Laravel Echo(一个 JavaScript 库)可以在浏览器客户端中接收它们。别担心 - 我们将逐步介绍安装过程的每个部分。

Reverb

要在使用 Reverb 作为事件广播器时快速启用 Laravel 广播功能的支持,请使用 --reverb 选项调用 install:broadcasting Artisan 命令。此 Artisan 命令将安装 Reverb 所需的 Composer 和 NPM 包,并使用适当的变量更新应用程序的 .env 文件:

shell
php artisan install:broadcasting --reverb

手动安装

运行 install:broadcasting 命令时,系统将提示你安装 Laravel Reverb。当然,你也可以使用 Composer 包管理器手动安装 Reverb:

shell
composer require laravel/reverb

安装包后,你可以运行 Reverb 的安装命令来发布配置、添加 Reverb 所需的环境变量,并在应用程序中启用事件广播:

shell
php artisan reverb:install

你可以在 Reverb 文档中找到详细的 Reverb 安装和使用说明。

Pusher Channels

要在使用 Pusher 作为事件广播器时快速启用 Laravel 广播功能的支持,请使用 --pusher 选项调用 install:broadcasting Artisan 命令。此 Artisan 命令将提示你输入 Pusher 凭据,安装 Pusher PHP 和 JavaScript SDK,并使用适当的变量更新应用程序的 .env 文件:

shell
php artisan install:broadcasting --pusher

手动安装

要手动安装 Pusher 支持,你应该使用 Composer 包管理器安装 Pusher Channels PHP SDK:

shell
composer require pusher/pusher-php-server

接下来,你应该在 config/broadcasting.php 配置文件中配置 Pusher Channels 凭据。此文件中已包含示例 Pusher Channels 配置,允许你快速指定密钥、密文和应用程序 ID。通常,你应该在应用程序的 .env 文件中配置 Pusher Channels 凭据:

ini
PUSHER_APP_ID="your-pusher-app-id"
PUSHER_APP_KEY="your-pusher-key"
PUSHER_APP_SECRET="your-pusher-secret"
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME="https"
PUSHER_APP_CLUSTER="mt1"

config/broadcasting.php 文件的 pusher 配置还允许你指定 Channels 支持的其他 options,例如集群。

然后,在应用程序的 .env 文件中将 BROADCAST_CONNECTION 环境变量设置为 pusher

ini
BROADCAST_CONNECTION=pusher

最后,你已准备好安装和配置 Laravel Echo,它将在客户端接收广播事件。

Ably

NOTE

以下文档讨论如何在「Pusher 兼容」模式下使用 Ably。但是,Ably 团队推荐并维护一个广播器和 Echo 客户端,能够利用 Ably 提供的独特功能。有关使用 Ably 维护的驱动程序的更多信息,请查阅 Ably 的 Laravel 广播器文档

要在使用 Ably 作为事件广播器时快速启用 Laravel 广播功能的支持,请使用 --ably 选项调用 install:broadcasting Artisan 命令。此 Artisan 命令将提示你输入 Ably 凭据,安装 Ably PHP 和 JavaScript SDK,并使用适当的变量更新应用程序的 .env 文件:

shell
php artisan install:broadcasting --ably

在继续之前,你应该在 Ably 应用程序设置中启用 Pusher 协议支持。你可以在 Ably 应用程序设置仪表板的「Protocol Adapter Settings」部分启用此功能。

手动安装

要手动安装 Ably 支持,你应该使用 Composer 包管理器安装 Ably PHP SDK:

shell
composer require ably/ably-php

接下来,你应该在 config/broadcasting.php 配置文件中配置 Ably 凭据。此文件中已包含示例 Ably 配置,允许你快速指定密钥。通常,此值应通过 ABLY_KEY 环境变量设置:

ini
ABLY_KEY=your-ably-key

然后,在应用程序的 .env 文件中将 BROADCAST_CONNECTION 环境变量设置为 ably

ini
BROADCAST_CONNECTION=ably

最后,你已准备好安装和配置 Laravel Echo,它将在客户端接收广播事件。

客户端安装

Reverb

Laravel Echo 是一个 JavaScript 库,它使订阅频道和监听服务器端广播驱动程序广播的事件变得轻松。

通过 install:broadcasting Artisan 命令安装 Laravel Reverb 时,Reverb 和 Echo 的脚手架和配置将自动注入到你的应用程序中。但是,如果你希望手动配置 Laravel Echo,可以按照以下说明进行操作。

手动安装

要为应用程序的前端手动配置 Laravel Echo,首先安装 pusher-js 包,因为 Reverb 使用 Pusher 协议进行 WebSocket 订阅、频道和消息:

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

安装 Echo 后,你就可以在应用程序的 JavaScript 中创建一个新的 Echo 实例。一个很好的地方是在 Laravel 框架附带的 resources/js/bootstrap.js 文件的底部:

js
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});
js
import { configureEcho } from "@laravel/echo-react";

configureEcho({
    broadcaster: "reverb",
    // key: import.meta.env.VITE_REVERB_APP_KEY,
    // wsHost: import.meta.env.VITE_REVERB_HOST,
    // wsPort: import.meta.env.VITE_REVERB_PORT,
    // wssPort: import.meta.env.VITE_REVERB_PORT,
    // forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    // enabledTransports: ['ws', 'wss'],
});
js
import { configureEcho } from "@laravel/echo-vue";

configureEcho({
    broadcaster: "reverb",
    // key: import.meta.env.VITE_REVERB_APP_KEY,
    // wsHost: import.meta.env.VITE_REVERB_HOST,
    // wsPort: import.meta.env.VITE_REVERB_PORT,
    // wssPort: import.meta.env.VITE_REVERB_PORT,
    // forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    // enabledTransports: ['ws', 'wss'],
});

接下来,你应该编译应用程序的资源:

shell
npm run build

WARNING

Laravel Echo reverb 广播器需要 laravel-echo v1.16.0+。

Pusher Channels

Laravel Echo 是一个 JavaScript 库,它使订阅频道和监听服务器端广播驱动程序广播的事件变得轻松。

通过 install:broadcasting --pusher Artisan 命令安装广播支持时,Pusher 和 Echo 的脚手架和配置将自动注入到你的应用程序中。但是,如果你希望手动配置 Laravel Echo,可以按照以下说明进行操作。

手动安装

要为应用程序的前端手动配置 Laravel Echo,首先安装 laravel-echopusher-js 包,它们使用 Pusher 协议进行 WebSocket 订阅、频道和消息:

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

安装 Echo 后,你就可以在应用程序的 resources/js/bootstrap.js 文件中创建一个新的 Echo 实例:

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,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});
js
import { configureEcho } from "@laravel/echo-react";

configureEcho({
    broadcaster: "pusher",
    // key: import.meta.env.VITE_PUSHER_APP_KEY,
    // cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    // forceTLS: true,
    // wsHost: import.meta.env.VITE_PUSHER_HOST,
    // wsPort: import.meta.env.VITE_PUSHER_PORT,
    // wssPort: import.meta.env.VITE_PUSHER_PORT,
    // enabledTransports: ["ws", "wss"],
});
js
import { configureEcho } from "@laravel/echo-vue";

configureEcho({
    broadcaster: "pusher",
    // key: import.meta.env.VITE_PUSHER_APP_KEY,
    // cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    // forceTLS: true,
    // wsHost: import.meta.env.VITE_PUSHER_HOST,
    // wsPort: import.meta.env.VITE_PUSHER_PORT,
    // wssPort: import.meta.env.VITE_PUSHER_PORT,
    // enabledTransports: ["ws", "wss"],
});

接下来,你应该在应用程序的 .env 文件中为 Pusher 环境变量定义适当的值。如果这些变量在你的 .env 文件中不存在,你应该添加它们:

ini
PUSHER_APP_ID="your-pusher-app-id"
PUSHER_APP_KEY="your-pusher-key"
PUSHER_APP_SECRET="your-pusher-secret"
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME="https"
PUSHER_APP_CLUSTER="mt1"

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

根据应用程序的需要调整 Echo 配置后,你可以编译应用程序的资源:

shell
npm run build

NOTE

要了解更多关于编译应用程序 JavaScript 资源的信息,请查阅 Vite 文档。

使用现有客户端实例

如果你已经有一个预配置的 Pusher Channels 客户端实例并希望 Echo 使用它,你可以通过 client 配置选项将其传递给 Echo:

js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

const options = {
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY
}

window.Echo = new Echo({
    ...options,
    client: new Pusher(options.key, options)
});

Ably

NOTE

以下文档讨论如何在「Pusher 兼容」模式下使用 Ably。但是,Ably 团队推荐并维护一个广播器和 Echo 客户端,能够利用 Ably 提供的独特功能。有关使用 Ably 维护的驱动程序的更多信息,请查阅 Ably 的 Laravel 广播器文档

Laravel Echo 是一个 JavaScript 库,它使订阅频道和监听服务器端广播驱动程序广播的事件变得轻松。

通过 install:broadcasting --ably Artisan 命令安装广播支持时,Ably 和 Echo 的脚手架和配置将自动注入到你的应用程序中。但是,如果你希望手动配置 Laravel Echo,可以按照以下说明进行操作。

手动安装

要为应用程序的前端手动配置 Laravel Echo,首先安装 laravel-echopusher-js 包,它们使用 Pusher 协议进行 WebSocket 订阅、频道和消息:

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

在继续之前,你应该在 Ably 应用程序设置中启用 Pusher 协议支持。你可以在 Ably 应用程序设置仪表板的「Protocol Adapter Settings」部分启用此功能。

安装 Echo 后,你就可以在应用程序的 resources/js/bootstrap.js 文件中创建一个新的 Echo 实例:

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_ABLY_PUBLIC_KEY,
    wsHost: 'realtime-pusher.ably.io',
    wsPort: 443,
    disableStats: true,
    encrypted: true,
});
js
import { configureEcho } from "@laravel/echo-react";

configureEcho({
    broadcaster: "ably",
    // key: import.meta.env.VITE_ABLY_PUBLIC_KEY,
    // wsHost: "realtime-pusher.ably.io",
    // wsPort: 443,
    // disableStats: true,
    // encrypted: true,
});
js
import { configureEcho } from "@laravel/echo-vue";

configureEcho({
    broadcaster: "ably",
    // key: import.meta.env.VITE_ABLY_PUBLIC_KEY,
    // wsHost: "realtime-pusher.ably.io",
    // wsPort: 443,
    // disableStats: true,
    // encrypted: true,
});

你可能已经注意到我们的 Ably Echo 配置引用了 VITE_ABLY_PUBLIC_KEY 环境变量。此变量的值应该是你的 Ably 公钥。你的公钥是 Ably 密钥中 : 字符之前的部分。

概念概述

Laravel 的事件广播允许你使用基于驱动程序的方法将服务器端事件广播到客户端 JavaScript 应用程序。目前,Laravel 附带了 Pusher ChannelsAbly 驱动程序。可以使用 Laravel Echo JavaScript 包在客户端轻松消费事件。

事件通过「频道」广播,可以指定为公共或私有。应用程序的任何访问者都可以订阅公共频道,无需任何认证或授权;但是,要订阅私有频道,用户必须经过认证并有权监听该频道。

NOTE

如果你想使用开源、自托管的 WebSocket 解决方案,请查看 Laravel Reverb

使用示例应用程序

在深入了解事件广播的每个组件之前,让我们以电子商务商店为例来概述高级概述。

在我们的应用程序中,假设我们有一个允许用户查看订单发货状态的页面。我们还假设当应用程序处理发货状态更新时,会触发 OrderShipmentStatusUpdated 事件:

php
use App\Events\OrderShipmentStatusUpdated;

OrderShipmentStatusUpdated::dispatch($order);

ShouldBroadcast 接口

当用户查看他们的订单之一时,我们不希望他们必须刷新页面才能查看状态更新。相反,我们希望在创建更新时将其广播到应用程序。因此,我们需要用 ShouldBroadcast 接口标记 OrderShipmentStatusUpdated 事件。这将指示 Laravel 在触发时广播该事件:

php
<?php

namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    /**
     * 创建新的事件实例。
     */
    public function __construct(
        public Order $order,
    ) {}
}

ShouldBroadcast 接口要求事件定义一个 broadcastOn 方法。此方法返回事件应广播到的频道。在生成的事件类上已经定义了一个空存根,因此我们只需要填写其详细信息。我们只希望订单的创建者能够查看状态更新,因此我们将事件广播到与订单关联的私有频道:

php
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\PrivateChannel;

/**
 * 获取事件应广播到的频道。
 *
 * @return array<int, \Illuminate\Broadcasting\Channel>
 */
public function broadcastOn(): array
{
    return [
        new PrivateChannel('order.'.$this->order->id),
    ];
}

授权频道

请记住,用户必须被授权监听私有频道。我们可以在应用程序的 routes/channels.php 文件中定义频道授权规则。在此示例中,我们需要验证尝试监听 order.1 私有频道的任何用户实际上是订单的创建者:

php
use App\Models\Order;
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('order.{orderId}', function (string $user, int $orderId) {
    return $user->id === Order::findOrNew($orderId)->user_id;
});

监听事件广播

最后,我们只需要在 JavaScript 应用程序中监听事件。我们可以使用 Laravel Echo 来做到这一点。首先,我们使用 private 方法订阅私有频道。然后,我们可以使用 listen 方法监听 OrderShipmentStatusUpdated 事件。默认情况下,广播事件的所有公共属性都包含在事件负载中:

js
Echo.private(`order.${orderId}`)
    .listen('OrderShipmentStatusUpdated', (e) => {
        // ...
    });

定义广播事件

要通知 Laravel 给定事件应该广播,必须在事件类上实现 Illuminate\Contracts\Broadcasting\ShouldBroadcast 接口。此接口已导入到框架生成的所有事件类中,因此你可以轻松地将其添加到任何事件中。

ShouldBroadcast 接口要求你实现一个方法:broadcastOnbroadcastOn 方法应返回事件应广播到的频道或频道数组。这些频道应该是 ChannelPrivateChannelPresenceChannel 的实例。Channel 的实例表示任何用户都可以订阅的公共频道,而 PrivateChannelPresenceChannel 表示需要频道授权的私有频道:

php
<?php

namespace App\Events;

use App\Models\User;
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 ServerCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * 创建新的事件实例。
     */
    public function __construct(
        public User $user,
    ) {}

    /**
     * 获取事件应广播到的频道。
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('user.'.$this->user->id),
        ];
    }
}

实现 ShouldBroadcast 接口后,你只需要触发事件。一旦事件被触发,队列任务将使用你指定的广播驱动程序自动广播该事件。

广播名称

默认情况下,Laravel 将使用事件的类名广播事件。但是,你可以通过在事件上定义 broadcastAs 方法来自定义广播名称:

php
/**
 * 事件的广播名称。
 */
public function broadcastAs(): string
{
    return 'server.created';
}

如果你使用 broadcastAs 方法自定义广播名称,你应该确保使用前导 . 字符注册你的监听器。这将指示 Echo 不要将应用程序的命名空间添加到事件前面:

js
Echo.private(`user.${userId}`)
    .listen('.server.created', (e) => {
        // ...
    });

广播数据

广播事件时,其所有 public 属性都会自动序列化并作为事件负载广播,允许你从 JavaScript 应用程序访问其任何公共数据。例如,如果你的事件有一个包含 Eloquent 模型的公共 $user 属性,则事件负载将是:

json
{
    "user": {
        "id": 1,
        "name": "Patrick Stewart"
        ...
    }
}

但是,如果你希望对广播负载有更细粒度的控制,可以在事件上添加 broadcastWith 方法。此方法应返回你希望作为事件负载广播的数据数组:

php
/**
 * 获取要广播的数据。
 *
 * @return array<string, mixed>
 */
public function broadcastWith(): array
{
    return ['id' => $this->user->id];
}

广播队列

默认情况下,每个广播事件都放置在 queue.php 配置文件中指定的默认队列的默认连接上。你可以通过在事件类上定义 $connection$queue 属性来自定义广播器使用的队列连接和名称:

php
/**
 * 放置事件的队列连接名称。
 *
 * @var string
 */
public $connection = 'redis';

/**
 * 放置广播任务的队列名称。
 *
 * @var string
 */
public $queue = 'default';

或者,你可以通过在事件上定义 broadcastQueue 方法来自定义队列名称:

php
/**
 * 放置广播任务的队列名称。
 */
public function broadcastQueue(): string
{
    return 'default';
}

如果你想立即广播事件而不将其排队,可以在事件类上实现 ShouldBroadcastNow 接口而不是 ShouldBroadcast

php
<?php

namespace App\Events;

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class OrderShipmentStatusUpdated implements ShouldBroadcastNow
{
    // ...
}

广播条件

有时你希望仅在给定条件为真时广播事件。你可以通过在事件类上定义 broadcastWhen 方法来定义这些条件:

php
/**
 * 确定此事件是否应该广播。
 */
public function broadcastWhen(): bool
{
    return $this->order->status !== 'closed';
}

广播和数据库事务

当广播事件在数据库事务中调度时,它们可能会在数据库事务提交之前由队列处理。发生这种情况时,你在数据库事务期间对模型或数据库记录所做的任何更新可能尚未反映在数据库中。此外,在事务中创建的任何模型或数据库记录可能不存在于数据库中。如果你的事件依赖于这些模型,则在处理广播事件时可能会发生意外错误。

如果队列连接的 after_commit 配置选项设置为 false,你仍然可以通过在事件类上定义 $afterCommit 属性来指示应在所有打开的数据库事务提交后调度特定广播事件:

php
<?php

namespace App\Events;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;

class ServerCreated implements ShouldBroadcast
{
    use SerializesModels;

    public $afterCommit = true;
}

NOTE

要了解更多关于解决这些问题,请查看有关队列任务和数据库事务的文档。

授权频道

私有频道要求你授权当前认证用户实际上可以监听该频道。这是通过向你的 Laravel 应用程序发出 HTTP 请求来完成的,该请求包含频道名称,并允许你的应用程序确定用户是否可以在该频道上监听。使用 Laravel Echo 时,订阅私有频道的 HTTP 请求将自动进行;但是,你需要定义响应这些请求的正确路由。

定义授权回调

在 Laravel 中,频道授权回调很容易定义。在 Laravel 附带的 routes/channels.php 文件中,你可以使用 Broadcast::channel 方法注册频道授权回调。

channel 方法接受两个参数:频道名称和返回 truefalse 的回调函数,指示用户是否有权监听该频道。

所有授权回调都将当前认证用户作为第一个参数接收,并将任何其他通配符参数作为后续参数接收。在此示例中,我们使用 {orderId} 占位符来指示频道的「ID」部分是通配符:

php
use App\Models\Order;
use Illuminate\Support\Facades\Broadcast;

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

授权回调模型绑定

就像 HTTP 路由一样,频道路由也可以利用隐式或显式路由模型绑定。例如,你可以请求实际的 Order 模型实例,而不是接收字符串或数字订单 ID:

php
use App\Models\Order;
use Illuminate\Support\Facades\Broadcast;

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

NOTE

与 HTTP 路由模型绑定不同,频道模型绑定不支持自动作用域隐式模型绑定。但是,这很少成为问题,因为大多数频道都可以基于单个模型的主键进行作用域限定。

授权逻辑

授权回调将为当前未认证的用户接收 null 作为其 $user 参数。你可以通过类型提示 ?User 或向回调添加 User 类型提示来处理此情况:

php
use App\Models\User;
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('chat.{roomId}', function (?User $user, int $roomId) {
    if (! $user) {
        return false;
    }

    // ...
});

定义频道类

如果你的应用程序正在使用许多不同的频道,你的 routes/channels.php 文件可能会变得臃肿。因此,你可以使用频道类而不是使用闭包来授权频道。要生成频道类,请使用 make:channel Artisan 命令。此命令将在 App\Broadcasting 目录中放置一个新的频道类。

shell
php artisan make:channel OrderChannel

接下来,在 routes/channels.php 文件中注册你的频道:

php
use App\Broadcasting\OrderChannel;
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('order.{order}', OrderChannel::class);

最后,你可以将频道的授权逻辑放在频道类的 join 方法中。此方法将包含你通常放置在频道授权闭包中的相同逻辑。你可以利用频道模型绑定:

php
<?php

namespace App\Broadcasting;

use App\Models\Order;
use App\Models\User;

class OrderChannel
{
    /**
     * 创建新的频道实例。
     */
    public function __construct()
    {
        // ...
    }

    /**
     * 验证用户对频道的访问权限。
     */
    public function join(User $user, Order $order): array|bool
    {
        return $user->id === $order->user_id;
    }
}

NOTE

与 Laravel 中的许多其他类一样,频道类将由服务容器自动解析。因此,你可以在构造函数中键入提示频道所需的任何依赖项。

广播事件

定义事件并实现 ShouldBroadcast 接口后,你只需要使用事件的调度方法触发事件。事件调度器将注意到事件实现了 ShouldBroadcast 接口并将事件排队以进行广播:

php
use App\Events\OrderShipmentStatusUpdated;

OrderShipmentStatusUpdated::dispatch($order);

仅发送给其他人

在构建利用事件广播的应用程序时,你有时可能需要将事件广播给给定频道的所有订阅者,但当前用户除外。你可以使用 toOthers 方法完成此操作:

php
use App\Events\OrderShipmentStatusUpdated;

broadcast(new OrderShipmentStatusUpdated($order))->toOthers();

为了更好地理解何时可能需要使用 toOthers 方法,让我们想象一个任务列表应用程序,用户可以通过输入任务名称来创建新任务。要创建任务,应用程序可能会向 /task URL 发出请求,该请求广播任务的创建并返回新任务的 JSON 表示。当你的 JavaScript 应用程序从端点收到响应时,它可能会直接将新任务插入其任务列表中,如下所示:

js
axios.post('/task', task)
    .then((response) => {
        this.tasks.push(response.data);
    });

但是,请记住,我们也广播了任务的创建。如果你的 JavaScript 应用程序正在监听此事件以将任务添加到任务列表中,你的列表中将有重复的任务:一个来自端点响应,一个来自广播。你可以使用 toOthers 方法通过仅向其他用户广播事件来解决这个问题。

NOTE

你的事件必须使用 Illuminate\Broadcasting\InteractsWithSockets trait 才能调用 toOthers 方法。

配置

当你初始化 Laravel Echo 实例时,会为连接分配一个套接字 ID。如果你在 JavaScript 应用程序中使用全局 Axios 实例,套接字 ID 将自动作为 X-Socket-ID 标头附加到每个传出请求中。然后,当你调用 toOthers 方法时,Laravel 将从标头中提取套接字 ID,并指示广播器不要向具有该套接字 ID 的连接广播。

如果你没有使用全局 Axios 实例,则需要手动配置 JavaScript 应用程序以在所有传出请求中发送 X-Socket-ID 标头。你可以使用 Echo.socketId 方法检索套接字 ID:

js
var socketId = Echo.socketId();

自定义连接

如果你的应用程序与多个广播连接交互,并且你希望使用非默认连接广播事件,可以使用 via 方法指定将事件推送到哪个连接:

php
use App\Events\OrderShipmentStatusUpdated;

broadcast(new OrderShipmentStatusUpdated($order))->via('pusher');

你也可以在事件构造函数中调用 via 方法:

php
event((new OrderShipmentStatusUpdated($order))->via('pusher'));

匿名事件

你可以使用 Broadcast 门面广播「匿名事件」,而无需创建专用的事件类:

php
Broadcast::on('orders.'.$order->id)->send();

此方法将广播一个事件,其事件名称为 AnonymousEvent,有效负载如下:

json
{
    "event": "AnonymousEvent",
    "data": {},
    "channel": "orders.1"
}

你可以使用 as 方法自定义事件名称:

php
Broadcast::on('orders.'.$order->id)
    ->as('OrderPlaced')
    ->send();

使用 with 方法,你可以自定义事件负载:

php
Broadcast::on('orders.'.$order->id)
    ->with(['title' => 'Order Placed!'])
    ->send();

这将广播一个事件,其事件名称为 OrderPlaced,有效负载如下:

json
{
    "event": "OrderPlaced",
    "data": "{ id: 1, total: 100 }",
    "channel": "orders.1"
}

如果你希望在私有或 presence 频道上广播匿名事件,可以使用 privatepresence 方法:

php
Broadcast::private('orders.'.$order->id)->send();
Broadcast::presence('channels.'.$channel->id)->send();

使用 send 方法广播匿名事件会将事件调度到应用程序的队列进行处理。但是,如果你希望立即广播事件,可以使用 sendNow 方法:

php
Broadcast::on('orders.'.$order->id)->sendNow();

要将事件广播给所有频道订阅者(当前认证用户除外),可以调用 toOthers 方法:

php
Broadcast::on('orders.'.$order->id)
    ->toOthers()
    ->send();

救援广播

当应用程序的队列服务器不可用或 Laravel 在广播事件时遇到错误时,会抛出异常,通常会导致最终用户看到应用程序错误。由于事件广播通常是应用程序核心功能的补充,你可以通过在事件上实现 ShouldRescue 接口来防止这些异常中断用户体验。

实现 ShouldRescue 接口的事件在广播尝试期间会自动使用 Laravel 的 rescue 辅助函数。此辅助函数会捕获任何异常,将其报告给应用程序的异常处理程序以进行日志记录,并允许应用程序继续正常执行而不会中断用户的工作流程:

php
<?php

namespace App\Events;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Contracts\Broadcasting\ShouldRescue;

class ServerCreated implements ShouldBroadcast, ShouldRescue
{
    // ...
}

接收广播

监听事件

一旦你安装并实例化了 Laravel Echo,你就可以开始监听从 Laravel 应用程序广播的事件。首先,使用 channel 方法检索频道实例,然后调用 listen 方法监听指定事件:

js
Echo.channel(`orders.${this.order.id}`)
    .listen('OrderShipmentStatusUpdated', (e) => {
        console.log(e.order.name);
    });

如果你希望在私有频道上监听事件,请改用 private 方法。你可以继续链式调用 listen 方法以在单个频道上监听多个事件:

js
Echo.private(`orders.${this.order.id}`)
    .listen(/* ... */)
    .listen(/* ... */)
    .listen(/* ... */);

停止监听事件

如果你希望停止监听给定事件而不离开频道,可以使用 stopListening 方法:

js
Echo.private(`orders.${this.order.id}`)
    .stopListening('OrderShipmentStatusUpdated');

离开频道

要离开频道,可以在 Echo 实例上调用 leaveChannel 方法:

js
Echo.leaveChannel(`orders.${this.order.id}`);

如果你想离开频道及其关联的私有和 presence 频道,可以调用 leave 方法:

js
Echo.leave(`orders.${this.order.id}`);

命名空间

你可能已经注意到,在上面的示例中,我们没有为事件类指定完整的 App\Events 命名空间。这是因为 Echo 会自动假设事件位于 App\Events 命名空间中。但是,你可以在实例化 Echo 时通过传递 namespace 配置选项来配置根命名空间:

js
window.Echo = new Echo({
    broadcaster: 'pusher',
    // ...
    namespace: 'App.Other.Namespace'
});

或者,在使用 Echo 订阅事件类时,可以在事件类前加上 . 前缀。这将允许你始终指定完全限定的类名:

js
Echo.channel('orders')
    .listen('.Namespace\\Event\\Class', (e) => {
        // ...
    });

使用 React 或 Vue

Laravel Echo 包含 React 和 Vue 钩子,使监听事件变得轻松。要开始,请调用 useEcho 钩子,它用于监听私有事件。useEcho 钩子将在消费组件卸载时自动离开频道:

js
import { useEcho } from "@laravel/echo-react";

useEcho(
    `orders.${orderId}`,
    "OrderShipmentStatusUpdated",
    (e) => {
        console.log(e.order);
    },
);
vue
<script setup lang="ts">
import { useEcho } from "@laravel/echo-vue";

useEcho(
    `orders.${orderId}`,
    "OrderShipmentStatusUpdated",
    (e) => {
        console.log(e.order);
    },
);
</script>

你可以通过向 useEcho 提供事件数组来监听多个事件:

js
useEcho(
    `orders.${orderId}`,
    ["OrderShipmentStatusUpdated", "OrderShipped"],
    (e) => {
        console.log(e.order);
    },
);

你还可以指定广播事件负载数据的形状,提供更好的类型安全性和编辑便利性:

ts
type OrderData = {
    order: {
        id: number;
        user: {
            id: number;
            name: string;
        };
        created_at: string;
    };
};

useEcho<OrderData>(`orders.${orderId}`, "OrderShipmentStatusUpdated", (e) => {
    console.log(e.order.id);
    console.log(e.order.user.id);
});

useEcho 钩子将在消费组件卸载时自动离开频道;但是,你可以利用返回的函数在必要时手动停止/开始监听频道:

js
import { useEcho } from "@laravel/echo-react";

const { leaveChannel, leave, stopListening, listen } = useEcho(
    `orders.${orderId}`,
    "OrderShipmentStatusUpdated",
    (e) => {
        console.log(e.order);
    },
);

// 停止监听但不离开频道...
stopListening();

// 再次开始监听...
listen();

// 离开频道...
leaveChannel();

// 离开频道及其关联的私有和 presence 频道...
leave();
vue
<script setup lang="ts">
import { useEcho } from "@laravel/echo-vue";

const { leaveChannel, leave, stopListening, listen } = useEcho(
    `orders.${orderId}`,
    "OrderShipmentStatusUpdated",
    (e) => {
        console.log(e.order);
    },
);

// 停止监听但不离开频道...
stopListening();

// 再次开始监听...
listen();

// 离开频道...
leaveChannel();

// 离开频道及其关联的私有和 presence 频道...
leave();
</script>

连接到公共频道

要连接到公共频道,可以使用 useEchoPublic 钩子:

js
import { useEchoPublic } from "@laravel/echo-react";

useEchoPublic("posts", "PostPublished", (e) => {
    console.log(e.post);
});
vue
<script setup lang="ts">
import { useEchoPublic } from "@laravel/echo-vue";

useEchoPublic("posts", "PostPublished", (e) => {
    console.log(e.post);
});
</script>

连接到 Presence 频道

要连接到 presence 频道,可以使用 useEchoPresence 钩子:

js
import { useEchoPresence } from "@laravel/echo-react";

useEchoPresence("posts", "PostPublished", (e) => {
    console.log(e.post);
});
vue
<script setup lang="ts">
import { useEchoPresence } from "@laravel/echo-vue";

useEchoPresence("posts", "PostPublished", (e) => {
    console.log(e.post);
});
</script>

连接状态

你可以使用 useConnectionStatus 钩子检索当前 WebSocket 连接状态,它提供在连接状态更改时自动更新的响应式状态:

js
import { useConnectionStatus } from "@laravel/echo-react";

function ConnectionIndicator() {
    const status = useConnectionStatus();

    return <div>Connection: {status}</div>;
}
vue
<script setup lang="ts">
import { useConnectionStatus } from "@laravel/echo-vue";

const status = useConnectionStatus();
</script>

<template>
    <div>Connection: {{ status }}</div>
</template>

可能的状态值包括:

  • connected - 成功连接到 WebSocket 服务器。
  • connecting - 初始连接尝试正在进行中。
  • reconnecting - 断开连接后尝试重新连接。
  • disconnected - 未连接且未尝试重新连接。
  • failed - 连接失败且不会重试。

Presence 频道

Presence 频道建立在私有频道的安全性之上,同时公开了了解谁订阅了该频道的额外功能。这使得构建强大的协作应用程序功能变得容易,例如当另一个用户正在查看同一页面时通知用户或列出聊天室的成员。

授权 Presence 频道

所有 presence 频道也是私有频道;因此,用户必须被授权访问它们。但是,在为 presence 频道定义授权回调时,如果用户被授权加入频道,你不会返回 true。相反,你应该返回有关用户的数据数组。

授权回调返回的数据将提供给 JavaScript 应用程序中的 presence 频道事件监听器。如果用户未被授权加入 presence 频道,你应该返回 falsenull

php
use App\Models\User;

Broadcast::channel('chat.{roomId}', function (User $user, int $roomId) {
    if ($user->canJoinRoom($roomId)) {
        return ['id' => $user->id, 'name' => $user->name];
    }
});

加入 Presence 频道

要加入 presence 频道,可以使用 Echo 的 join 方法。join 方法将返回一个 PresenceChannel 实现,除了公开 listen 方法外,还允许你订阅 herejoiningleaving 事件。

js
Echo.join(`chat.${roomId}`)
    .here((users) => {
        // ...
    })
    .joining((user) => {
        console.log(user.name);
    })
    .leaving((user) => {
        console.log(user.name);
    })
    .error((error) => {
        console.error(error);
    });

一旦成功加入频道,here 回调将立即执行,并将接收包含当前订阅该频道的所有其他用户信息的数组。当新用户加入频道时,joining 方法将被执行;当用户离开频道时,leaving 方法将被执行。当认证端点返回非 200 的 HTTP 状态码或解析返回的 JSON 时出现问题时,error 方法将被执行。

广播到 Presence 频道

Presence 频道可以像公共或私有频道一样接收事件。使用聊天室的示例,我们可能希望将 NewMessage 事件广播到房间的 presence 频道。为此,我们将从事件的 broadcastOn 方法返回一个 PresenceChannel 实例:

php
/**
 * 获取事件应广播到的频道。
 *
 * @return array<int, \Illuminate\Broadcasting\Channel>
 */
public function broadcastOn(): array
{
    return [
        new PresenceChannel('chat.'.$this->message->room_id),
    ];
}

与其他事件一样,你可以使用 broadcast 辅助函数和 toOthers 方法将当前用户排除在接收广播之外:

php
broadcast(new NewMessage($message));

broadcast(new NewMessage($message))->toOthers();

与其他类型的事件一样,你可以使用 Echo 的 listen 方法监听发送到 presence 频道的事件:

js
Echo.join(`chat.${roomId}`)
    .here(/* ... */)
    .joining(/* ... */)
    .leaving(/* ... */)
    .listen('NewMessage', (e) => {
        // ...
    });

模型广播

WARNING

在阅读以下关于模型广播的文档之前,我们建议你熟悉 Laravel 模型广播服务的一般概念以及如何手动创建和监听广播事件。

当应用程序的 Eloquent 模型被创建、更新或删除时,广播事件是很常见的。当然,这可以通过为 Eloquent 模型状态更改定义自定义事件并使用 ShouldBroadcast 接口标记这些事件来轻松完成。

但是,如果你没有在应用程序中将这些事件用于任何其他目的,仅为广播它们而创建事件类可能会很繁琐。为了解决这个问题,Laravel 允许你指示 Eloquent 模型自动广播其状态更改。

要开始,你的 Eloquent 模型应该使用 Illuminate\Database\Eloquent\BroadcastsEvents trait。此外,模型应该定义一个 broadcastOn 方法,该方法将返回模型事件应广播到的频道数组:

php
<?php

namespace App\Models;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Database\Eloquent\BroadcastsEvents;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Post extends Model
{
    use BroadcastsEvents, HasFactory;

    /**
     * 获取帖子所属的用户。
     */
    public function user(): BelongsTo
    {
        return $this->belongsTo(User::class);
    }

    /**
     * 获取模型事件应广播到的频道。
     *
     * @return array<int, \Illuminate\Broadcasting\Channel|\Illuminate\Database\Eloquent\Model>
     */
    public function broadcastOn(string $event): array
    {
        return [$this, $this->user];
    }
}

一旦你的模型包含此 trait 并定义了其广播频道,它将在模型实例被创建、更新、删除、软删除或恢复时自动开始广播事件。

此外,你可能已经注意到 broadcastOn 方法接收一个字符串 $event 参数。此参数包含模型上发生的事件类型,其值为 createdupdateddeletedtrashedrestored。通过检查此变量的值,你可以确定模型应该为特定事件广播到哪些频道(如果有):

php
/**
 * 获取模型事件应广播到的频道。
 *
 * @return array<string, array<int, \Illuminate\Broadcasting\Channel|\Illuminate\Database\Eloquent\Model>>
 */
public function broadcastOn(string $event): array
{
    return match ($event) {
        'deleted' => [],
        default => [$this, $this->user],
    };
}

自定义模型广播事件创建

有时,你可能希望自定义 Laravel 如何创建底层模型广播事件。你可以通过在 Eloquent 模型上定义 newBroadcastableEvent 方法来完成此操作。此方法应返回一个 Illuminate\Database\Eloquent\BroadcastableModelEventOccurred 实例:

php
use Illuminate\Database\Eloquent\BroadcastableModelEventOccurred;

/**
 * 为模型创建新的可广播模型事件。
 */
protected function newBroadcastableEvent(string $event): BroadcastableModelEventOccurred
{
    return (new BroadcastableModelEventOccurred(
        $this, $event
    ))->dontBroadcastToCurrentUser();
}

模型广播约定

频道约定

你可能已经注意到,上面模型示例中的 broadcastOn 方法没有返回 Channel 实例。相反,直接返回了 Eloquent 模型。如果你的模型的 broadcastOn 方法返回 Eloquent 模型实例(或包含在方法返回的数组中),Laravel 将使用模型的类名和主键标识符作为频道名称自动为模型实例化私有频道实例。

因此,id1App\Models\User 模型将被转换为名称为 App.Models.User.1Illuminate\Broadcasting\PrivateChannel 实例。当然,除了从模型的 broadcastOn 方法返回 Eloquent 模型实例外,你还可以返回完整的 Channel 实例,以便完全控制模型的频道名称:

php
use Illuminate\Broadcasting\PrivateChannel;

/**
 * 获取模型事件应广播到的频道。
 *
 * @return array<int, \Illuminate\Broadcasting\Channel>
 */
public function broadcastOn(string $event): array
{
    return [
        new PrivateChannel('user.'.$this->id)
    ];
}

如果你计划从模型的 broadcastOn 方法显式返回频道实例,可以将 Eloquent 模型实例传递给频道的构造函数。这样做时,Laravel 将使用上面讨论的模型频道约定将 Eloquent 模型转换为频道名称字符串:

php
return [new Channel($this->user)];

如果你需要确定模型的频道名称,可以在任何模型实例上调用 broadcastChannel 方法。例如,此方法为 id1App\Models\User 模型返回字符串 App.Models.User.1

php
$user->broadcastChannel();

事件约定

由于模型广播事件与应用程序的 App\Events 目录中的「实际」事件没有关联,因此它们根据约定被分配名称和负载。Laravel 的约定是使用模型的类名(不包括命名空间)和触发广播的模型事件名称广播事件。

因此,例如,对 App\Models\Post 模型的更新将向客户端应用程序广播一个名为 PostUpdated 的事件,其负载如下:

json
{
    "model": {
        "id": 1,
        "title": "My first post"
        ...
    },
    ...
    "socket": "someSocketId"
}

删除 App\Models\User 模型将广播一个名为 UserDeleted 的事件。

如果你愿意,可以通过向模型添加 broadcastAsbroadcastWith 方法来定义自定义广播名称和负载。这些方法接收正在发生的模型事件/操作的名称,允许你为每个模型操作自定义事件的名称和负载。如果 broadcastAs 方法返回 null,Laravel 将在广播事件时使用上面讨论的模型广播事件名称约定:

php
/**
 * 模型事件的广播名称。
 */
public function broadcastAs(string $event): string|null
{
    return match ($event) {
        'created' => 'post.created',
        default => null,
    };
}

/**
 * 获取模型要广播的数据。
 *
 * @return array<string, mixed>
 */
public function broadcastWith(string $event): array
{
    return match ($event) {
        'created' => ['title' => $this->title],
        default => ['model' => $this],
    };
}

监听模型广播

一旦你将 BroadcastsEvents trait 添加到模型并定义了模型的 broadcastOn 方法,你就可以开始在客户端应用程序中监听广播的模型事件。在开始之前,你可能希望查阅有关监听事件的完整文档。

首先,使用 private 方法检索频道实例,然后调用 listen 方法监听指定事件。请注意,你不应该在 listen 方法中指定模型的命名空间。由于模型广播事件与应用程序的 App\Events 目录中的「实际」事件没有关联,因此它们根据约定被分配名称:

js
Echo.private(`App.Models.User.${userId}`)
    .listen('.PostUpdated', (e) => {
        // ...
    });

客户端事件

有时你可能希望将事件广播给其他连接的客户端,而根本不触及你的 Laravel 应用程序。这对于「输入中」通知等事情特别有用,你希望通知用户另一个用户正在给定屏幕上输入消息。

要广播客户端事件,可以使用 Echo 的 whisper 方法:

js
Echo.private(`chat.${roomId}`)
    .whisper('typing', {
        name: this.user.name,
    });

要监听客户端事件,可以使用 listenForWhisper 方法:

js
Echo.private(`chat.${roomId}`)
    .listenForWhisper('typing', (e) => {
        console.log(e.name);
    });

通知

通过将事件广播与通知配对,你的 JavaScript 应用程序可以在不刷新页面的情况下接收新通知。首先,请务必阅读有关使用广播通知频道的文档。

定义使用广播频道的通知后,你可以使用 Laravel Echo 的 notification 方法监听广播事件。请记住,频道名称应与接收通知的实体类名称匹配:

js
Echo.private(`App.Models.User.${userId}`)
    .notification((notification) => {
        console.log(notification.type);
    });

或者,你可以通过在频道实例上调用 listenToNotification 方法来专门监听通知:

js
Echo.private(`App.Models.User.${userId}`)
    .listenToNotification((notification) => {
        console.log(notification.type);
    });

自定义通知频道

如果你想自定义实体在特定频道上接收其广播通知,可以在实体上定义一个 receivesBroadcastNotificationsOn 方法:

php
<?php

namespace App\Models;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * 用户接收通知广播的频道。
     */
    public function receivesBroadcastNotificationsOn(): string
    {
        return 'users.'.$this->id;
    }
}