深夜学习之 Reverb 在 ReactNative 上的实现

自从 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));

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,
  ...
  });

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  

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;

3.5 测试监听

import Reverb from "@/utils/Reverb";

Reverb.channel('test').listen('TestEvent', (res: any) => console.log(res));

3.6 PHP端派发一个 TestEvent 测试一下

// 仅为示例代码
App\Events\TestEvent::dispatch();

3.7 成功截图

本作品采用《CC 协议》，转载必须注明作者和本文链接