广播
介绍
在许多现代 Web 应用程序中,WebSockets 用于实现实时的、实时更新的用户界面。当服务器上的某些数据更新时,通常会发送一条消息到 WebSocket 连接,以由客户端处理。WebSockets 提供了一种更有效的替代方法,可以连续轮询应用程序服务器以反映 UI 中应该反映的数据更改。
举个例子,假设你的应用程序能够将用户的数据导出为 CSV 文件并通过电子邮件发送给他们。 但是,创建这个 CSV 文件需要几分钟的时间,因此你选择在队列任务中创建和发送 CSV。当 CSV 文件已经创建并发送给用户后,我们可以使用事件广播来分发 App\Events\UserDataExported
事件,该事件由我们应用程序的 JavaScript 接收。一旦接收到事件,我们可以向用户显示消息,告诉他们他们的 CSV 已通过电子邮件发送给他们,而无需刷新页面。
为了帮助你构建此类特性,Laravel使得在WebSocket连接上“广播”你的服务端Laravel事件变得简单。广播你的Laravel事件允许你在你的服务端Laravel应用和客户端JavaScript应用之间共享相同的事件名称和数据。
广播背后的核心概念很简单:客户端在前端连接到命名通道,而你的Laravel应用在后端向这些通道广播事件。这些事件可以包含任何你想要向前端提供的其他数据。
支持的驱动程序
默认情况下,Laravel为你提供了两个服务端广播驱动程序可供选择:Pusher Channels 和 Ably。但是,社区驱动的包,如 laravel-websockets 和 soketi 提供了不需要商业广播提供者的其他广播驱动程序。
在深入了解事件广播之前,请确保已阅读Laravel的事件和侦听器文档。
服务端安装
为了开始使用Laravel的事件广播,我们需要在Laravel应用程序中进行一些配置,并安装一些包。
事件广播是通过服务端广播驱动程序实现的,该驱动程序广播你的Laravel事件,以便Laravel Echo(一个JavaScript库)可以在浏览器客户端中接收它们。不用担心 - 我们将逐步介绍安装过程的每个部分。
配置
所有应用程序的事件广播配置都存储在config/broadcasting.php
配置文件中。Laravel支持多个广播驱动程序:Pusher Channels、Redis和用于本地开发和调试的log
驱动程序。此外,还包括一个null
驱动程序,它允许你在测试期间完全禁用广播。config/broadcasting.php
配置文件中包含每个驱动程序的配置示例。
广播服务提供商
在广播任何事件之前,您首先需要注册 App\Providers\BroadcastServiceProvider
。在新的 Laravel 应用程序中,您只需要在 config/app.php
配置文件的 providers
数组中取消注释此提供程序即可。这个 BroadcastServiceProvider
包含了注册广播授权路由和回调所需的代码。
队列配置
您还需要配置和运行一个队列工作者。所有事件广播都是通过排队的作业完成的,以确保您的应用程序的响应时间不会受到广播事件的影响。
Pusher Channels
如果您计划使用Pusher Channels广播您的事件,您应该使用 Composer 包管理器安装 Pusher Channels PHP SDK:
composer require pusher/pusher-php-server
接下来,您应该在 config/broadcasting.php
配置文件中配置 Pusher Channels 凭据。此文件中已经包含了一个示例 Pusher Channels 配置,让您可以快速指定您的密钥、密钥、应用程序 ID。通常,这些值应该通过 PUSHER_APP_KEY
、PUSHER_APP_SECRET
和 PUSHER_APP_ID
环境变量 设置:
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-key
PUSHER_APP_SECRET=your-pusher-secret
PUSHER_APP_CLUSTER=mt1
config/broadcasting.php
文件的 pusher
配置还允许您指定 Channels 支持的其他 options
,例如集群。
接下来,您需要在您的 .env
文件中将广播驱动程序更改为 pusher
:
BROADCAST_DRIVER=pusher
最后,您已经准备好安装和配置Laravel Echo,它将在客户端接收广播事件。
开源的Pusher替代品
laravel-websockets和soketi软件包提供了适用于Laravel的Pusher兼容的WebSocket服务器。这些软件包允许您利用Laravel广播的全部功能,而无需商业WebSocket提供程序。有关安装和使用这些软件包的更多信息,请参阅我们的开源替代品文档。
Ably
下面的文档介绍了如何在“Pusher兼容”模式下使用Ably。然而,Ably团队推荐并维护一个广播器和Echo客户端,能够利用Ably提供的独特功能。有关使用Ably维护的驱动程序的更多信息,请参阅Ably的Laravel广播器文档。
如果您计划使用Ably广播您的事件,则应使用Composer软件包管理器安装Ably PHP SDK:
composer require ably/ably-php
接下来,您应该在config/broadcasting.php
配置文件中配置您的Ably凭据。该文件已经包含了一个示例Ably配置,允许您快速指定您的密钥。通常,此值应通过ABLY_KEY
环境变量进行设置:
ABLY_KEY=your-ably-key
Next, you will need to change your broadcast driver to ably
in your .env
file:
BROADCAST_DRIVER=ably
接下来,您需要在.env
文件中将广播驱动程序更改为ably
:
开源替代方案
PHP
laravel-websockets 是一个纯 PHP 的,与 Pusher 兼容的 Laravel WebSocket 包。该包允许您充分利用 Laravel 广播的功能,而无需商业 WebSocket 提供商。有关安装和使用此包的更多信息,请参阅其官方文档。
Node
Soketi 是一个基于 Node 的,与 Pusher 兼容的 Laravel WebSocket 服务器。在幕后,Soketi 利用 µWebSockets.js 来实现极端的可扩展性和速度。该包允许您充分利用 Laravel 广播的功能,而无需商业 WebSocket 提供商。有关安装和使用此包的更多信息,请参阅其官方文档。
客户端安装
Pusher Channels
Laravel Echo 是一个 JavaScript 库,可以轻松订阅通道并监听由服务器端广播驱动程序广播的事件。您可以通过 NPM 包管理器安装 Echo。在此示例中,我们还将安装 pusher-js
包,因为我们将使用 Pusher Channels 广播器:
npm install --save-dev laravel-echo pusher-js
安装 Echo 后,您可以在应用程序的 JavaScript 中创建一个新的 Echo 实例。一个很好的地方是在 Laravel 框架附带的 resources/js/bootstrap.js
文件的底部创建它。默认情况下,该文件中已包含一个示例 Echo 配置 - 您只需取消注释即可:
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
});
一旦您根据自己的需求取消注释并调整了 Echo 配置,就可以编译应用程序的资产:
npm run dev
要了解有关编译应用程序的 JavaScript 资产的更多信息,请参阅 Vite 上的文档。
使用现有的客户端实例
如果您已经有一个预配置的 Pusher Channels 客户端实例,并希望 Echo 利用它,您可以通过 client
配置选项将其传递给 Echo:
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
const options = {
broadcaster: 'pusher',
key: 'your-pusher-channels-key'
}
window.Echo = new Echo({
...options,
client: new Pusher(options.key, options)
});
Ably
下面的文档讨论如何在“Pusher 兼容性”模式下使用 Ably。但是,Ably 团队推荐和维护了一个广播器和 Echo 客户端,可以利用 Ably 提供的独特功能。有关使用由 Ably 维护的驱动程序的更多信息,请查看 Ably 的 Laravel 广播器文档。
Laravel Echo 是一个 JavaScript 库,可以轻松订阅通道并侦听服务器端广播驱动程序广播的事件。您可以通过 NPM 包管理器安装 Echo。在本示例中,我们还将安装 pusher-js
包。
您可能会想为什么我们要安装 pusher-js
JavaScript 库,即使我们使用 Ably 来广播事件。幸运的是,Ably 包括 Pusher 兼容性模式,让我们可以在客户端应用程序中使用 Pusher 协议来侦听事件:
npm install --save-dev laravel-echo pusher-js
在继续之前,你应该在你的 Ably 应用设置中启用 Pusher 协议支持。你可以在你的 Ably 应用设置仪表板的“协议适配器设置”部分中启用此功能。
安装 Echo 后,你可以在应用的 JavaScript 中创建一个新的 Echo 实例。一个很好的地方是在 Laravel 框架附带的 resources/js/bootstrap.js
文件底部。默认情况下,此文件中已包含一个示例 Echo 配置;但是,bootstrap.js
文件中的默认配置是为 Pusher 设计的。你可以复制以下配置来将配置转换为 Ably:
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,
});
请注意,我们的 Ably Echo 配置引用了一个 VITE_ABLY_PUBLIC_KEY
环境变量。该变量的值应该是你的 Ably 公钥。你的公钥是出现在 Ably 密钥的 :
字符之前的部分。
一旦你根据需要取消注释并调整 Echo 配置,你可以编译应用的资产:
npm run dev
要了 解有关编译应用程序的 JavaScript 资产的更多信息,请参阅 Vite 的文档。
概念概述
Laravel 的事件广播允许你使用基于驱动程序的 WebSocket 方法,将服务器端 Laravel 事件广播到客户端的 JavaScript 应用程序。目前,Laravel 附带了 Pusher Channels 和 Ably 驱动程序。可以使用 Laravel Echo JavaScript 包轻松地在客户端消耗这些事件。
事件通过“通道”广播,可以指定为公共或私有。任何访问您的应用程序的用户都可以订阅公共频道,无需进行身份验证或授权;但是,要订阅私有频道,用户必须经过身份验证和授权以便监听该频道。
如果您想探索 Pusher 的开源替代品,请查看开源替代品。