Laravel Echo用法？实时监听如何实现？

35次阅读

Laravel Echo通过WebSocket实现客户端实时监听服务器事件，需安装default'>laravel-echo及WebSocket服务（如Pusher或Laravel Websockets），配置default'>default'>.env和default'>broadcasting.php，创建实现ShouldBroadcast的事件类并触发，前端引入Echo监听频道，私有频道需在routes/channels.php定义授权逻辑，高并发下可采用水平扩展、Redis队列、数据库优化等策略，支持多种WebSocket服务，调试可借助浏览器工具、Laravel日志、Telescope等手段。

Laravel Echo 是个好东西，它简化了在客户端监听服务器端事件的流程。简单来说，就是让你的网页可以实时接收服务器推送的消息，比如用户注册成功、订单状态更新等等。实现实时监听，核心在于 WebSocket。

解决方案

Laravel Echo 的用法可以概括为以下几个步骤：

安装必要的包：

首先，你需要在你的 Laravel 项目中安装

default'>laravel-echo

和一个 WebSocket 服务端实现。常用的有

default'>pusher/pusher-php-server

或者

default'>beyondcode/laravel-default'>websockets

。

composer require default'>pusher/pusher-php-server npm install --save default'>laravel-echo pusher-js # 或者如果你选择 Laravel Websockets composer require default'>beyondcode/laravel-default'>websockets npm install --save default'>laravel-echo laravel-default'>websockets-client

配置

default'>default'>.env

文件：

根据你选择的 WebSocket 服务端，配置

default'>default'>.env

文件。如果是 Pusher，你需要 Pusher 的 app ID、key 和 secret。如果是 Laravel Websockets，你需要配置

default'>BROADCAST_DRIVER

为

default'>websockets

。

// Pusher 示例 default'>BROADCAST_DRIVER=pusher PUSHER_APP_ID=your-app-id PUSHER_APP_KEY=your-app-key PUSHER_APP_SECRET=your-app-secret PUSHER_APP_CLUSTER=mt1  // Laravel Websockets 示例 default'>BROADCAST_DRIVER=default'>websockets

配置

default'>config/default'>broadcasting.php

：

确保

default'>broadcasting.php

文件中的

default

设置为你在

default'>default'>.env

文件中配置的广播驱动。

启动 WebSocket 服务器：

如果是 Pusher，你不需要自己启动服务器。如果是 Laravel Websockets，你需要运行以下 Artisan 命令：
```
php artisan default'>websockets:serve
```

在 Laravel 中广播事件：

创建一个事件类，并让它实现

ShouldBroadcast

接口。在事件的

broadcastOn

方法中，指定要广播的频道。

<?php  namespace AppEvents;  use IlluminateBroadcastingChannel; use IlluminateBroadcastingInteractsWithSockets; use IlluminateBroadcastingPresenceChannel; use IlluminateBroadcastingPrivateChannel; use IlluminateContractsBroadcastingShouldBroadcast; use IlluminateFoundationEventsDispatchable; use IlluminateQueueSerializesModels;  class UserRegistered implements ShouldBroadcast {     use Dispatchable, InteractsWithSockets, SerializesModels;      public $user;      public function __construct($user)     {         $this->user = $user;     }      public function broadcastOn()     {         return new Channel('user-registered'); // 公共频道         // 或者使用私有频道，需要授权         // return new PrivateChannel('user.' . $this->user->id);     } }

然后在你的代码中，使用

event()

函数触发事件：

use AppEventsUserRegistered;  $user = User::create($request->all()); event(new UserRegistered($user));

在前端监听事件：

在你的 JavaScript 代码中，使用 Laravel Echo 监听事件。

import Echo from 'default'>laravel-echo';  window.Pusher = require('pusher-js');  window.Echo = new Echo({     broadcaster: 'pusher',     key: processdefault'>default'>.env.MIX_PUSHER_APP_KEY,     cluster: processdefault'>default'>.env.MIX_PUSHER_APP_CLUSTER,     forceTLS: true });  Echo.channel('user-registered') // 公共频道     .listen('UserRegistered', (e) => {         console.log('New user registered:', e.user);     });  // 或者监听私有频道，需要授权 // Echo.private('user.' + userId) //     .listen('UserRegistered', (e) => { //         console.log('New user registered:', e.user); //     });

注意: 如果你使用私有频道，你需要配置授权路由。在

routes/channels.php

文件中定义授权逻辑。

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

Laravel Echo 如何处理授权？

Laravel Echo 提供了方便的授权机制，特别是对于私有频道和存在频道。当你尝试监听一个私有频道或存在频道时，Laravel Echo 会向你的 Laravel 应用发送一个 POST 请求到

/broadcasting/auth

路由。你需要定义这个路由，并在其中验证用户是否有权限监听该频道。

在

routes/channels.php

文件中，你可以定义频道授权逻辑。例如：

Broadcast::channel('chat.{roomId}', function ($user, $roomId) {     return $user->canJoinRoom($roomId); });

在这个例子中，

$user

是当前登录的用户，

$roomId

是频道参数。

$user->canJoinRoom($roomId)

方法应该返回

true

如果用户有权限加入该房间，否则返回

false

。

如何处理高并发场景下的实时消息推送？

VisDoc

AI文生图表工具

29

查看详情

高并发是实时应用需要重点考虑的问题。以下是一些可以考虑的策略：

水平扩展 WebSocket 服务器： 使用负载均衡器将客户端连接分发到多个 WebSocket 服务器上，可以有效提高系统的并发处理能力。
使用 Redis 作为消息队列： 当事件发生时，将事件数据推送到 Redis 队列中，然后由多个消费者异步处理这些事件，并将消息推送到 WebSocket 服务器。这样可以避免事件处理阻塞 WebSocket 连接。
优化数据库查询： 实时消息推送通常需要从数据库中读取数据。确保你的数据库查询已经过优化，例如使用索引、缓存等。
使用连接池： 频繁地创建和销毁数据库连接会消耗大量资源。使用连接池可以避免这种情况，提高数据库访问效率。
避免广播不必要的数据： 只广播客户端需要的数据，减少网络传输量。
使用二进制协议： 与文本协议相比，二进制协议可以更有效地传输数据，减少网络开销。

Laravel Echo 和 Pusher 的关系是什么？可以使用其他 WebSocket 服务吗？

Laravel Echo 本身并不是一个 WebSocket 服务器，它只是一个 JavaScript 库，用于简化在客户端监听服务器端事件的流程。 Pusher 是一个第三方 WebSocket 服务提供商，Laravel Echo 可以与 Pusher 集成，使用 Pusher 提供的 WebSocket 服务。

除了 Pusher，你还可以使用其他的 WebSocket 服务，例如：

Laravel Websockets： 一个纯 PHP 的 WebSocket 服务器，可以让你在自己的服务器上运行 WebSocket 服务。
Socket.IO： 一个流行的 JavaScript WebSocket 库，也可以与 Laravel 集成。
Ably： 另一个第三方 WebSocket 服务提供商，提供类似 Pusher 的服务。

选择哪个 WebSocket 服务取决于你的具体需求和预算。 Pusher 和 Ably 提供了免费套餐，但有连接数和消息数的限制。 Laravel Websockets 可以让你完全控制 WebSocket 服务，但需要自己维护服务器。

如何调试 Laravel Echo 实时消息推送？

调试实时消息推送可能会比较棘手，因为涉及到客户端、服务器端和 WebSocket 服务器之间的通信。以下是一些调试技巧：

使用浏览器的开发者工具： 打开浏览器的开发者工具，查看 WebSocket 连接的状态、发送和接收的消息。
查看 Laravel 日志： 查看 Laravel 的日志文件，看看是否有任何错误或异常。
使用

dd()

函数： 在 Laravel 代码中使用
```
dd()
```
函数，可以输出变量的值，帮助你调试代码。
使用 Pusher 的 Debug 控制台： 如果你使用 Pusher，可以使用 Pusher 提供的 Debug 控制台，查看 WebSocket 连接的状态、发送和接收的消息。
使用 Laravel Telescope： Laravel Telescope 是一个强大的调试工具，可以记录所有的请求、查询、日志等等。它可以帮助你找到问题所在。
简化问题： 尝试将问题简化，例如只广播一个简单的事件，看看是否能够正常工作。如果可以，再逐步增加复杂度，直到找到问题所在。