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

2024-04-15 11:52
文章标签 网页 广播 实现 使用 即时通讯 io client socket lumen laravel echo

本文主要是介绍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

通过 yarn 或 npm 全局安装 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）中需实现 Authorizable、Authenticatable 并引入 Authenticatable 和 Authorizable 两个 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/消息 中，是否出现了 ExampleBroadcastEvent 中 broadcastWith() 返回的内容

最后

  • 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 端，至此流程结束

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

这篇关于Laravel/Lumen 中使用 Echo + Socket.IO-Client 实现网页即时通讯广播的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/905743。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2