首先配置 Laravel 广播驱动为 Pusher，设置 .env 和 broadcasting.php；接着创建实现 ShouldBroadcast 接口的事件类 MessageSent，指定广播频道和事件名称；然后在前端引入 Pusher 和 Laravel Echo JS 库，初始化 Echo 实例并监听 chat 频道上的 message.sent 事件，收到消息后更新页面内容；最后在控制器中触发事件，通过 Pusher 推送实现实时更新。需确保密钥、频道类型和事件名一致以避免监听失败。
Laravel 使用 Laravel Echo 和 Pusher 实现前端实时更新，主要依赖广播事件和 WebSocket 通信。通过 Pusher 服务将后端触发的事件推送到客户端，前端借助 Laravel Echo 监听这些事件并更新页面内容，无需刷新即可实现数据实时同步。
配置 Laravel 广播与 Pusher
要使用 Pusher，先在 .env 文件中设置 Pusher 的凭证：
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
确保 config/broadcasting.php 中的 pusher 配置正确，并开启广播服务提供者：在 config/app.php 中取消注释：
AppProvidersBroadcastServiceProvider::class,
创建广播事件
使用 Artisan 命令生成事件类：
立即学习“前端免费学习笔记（深入）”；
php artisan make:event MessageSent
编辑事件文件，实现 ShouldBroadcast 接口，指定广播频道：
app/Events/MessageSent.php
use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;
class MessageSent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn()
{
return new Channel(‘chat’);
}
public function broadcastAs()
{
return ‘message.sent’;
}
}
前端引入 Laravel Echo 和 Pusher JS
在页面中引入必要的 JS 库。可通过 CDN 或 npm 安装：
初始化 Laravel Echo 实例，连接 Pusher：
window.Echo = new Echo({
broadcaster: ‘pusher’,
key: ‘your-pusher-key’,
cluster: ‘mt1’,
forceTLS: true
});
// 监听事件
Echo.channel(‘chat’)
.listen(‘message.sent’, (e) => {
console.log(e.message);
// 更新 DOM，例如追加消息
document.getElementById(‘messages’).innerHTML += ‘
‘;
});
触发事件测试实时更新
在控制器中触发事件，Pusher 会自动推送：
use AppEventsMessageSent;
public function sendMessage()
{
event(new MessageSent(‘Hello from Laravel!’));
return response()->json([‘status’ => ‘Message sent’]);
}
调用该接口后，前端会立即收到消息并执行更新操作。
基本上就这些。只要配置好广播驱动、定义事件、前端监听，就能实现页面实时更新。注意检查 Pusher 密钥、频道类型（public/private）和事件命名是否匹配，避免监听失败。
以上就是laravel怎么使用Laravel Echo和Pusher实现前端实时更新_laravel Echo+Pusher前端实时更新方法的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/193281.html
微信扫一扫 
支付宝扫一扫 
