本文详细阐述了如何在Laravel后端和React前端之间实现实时通知。通过集成Pusher这一实时事件广播库，开发者可以轻松地从Laravel发送事件，并在React应用中即时接收并处理这些通知，从而避免了传统服务工作者在某些场景下的复杂性，确保了应用间的即时通信。
引言：实时通知的挑战与Pusher的引入
在现代web应用中，实时通知是提升用户体验的关键功能之一。当用户在react前端与应用交互时，若能即时收到来自laravel后端的更新或消息，将大大增强应用的动态性和响应性。传统的web push api结合service worker固然强大，允许在浏览器关闭时也能发送系统级通知，但其配置和调试相对复杂，尤其是在应用内需要快速、频繁地进行实时通信时，可能并非最直接的解决方案。
原问题中提到的Service Worker中self的no-restricted-globals错误，通常是由于ESLint配置限制了在非Service Worker全局上下文中使用self，或者Service Worker本身未能正确注册或激活，导致push事件监听器没有被触发。在这种场景下，一个更简洁、专注于应用内实时事件广播的方案——Pusher，可以有效解决Laravel与React之间的即时通信需求。Pusher作为一个托管的实时API服务，简化了WebSocket的复杂性，使开发者能够轻松实现服务器到客户端的实时数据推送。
Laravel后端配置：事件广播与Pusher集成
要在Laravel中实现实时通知，首先需要配置Pusher作为广播驱动。
1. 安装与配置Pusher驱动
通过Composer安装Pusher PHP SDK：
composer require pusher/pusher-php-server
接下来，在项目的.env文件中配置Pusher的相关凭据。这些凭据可以在Pusher仪表盘中获取。
BROADCAST_DRIVER=pusherPUSHER_APP_ID=your-pusher-app-idPUSHER_APP_KEY=your-pusher-app-keyPUSHER_APP_SECRET=your-pusher-app-secretPUSHER_APP_CLUSTER=your-pusher-cluster # 例如：ap2, mt1, us2MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
确保在config/app.php文件中，AppProvidersBroadcastServiceProvider服务提供者没有被注释掉，它是Laravel事件广播功能的核心。
// config/app.php'providers' => [ // ... AppProvidersBroadcastServiceProvider::class,],
2. 创建可广播事件
Laravel的事件广播功能允许你将应用事件推送到WebSocket连接。首先，创建一个新的事件类，并使其实现ShouldBroadcast接口。
php artisan make:event NotificationEvent
编辑生成的app/Events/NotificationEvent.php文件，定义事件将广播到的频道以及携带的数据。
message = $message; $this->userId = $userId; } /** * 获取事件应该广播到的频道。 * * @return IlluminateBroadcastingChannel|array */ public function broadcastOn() { // 广播到一个公共频道 'notifyChannel' // 如果需要针对特定用户，可以使用 PrivateChannel 或 PresenceChannel return new Channel('notifyChannel'); } /** * 获取事件的广播名称。 * * @return string */ public function broadcastAs() { return 'new-notification'; // 客户端将监听这个事件名 } /** * 获取广播有效载荷。 * * @return array */ public function broadcastWith() { return [ 'title' => '新通知', 'body' => $this->message, 'userId' => $this->userId, 'timestamp' => now()->toDateTimeString(), ]; }}
在上述代码中：
ShouldBroadcast 接口是必须的。broadcastOn() 方法定义了事件将被广播到的频道。这里使用了Channel(‘notifyChannel’)，表示一个公共频道。如果需要发送给特定用户，可以考虑使用PrivateChannel并结合认证。broadcastAs() 方法定义了客户端监听的事件名称，这里是new-notification。broadcastWith() 方法定义了事件广播时携带的数据，客户端将接收到这个数组。
3. 触发事件
在Laravel控制器或任何业务逻辑中，你可以使用event()辅助函数或Event Facade来触发这个事件。
修改原问题中的PushController，将其push方法调整为触发Pusher事件：
json(['status' => 'success', 'message' => 'Notification broadcasted.']); } // ... store 方法保持不变，它用于Web Push API的订阅}
现在，当调用PushController的push方法时，NotificationEvent将被触发，并通过Pusher服务广播到notifyChannel频道。
React前端集成：监听Pusher事件
在Laravel后端配置完成后，我们需要在React应用中安装Pusher JavaScript客户端并监听相应的事件。
1. 安装Pusher JavaScript客户端
在你的React项目根目录下，通过npm或yarn安装Pusher客户端：
npm install --save pusher-js# 或者yarn add pusher-js
2. 在React组件中监听事件
在需要接收通知的React组件中，使用useEffect钩子来初始化Pusher连接，订阅频道，并绑定事件。
import React, { useEffect } from 'react';import Pusher from 'pusher-js';function NotificationListener() { useEffect(() => { // 确保Pusher APP KEY和CLUSTER从环境变量中获取，以避免硬编码 // 在Laravel项目中，通常通过MIX_PUSHER_APP_KEY等环境变量在webpack中注入 const pusherAppKey = process.env.MIX_PUSHER_APP_KEY || 'your-pusher-key'; // 替换为你的Pusher App Key const pusherAppCluster = process.env.MIX_PUSHER_APP_CLUSTER || 'ap2'; // 替换为你的Pusher Cluster if (!pusherAppKey || !pusherAppCluster) { console.error("Pusher APP_KEY or CLUSTER is not defined."); return; } // 初始化Pusher实例 var pusher = new Pusher(pusherAppKey, { cluster: pusherAppCluster, encrypted: true, // 推荐使用加密连接 }); // 订阅 'notifyChannel' 频道 var channel = pusher.subscribe('notifyChannel'); // 绑定 'new-notification' 事件（与Laravel事件的broadcastAs()方法对应） channel.bind('new-notification', function (data) { // 接收到通知数据 console.log('Received real-time notification:', data); alert(`新通知: ${data.title} - ${data.body}`); // 简单地使用alert显示通知 // 在实际应用中，你可能会更新React state来显示一个更美观的通知组件 // 例如：setNotifications(prev => [...prev, data]); }); // 清理函数：组件卸载时取消订阅，避免内存泄漏 return () => { channel.unbind_all(); // 解绑所有事件监听器 pusher.unsubscribe('notifyChannel'); // 取消订阅频道 pusher.disconnect(); // 断开Pusher连接 }; }, []); // 空依赖数组表示只在组件挂载和卸载时执行 return ( {/* 你的React组件UI */} 实时通知监听器
正在监听来自Laravel的实时通知...
{/* 原始问题中的测试按钮，现在可以触发Laravel的push方法 */} );}export default NotificationListener;
现在，当你在Laravel后端触发NotificationEvent时，React组件将通过Pusher即时接收到new-notification事件，并执行相应的回调函数（例如弹出一个alert）。
注意事项与最佳实践
Pusher密钥安全： PUSHER_APP_KEY和PUSHER_APP_CLUSTER可以在前端公开，但PUSHER_APP_SECRET必须严格保密，只能在后端使用。对于私有频道或存在频道，需要通过Laravel后端提供一个授权端点来验证用户订阅频道的权限。频道类型：公共频道 (Public Channels)： 任何客户端都可以订阅和监听，如new Channel(‘notifyChannel’)。私有频道 (Private Channels)： 频道名前缀为private-，需要用户认证才能订阅。例如new PrivateChannel(‘user.’ . $userId)。存在频道 (Presence Channels)： 频道名前缀为presence-，在私有频道的基础上，还允许客户端获取频道内当前在线成员列表。错误处理： 在Pusher客户端中，可以监听连接错误、订阅失败等事件，以便在生产环境中更好地处理异常情况。资源清理： 务必在React组件卸载时取消Pusher的订阅和连接，以避免内存泄漏和不必要的网络开销。useEffect的返回函数是执行清理操作的最佳位置。与Service Worker Push API的区分：Pusher (或Laravel Echo): 主要用于实现应用内部的实时数据同步和事件广播。用户必须打开浏览器并访问你的应用才能接收到通知。它不依赖于浏览器的系统级推送通知机制。Service Worker Push API: 允许在用户关闭浏览器或未访问你的网站时，也能接收到由服务器（通过Web Push协议）发送的系统级通知。原问题中的self错误和未触发的push事件监听器，正是与此机制相关。如果你的需求是即使应用未打开也能收到通知，那么Service Worker是不可或缺的，但Pusher可以作为后端触发Service Worker推送的机制（即Pusher通知后端，后端再发送Web Push）。本教程侧重于通过Pusher实现应用内的实时事件广播，这通常是解决“Laravel到React应用”实时通知最直接和简单的方法。Laravel Echo： Laravel官方提供了Laravel Echo，这是一个JavaScript库，封装了Pusher或其他WebSocket客户端（如Socket.io），提供了更简洁、更符合Laravel风格的API来监听事件。在大型项目中，推荐使用Laravel Echo来管理事件监听。
总结
通过Pusher，我们成功地解决了Laravel后端向React前端发送实时通知的问题。这种方案利用了成熟的实时通信服务，简化了开发流程，并提供了高度可靠的事件广播机制。相较于直接处理Service Worker的Web Push API，Pusher在实现应用内实时通信方面更具优势，且易于集成和维护。开发者应根据具体需求，权衡不同实时通知方案的利弊，选择最适合自身项目的技术栈。
以上就是Laravel与React实时通知：使用Pusher实现高效事件广播的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1323342.html
微信扫一扫 
支付宝扫一扫 
