自从 Laravel11 发布了 Reverb 之后你有没有发现很多 laravel+swoole 的库都不更新了,包括我之前用过的比较活跃的 laravel-s,只能好好看看官方包怎么用了,不然民间开源不更新后面想用到双工协议类的业务就很棘手了。
官方文档 广播系统 已经写的很清楚如何新建 Channel ,派发 Event,和 Web 前端的 laravel-echo 来监听 channel-name,但有很多 Pusher 的广告内容,读起来比其它模块费脑!😭,但终究还是啃完了。。。
新手问题:#
这是我读文档的一些疑问到答疑,供以后自己查阅复习
1. Channel PrivateChannel PresenceChannel 三个有什么区别?#
Channel 是公共频道,可以给未登录的游客发送,不会发送 /broadcasting/auth
鉴权,游客也可以监听,可以用在非登录态的页面
PrivateChannel 是私有频道,顾名思义就是会发送 /broadcasting/auth
鉴权了,默认是 web session 形式鉴权,下方会说怎么改成 sanctum
PresenceChannel 群组私有通信,可以理解为 PrivateChannel 的升级版,对应的 Echo 监听会改为 join 方式,比较直接的场景就是扫码点餐,我在点菜的时候可以看到谁又扫码进来了,派发事件上差不多,会分发所有在监听的用户,下面为代码示例
Echo.join('test').here(user => console.log(`I'm joined. ${user.name}`)).joining(user => console.log(console.log(`New other user ${user.name} Joined`))).listen('TestEvent', res => console.log(res));Copy
2. PrivateChannel 和 PresenceChannel 如何授权?#
- 看到 session 鉴权我就头大,文档既然没说如何用 sanctum 鉴权只能自己来了。查看源码后需要改动的地方:
# 1. routes/channels.php,每个定义都要加第三个参数 $option,你可以自己封装一下成新的方法
Broadcast::channel('test', fn($user) => true, $options = ['guards' => ['sanctum']]);
# 2. resources/js/echo.js ,前端部分(这个文件是安装 reverb 就会有的,别说你没找到)
window.Echo = new Echo({
broadcaster: 'reverb',
# 配置增加下面一行,怎么取token你自己决定,/broadcasting/auth 请求时就会带入这个Auth头,后端就会使用 $option 好的 guard 进行 sanctum 验证了
bearerToken: localStorage.getItem('token'),
key: import.meta.env.VITE_REVERB_APP_KEY,
...
});Copy
3. 如何放到 React Native 上?#
- web browser 上是通了,但这个东西普遍用到聊天 / 客服上的,想体验好点还是得 APP,这也是为什么都做小程序了,当然也可以用 WebView 渲染能用就行,但我还有发送文件,感觉互相通讯有点蛋疼,作为生命在于折腾的原则,还是新建一个 Expo 项目试试吧,试试就逝世!因为 laravel-echo 依赖的 pusher-js 包,然后看 pusher-js 源码其实有 react-native 目录和代码的,看到一丝曙光,所以理论上我感觉肯定是能折腾通的~
由于已经测试通了,就不写过程了,所以这里直接写出需要改的地方
用 PhpStorm 打开新建的 expo 项目(什么?你不会用 Expo ??
3.1. 安装必要的库#
yarn add laravel-echo pusher-js
3.2. pusher-js 依赖一个新的包#
yarn add @react-native-community/netinfo
3.3. 项目根目录新建 .env 注入环境变量,配置照搬 echo.js#
EXPO_PUBLIC_REVERB_APP_KEY=loajpysdblugnff9gwih
EXPO_PUBLIC_REVERB_HOST=192.168.10.7 # 由于APP开发使用的模拟器,所以要填写局域网IP才能通
EXPO_PUBLIC_REVERB_PORT=5208 # 同服务端监听端口
EXPO_PUBLIC_REVERB_SCHEME=http Copy
3.4 新建 reverb.js,放在你想放的目录,粘贴以下代码#
import LaravelEcho from 'laravel-echo';
import Pusher from 'pusher-js';
global.Pusher = Pusher; // 主要是修改这个,因为没有 window 对象
const Reverb = new LaravelEcho({
broadcaster: 'reverb',
// 改成你自己的取 token 的方式
bearerToken: '213|HXmBB2pPZSoXUZBQs6btASWUHDV1VEVcKoHnvWHi42b1c276',
// 这里是重点,因为APP是跑在模拟器/手机,所以一定要带域名,这里覆盖默认配置加上域名前缀,改成对应 php 服务的域名即可
authEndpoint: authEndpoint: process.env.NODE_ENV === 'production' ? 'https://xxx.com/broadcasting/auth' : `http://${process.env.EXPO_PUBLIC_REVERB_HOST}/broadcasting/auth`,
key: process.env.EXPO_PUBLIC_REVERB_APP_KEY,
wsHost: process.env.EXPO_PUBLIC_REVERB_HOST,
wsPort: process.env.EXPO_PUBLIC_REVERB_PORT ?? 80,
wssPort: process.env.EXPO_PUBLIC_REVERB_PORT ?? 443,
forceTLS: (process.env.EXPO_PUBLIC_REVERB_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});
export default Reverb;Copy
3.5 测试监听#
import Reverb from "@/utils/Reverb";
Reverb.channel('test').listen('TestEvent', (res: any) => console.log(res));Copy
3.6 PHP 端派发一个 TestEvent 测试一下#
// 仅为示例代码
App\Events\TestEvent::dispatch();Copy
3.7 成功截图#