Laravel/Lumen 中使用 Echo + Socket.IO-Client 实现网页即时通讯广播

此处以 Lumen 9 框架为例说明如何调试通过 Echo 服务端以及客户端

如果你是 Laravel/Lumen 10.47+ 用户,可以先了解官方的 Laravel Reverb。注意 Laravel Reverb 仅支持 Laravel/Lumen 10.47+ 以及 PHP 8.2+

Laravel Reverb 参考官网:https://laravel.com/docs/10.x/reverb

截止 2024 年 4 月 13 日,当前仍然为 Beta 版,包信息:https://packagist.org/packages/laravel/reverb

安装

Redis

composer require illuminate/redis,如果安装失败需要根据当前框架版本指定所需 Redis 版本,例如:composer require illuminate/redis "^9.0"

Broadcasting

同 Redis,composer require illuminate/broadcasting "^9.0"

laravel-echo-server

通过 yarnnpm 全局安装 laravel-echo-server,如:yarn global add laravel-echo-server

注意:需要把路径 C:\Users\用户名\AppData\Local\Yarn\bin 加入环境变量 Path

在 macOS 中如果未修改过 /etc/paths 文件,你可能需要把 /usr/local/bin 加入到环境变量 Path 中
关于 /etc/paths 文件,可以参考这篇文章:https://maxsky.blog.csdn.net/article/details/53930406
注意 .bash_profile 文件现在变成了 .zshrc

此时运行 laravel-echo-server --version 即可看到版本号

配置

Redis 配置

bootstrap/app.php 中确保 $app->register(App\Providers\AppServiceProvider::class); 非注释 状态

然后打开 app/Providers/AppServiceProvider.php 文件,在 register 方法中添加如下内容:

use Illuminate\Redis\RedisServiceProvider;// ...
public function register(): void {$this->app->register(RedisServiceProvider::class);
}

Broadcast 配置

同 Redis 需要在 AppServiceProvider 中新增 Provider,现在看起来就像这样:

use Illuminate\Broadcasting\BroadcastServiceProvider;
use Illuminate\Redis\RedisServiceProvider;// ...
public function register(): void {$this->app->register(BroadcastServiceProvider::class);$this->app->register(RedisServiceProvider::class);
}

Lumen 框架用户需要在 bootstrap/app.php 中的 $app->configure() 下新增一条 $app->configure('broadcasting');,使配置文件生效

然后在 $app->register(App\Providers\AppServiceProvider::class); 下新增:

// 稍后创建该 Provider
$app->register(App\Providers\BroadcastServiceProvider::class);

最后复制 vendor/laravel/lumen-framework/config/broadcasting.php 文件至 config 目录下

记得配置 Redis 驱动,随后在项目根目录的 .env 文件中新增

BROADCAST_DRIVER=redis

Broadcast 使用 Redis 的 default 连接配置,所以在 Redis 中的 db 号是 REDIS_DB,默认为 0

配置 Facade

打开 bootstrap/app.php 文件,确保 $app->withFacades();非注释 状态,将该句修改为如下内容:

// ...
// 注意下方两句需在最后的 $app->configure() 方法之后$app->withFacades(true, array_flip(config('app.aliases')));$app->withEloquent();
// ...

打开 config 目录下存在 app.php,在最下方新增 aliases 部分,看起来就像:

return ['name' => env('APP_NAME', 'Lumen'),// ...'key' => env('APP_KEY'),'cipher' => 'AES-256-CBC','aliases' => ['App'       => Illuminate\Support\Facades\App::class,'Broadcast' => Illuminate\Support\Facades\Broadcast::class,'Eloquent'  => Illuminate\Database\Eloquent\Model::class,'File'      => Illuminate\Support\Facades\File::class,'Hash'      => Illuminate\Support\Facades\Hash::class,'Http'      => Illuminate\Support\Facades\Http::class,'View'      => Illuminate\Support\Facades\View::class,]
];

注意低版本的 Lumen 框架中可能不存在 Http 等 Facade

新增 BroadcastServiceProvider

app/Providers 下新增 BroadcastServiceProvider.php 文件

<?phpnamespace App\Providers;use Broadcast;
use Illuminate\Support\ServiceProvider;class BroadcastServiceProvider extends ServiceProvider {/*** Bootstrap any application services.** @return void*/public function boot(): void {// 频道授权回调,闭包中的第一个参数为已认证用户身份模型// 用户认证相关内容下方有简述,具体可参考(注意文档为 9.x 版本):https://learnku.com/docs/laravel/9.x/authentication/12239// ---// channel 第一个参数为频道名称,此处以私有频道举例所以关联了一个 ID。该 ID 与闭包函数中的 $user_id 为绑定关系Broadcast::channel('test.{user_id}', function ($user, int $user_id) {return $user->id === $user_id;});$this->app['router']->group(['middleware' => []], function (/** @noinspection PhpUnusedParameterInspection */ $router) {require_once base_path('routes/channels.php');});}
}
用户认证简述

此处仅针对 Lumen 框架举例说明,且用户认证方式为 Token(如 JWT)

用户模型(Model)中需实现 AuthorizableAuthenticatable 并引入 AuthenticatableAuthorizable 两个 trait

use Illuminate\Auth\Authenticatable;
use Illuminate\Contracts\Auth\Access\Authorizable as AuthorizableContract;
use Illuminate\Contracts\Auth\Authenticatable as AuthenticatableContract;
use Laravel\Lumen\Auth\Authorizable;class User extends Model implements AuthenticatableContract, AuthorizableContract {use Authenticatable, Authorizable;protected $table = 'user_table';protected $guarded = [];protected $hidden = ['password',];
}

随后修改 app/Providers/AuthServiceProvider.php,在 boot 方法中实现自己的 Token 认证逻辑即可:

/*** Boot the authentication services for the application.** @return void*/
public function boot(): void {$this->app['auth']->viaRequest('api', function (Request $request) {// 如果是自定义的 Header,通过 $request->header('Custom-Header') 获取即可$token = $request->bearerToken();if ($token) {// TODO: 自定义验证逻辑if ($verified) {return User::find('Verified User Identity'); // 如 user_no、user_id 等,此处返回用户模型}}return null;});
}

laravel-echo-server 初始化

在项目根目录运行 laravel-echo-server init,得到如下提示(参考问号后的内容):

Do you want to run this server in development mode? Yes
Which port would you like to serve from? 6001
Which database would you like to use to store presence channel members? redis
Enter the host of your Laravel authentication server. http://localhost
Will you be serving on http or https? http                  
Do you want to generate a client ID/Key for HTTP API? No   
Do you want to setup cross domain access to the API? No
What do you want this config to be saved as? laravel-echo-server.jsonConfiguration file saved. Run laravel-echo-server start to run server.

laravel-echo-server.json 文件详细说明及配置见:

  1. 配置选项
  2. 数据库配置
  3. Redis 可选项
  4. Socket.IO 可选项

此处我们只需要确保 authHost 对应上我们项目地址,其它配置保持默认即可。authHost 可以是 IP+端口的形式,如:http://127.0.0.1:8888

发送广播

编写相关文件

首先在 routes 下新建 channels.php 文件,内容如下:

<?php// 稍后创建该控制器
use App\Http\Controllers\Broadcast\BroadcastAuthController;/** @var Laravel\Lumen\Routing\Router $router */
$router->addRoute(['GET', 'POST'], 'broadcasting/auth', BroadcastAuthController::class . '@authenticate');// 该路由用于模拟推送通知
$router->get('test_push', function () {Broadcast::event((new App\Events\ExampleBroadcastEvent(22, '你好啊')));
});

接着在 app/Http/Controllers 下新建 Broadcast 目录,然后在里面新建 BroadcastAuthController 控制器,内容如下:

<?phpnamespace App\Http\Controllers\Broadcast;use Illuminate\Http\Request;
use Illuminate\Support\Facades\Broadcast;
use Laravel\Lumen\Routing\Controller;class BroadcastAuthController extends Controller {public function authenticate(Request $request) {if ($request->hasSession()) {$request->session()->reflash();}// 注意这里我参照框架提供的用户认证实现授权,如果你有自己的一套认证代码可不使用return Broadcast::auth($request);}
}

最后创建 ExampleBroadcastEvent,生产者部分就完成了。进入 app/Events,新建 ExampleBroadcastEvent.php,内容如下:

<?phpnamespace App\Events;use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;class ExampleBroadcastEvent extends Event implements ShouldBroadcast {/** @var string broadcast queue name */public string $queue = 'broadcast'; // 指定队列名,默认为 defaultprivate int    $user_id;private string $message;/*** Create a new event instance.** @return void*/public function __construct(?int $user_id = null, string $message = 'Hello') {$this->user_id = $user_id;$this->message = $message;}/*** Set the channel to be broadcast.** @return array*/public function broadcastOn(): array {// 此处使用私人频道,此处的频道名必须和频道授权回调中一致return [new PrivateChannel("test.$this->user_id")];}/*** Use this method to set the broadcast name, the current class name is used by default.*/public function broadcastAs(): string {// 广播名称,也可以叫做事件名称,此处为指定一个别名。如果不指定该方法,默认广播名为 App\Events\ExampleBroadcastEventreturn 'ExampleNotice';}/*** Set the broadcast payload.** @return array*/public function broadcastWith(): array {// 需通过 Socket 传输到 Web 端的数据return ['data' => ['user_id' => $this->user_id,'message' => $this->message]];}
}

测试

前面我们在 channels.php 中编写了一个路由 /test_push,此时我们可以请求该路由瞧瞧广播是否已进入 Redis 队列

即访问:http://127.0.0.1:8080/test_push注意根据你实际监听端口和路径情况测试

请求一次即可,然后使用 RDM 等工具查看是否已有数据:
广播队列

消费广播

配置服务端

项目根目录创建 laravel-echo-server.json 文件(注意 authHost 监听端口和 authEndpoint 路由路径):

{"authHost": "http://127.0.0.1:8080","authEndpoint": "/broadcasting/auth","clients": [],"database": "redis","databaseConfig": {"redis": {"host": "127.0.0.1","port": 6379,"password": null,"keyPrefix": ""},"sqlite": {"databasePath": "/database/laravel-echo-server.sqlite"},"publishPresence": true},"devMode": true,"host": null,"port": "6001","protocol": "http","socketio": {"allowEIO3": true,"cors": {"origin": "*","credentials": true}},"secureOptions": 67108864,"sslCertPath": "","sslKeyPath": "","sslCertChainPath": "","sslPassphrase": "","subscribers": {"http": true,"redis": true},"apiOriginAllow": {"allowCors": true,"allowOrigin": "*"}
}

运行服务端

项目根目录运行:

laravel-echo-server start

得到如下提示即为正确:

L A R A V E L  E C H O  S E R V E Rversion 1.6.3                      ⚠ Starting server in DEV mode...   ✔  Running at localhost on port 6001
✔  Channels are ready.          
✔  Listening for http events... 
✔  Listening for redis events...Server ready!

准备客户端

参考:https://github.com/maxsky/Laravel-Echo-Client-Demo

该 Demo 需要编辑 js/app.js 文件,根据项目情况生成 Token,可写死在 auth.headers 中或使用 bearerToken

因为我们这里使用了私人频道,所以 channel() 方法应该修改为 private()

Channel_Name 需修改为 test. 加上 Token 所对应的用户 ID,如 test.22

ExampleEvent 需修改为 ExampleNotice。如果你删掉了 ExampleBroadcastEvent 中的 broadcastAs() 方法,此处应当输入 ExampleBroadcastEvent 并移除上分 namespace 配置项或将 null 修改为 'App.Events'

这部分代码修改后看起来就像这样:

window.Echo = new Echo({broadcaster: 'socket.io',host: 'http://127.0.0.1:6001',auth: {headers: {'User-Agent': navigator.userAgent,'Custom-Header': 'Custom Header Value',}},withCredentials: true,bearerToken: 'Your Token',namespace: null // only for used `broadcastAs` method
});window.Echo.private('test.22').listen('ExampleNotice', (res) => {console.log(res);
});

运行客户端

在上述 Demo 中,运行 yarn dev 后默认可通过 http://127.0.0.1:5173 访问客户端

注意页面没内容,我们需要按下 F12 打开开发者工具并切换到 Network/网络 选项卡进行观察

可以刷新页面,找到一条类似 ws://127.0.0.1:6001/socket.io/?EIO=3&transport=websocket&sid=XXXXX 的链接,选中后点击右侧的 Messages/消息 选项卡等待即可

运行队列

在项目根目录下运行:

php artisan queue:work

如果出现处理提示说明消费成功。当然,因为我们在 ExampleBroadcastEvent.php 文件中修改了队列名所以此处不会出现任何执行信息

我们需在该命令中添加参数 --queue=队列名,所以 Ctrl+C 终止运行后试试这句:php artisan queue:work --queue=broadcast

如果没有任何问题,应该会看到类似下面的提示:

2023-05-01 05:00:01 App\Events\ExampleBroadcastEvent ........ RUNNING
2023-05-01 05:00:01 App\Events\ExampleBroadcastEvent .... 7.80ms DONE

转过头再看看 laravel-echo-server 那边,除了会出现之前刷新时的 joined channel: test 外,应该会有下方提示:

Channel: private-test.22
Event: ExampleNotice
Channel: private-test.22
Event: ExampleNotice

如果一切顺利,回到浏览器,查看刚刚的 Messages/消息 中,是否出现了 ExampleBroadcastEventbroadcastWith() 返回的内容

最后

  • Web 端 socket.io-client 客户端必须使用 ^2.0 版本,不可使用 ^3.0^4.0(Client Demo 中已说明),除非 laravel-echo-server 中依赖的 socket.io 服务版本变更。所以 laravel-echo-server.json 配置中 socketio.allowEIO3 选项是无效的。具体兼容说明见:https://socket.io/docs/v4/troubleshooting-connection-issues#the-client-is-not-compatible-with-the-version-of-the-server
  • 部分配置项可写在项目根目录的 .env 环境文件中,支持的环境变量见:envVariables

流程总结

  1. 启动 WebSocket 服务端,在项目根目录运行 laravel-echo-server start
  2. 编写广播事件,参考 ExampleBroadcastEvent
  3. 通过 Broadcast::event() 方法生产消息并存储于 Redis 中等待队列消费,例如:Broadcast::event((new App\Events\ExampleBroadcastEvent(22, 'Hello')))
  4. 启动 Web 网页并连接到服务端,连接端口为 laravel-echo-server.json 中的 port 配置项;
  5. 使用命令启动队列监听以执行消费,根据示例文件应当在项目根目录运行 php artisan queue:work --queue=broadcast
  6. 队列提示消费 DONE 完成后,事件中 broadcastWith 方法的返回值将被传送至 Web 端,至此流程结束

频道授权需仔细参考框架文档用户认证以及授权频道部分

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS导读 (复合选择器 下)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 2.5 伪类选择器 2.6 链接伪类选择器 2.6.1 链接伪类注意事项 2.6.2 链接伪类选择器实际开发中的写法 2.7 …

智慧医疗app

智慧医疗app是一套融合物联网、云计算和大数据等技术&#xff0c;以患者数据为中心的医疗服务模式&#xff0c;致力于为患者提供更加便捷、高效的医疗服务。 在线挂号、在线问诊、电子病历记录、健康管理以及药品购买等。患者可以通过app选择医生和挂号时间&#xff0c;并在线…

ROS2从入门到精通1-3:详解ROS2动作通信机制与自定义动作

目录 0 专栏介绍1 动作通信模型2 动作模型实现(C)3 动作模型实现(Python)4 自定义动作 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。 &#x1f680;详情&a…

蓝桥杯嵌入式2021年第十二届第一场省赛主观题解析

1 题目 2 代码 /* USER CODE END Header */ /* Includes ------------------------------------------------------------------*/ #include "main.h" #include "tim.h" #include "usart.h" #include "gpio.h"/* Private includes…

武汉星起航助力跨境电商,专业选品与全方位服务引领行业新风尚

在全球跨境电商浪潮的推动下&#xff0c;越来越多的卖家纷纷将目光投向了这片广阔的市场。然而&#xff0c;如何在这片蓝海中脱颖而出&#xff0c;成为众多卖家关注的焦点。武汉星起航电子商务有限公司以其专业的选品建议和全方位的服务&#xff0c;为卖家们提供了一条成功的捷…

新零售行业门店管理方案详解,人人都可以是好店长

在之前的文章中&#xff0c;我们分别介绍了新零售业的全面解决方案&#xff0c;包括门店管理解决方案、商品经营方案、会员管理解决方案&#xff0c;以及这些方案所包含的分析指标&#xff0c;吸引了不少对新零售转型感兴趣的企业主。 后续我们会将这些内容拆解开来&#xff0…

LeetCode-热题100:104. 二叉树的最大深度

题目描述 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a; root [3,9,20,null,null,15,7] 输出&#xff1a; 3 示例 2&#xff1a; 输入&#xff1a; root …

【数字IC/FPGA】什么是无符号数?什么是有符号数?

进制 虽然在日常生活中&#xff0c;我们已经习惯了使用10进制数字&#xff0c;但在由数字电路构成的数字世界中&#xff0c;2进制才是效率更高的选择。 10进制与2进制 10进制&#xff08;decimal&#xff09;计数法&#xff08;一般也叫阿拉伯计数法&#xff09;是在日常生活…

LLM生成模型在生物单细胞single cell的应用:scGPT

参考&#xff1a; https://github.com/bowang-lab/scGPT https://www.youtube.com/watch?vXhwYlgEeQAs 主要是把单细胞测序出来的基因表达量的拼接起来构建成的序列&#xff0c;这里不是用的基因的ATCG&#xff0c;是直接用的基因名称 训练数据&#xff1a;scGPT全人模型是在3…

第⑫讲:Ceph集群OSD扩缩容中Reblanceing数据的重分布

文章目录 1.Reblanceing数据重分布的概念2.验证Reblanceing触发的过程3.Reblanceing细节4.临时关闭Reblanceing机制 1.Reblanceing数据重分布的概念 当集群中OSD进行扩缩容操作后&#xff0c;会触发一个Reblanceing数据重分布的机制&#xff0c;简单的理解就是将扩缩容前后OSD…

【Hello算法】 > 第 1 关 > 初识 算法 与 复杂度分析

初识 算法 与 复杂度分析 What are algorithms and data structures ?-什么是算法与数据结构&#xff1f;How to conduct complexity analysis ?-如何进行复杂性分析&#xff1f;时间复杂度空间复杂度 小结Tips&#xff1a; ————————————————————————…

Day101:漏洞发现-漏扫项目篇NucleiYakitGobyAfrogXrayAwvs联动中转被动

目录 特征类-三方Poc调用&模版Poc调用 案例1&#xff1a;单点对某特征点进行安全评估 Goby-综合类 Nuclei-较综合类 Afrog-特征类 Yakit-可特征可综合 案例2&#xff1a;新型对某特征点进行安全评估 综合类-主动漏扫&中转联动&被动联动 案例1&#xff1a;…

移动开发避坑指南——内存泄漏

在日常编写代码时难免会遇到各种各样的问题和坑&#xff0c;这些问题可能会影响我们的开发效率和代码质量&#xff0c;因此我们需要不断总结和学习&#xff0c;以避免这些问题的出现。接下来我们将围绕移动开发中常见问题做出总结&#xff0c;以提高大家的开发质量。本系列文章…

03-进程-网络命令-软件安装-SSH免密登录

软件安装-网络命令-SSH免密登录 一 软件安装 1 在线安装 命令&#xff1a; yum 作用&#xff1a;yum会从指定的服务器自动下载rpm包并且进行安装&#xff0c;优点是可以自动处理依赖关系&#xff0c;并且一次安装所有的软件包。 配置yum的镜像源 yum源有个统一的下载服务…

剖析 SPI 在 Spring 中的应用

一、概述 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是Java内置的一种服务提供发现机制&#xff0c;可以用来提高框架的扩展性&#xff0c;主要用于框架的开发中&#xff0c;比如Dubbo&#xff0c;不同框架中实现略有差异&#xff0c;但核心机制相同…

精确号码比例放通算法的设计与实现

精确号码比例放通算法的设计与实现 引言背景问题定义算法设计1. 数据结构2. 算法流程3. 伪代码4. C语言实现 结论参考文献 引言 随着通信技术的飞速发展&#xff0c;呼叫中心和电信运营商面临着日益增长的呼叫管理需求。在某些情况下&#xff0c;为了确保服务质量或者遵守特定…

方案分享 | 嵌入式指纹方案

随着智能设备的持续发展&#xff0c;指纹识别技术成为了现在智能终端市场和移动支付市场中占有率最高的生物识别技术。凭借高识别率、短耗时等优势&#xff0c;被广泛地运用在智能门锁、智能手机、智能家居等设备上。 我们推荐的品牌早已在2015年进入指纹识别应用领域&#xff…

[dvwa] sql injection

sql injection 0x01 low sql语句没有过滤 经典注入&#xff0c;通过逻辑or为真相当于select * from users where true&#xff0c;99换成1也成 用union select 对齐列数&#xff0c;查看数据库信息 1’ union select 1,2# order by探测对齐列数更方便 1’ or 11 order b…

05.MySQL索引事务

1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。 可以对表中的一列或多列创建索引&#xff0c;并指定索引的类型&#xff0c;各类索引有各自的数据结构实现 1.2 作用 数据库中的表、数据、索引之间的关系&#xff0c;类似于书架上的…

Spring AI 应用 - 智能记者

参考实现&#xff1a; https://github.com/mshumer/ai-journalist 上面是通过 Claude 配合 SERP 搜索 API&#xff0c;使用 Python 语言实现的&#xff0c;本文通过 GitHub Copilot 辅助改为了基于 Spring AI 的 Java 版本&#xff0c;本文使用的 OpenAI。 AIJournalist 实现…