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

news2024/10/6 5:56:13

此处以 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 文件

<?php

namespace 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.json

Configuration 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 控制器,内容如下:

<?php

namespace 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,内容如下:

<?php

namespace 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'; // 指定队列名,默认为 default

    private 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\ExampleBroadcastEvent
        return '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 R

version 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.coloradmin.cn/o/1595561.html

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

相关文章

【C 数据结构】双向链表

文章目录 【 1. 基本原理 】【 2. 双向链表的 创建 】实例 - 输出双向链表 【 3. 双向链表 添加节点 】【 4. 双向链表 删除节点 】【 5. 双向链表查找节点 】【 7. 双向链表更改节点 】【 8. 实例 - 双向链表的 增删查改 】 【 1. 基本原理 】 表中各节点中都只包含一个指针&…

排序算法-基数排序

基数排序是一种非比较排序算法&#xff0c;它将待排序的数字按照位数进行排序。基数排序的思想是先按照个位数进行排序&#xff0c;然后按照十位数进行排序&#xff0c;接着按照百位数进行排序&#xff0c;以此类推&#xff0c;直到最高位排序完成。 基数排序的步骤如下&#x…

【Java】xxl-job的快速入门

目录 什么是xxl-job&#xff1f; XXL-Job-环境搭建 1 调度中心环境要求 2.XXL-Job(源码说明) 3.初始化“调度数据库” 3启动调度中心xxl-job-admin docker安装-配置调度中心 1.创建mysql容器&#xff0c;初始化xxl-job的SQL脚本 2.拉取镜像 3.创建容器 xxl-jo…

手机号三要素实名验证,为您打造安全可靠的账户环境

在互联网时代&#xff0c;手机号码成为了我们生活中必不可少的一部分。我们几乎所有的社交账号、银行账号、网购账号&#xff0c;都需要绑定手机号码进行认证。然而&#xff0c;随着互联网的发展&#xff0c;越来越多的账号被盗用、个人信息被泄露的案例频频发生&#xff0c;让…

ros2 launch gazebo_ros gazebo.launch.py无法启动

我的系统是ubuntu20.04&#xff0c;ros2的版本是humble&#xff0c;当运行gazebo仿真时&#xff0c;运行 ros2 launch gazebo_ros gazebo.launch.py命令&#xff0c;会出现以下问题&#xff1a; 此时&#xff0c;这个页面会卡死在第六行&#xff0c;gazebo也不会打开 但最后单…

软件无线电安全之HackRF One初探

HackRF介绍 HackRF是一款开源软件无线电&#xff08;SDR&#xff09;平台&#xff0c;由Great Scott Gadgets公司推出。它具有广泛的频率覆盖范围&#xff0c;从1 MHz到6 GHz&#xff0c;支持大部分常见的无线通信频段。采用软件定义无线电技术&#xff0c;HackRF提供了自定义…

香港服务器如何更换域名?

更换香港服务器的域名是一个相对复杂的过程&#xff0c;涉及到多个步骤和注意事项。 准备工作&#xff1a; 备份网站数据&#xff1a;在进行任何更改之前&#xff0c;务必备份您的网站数据&#xff0c;以防止数据丢失或损坏。 购买新的域名&#xff1a;如果您还没有购买新的…

职场如何有效学习充电

在现在的工作中&#xff0c;需要接触和了解各式各样的内容&#xff0c;但很多时候我自己没遇到过。而平时有感觉没什么时间&#xff0c;因此产生了这个疑问&#xff0c;看完这个课程后&#xff0c;对这块有了较为体系化的了解。 对我来说&#xff0c;学习的最终目的是充实自己…

【AI 斯坦福 STORM】基于互联网搜索,帮你从零开始撰写文章

今天介绍斯坦福出品的系统&#xff0c;STORM。 STORM是一个基于互联网搜索的LLM系统&#xff0c;可以从零开始撰写类似维基百科的文章。 技术栈&#xff1a; dspy 一个用于算法优化LM提示和权重的框架You.com搜索API YOU APIs利用实时网络数据使LLMs和搜索体验更加真实和及时…

力扣 | 148. 排序链表

和数组里面的归并排序思想一致 class Solution {public ListNode sortList(ListNode head) {//过滤条件if(head null || head.next null)return head;ListNode slow head;ListNode fast head.next;while (fast ! null && fast.next ! null){slow slow.next;fast …

【Maven工具】

maven Maven是一个主要用于Java项目的构建自动化工具。它有助于管理构建过程&#xff0c;包括编译源代码、运行测试、将编译后的代码打包成JAR文件以及管理依赖项。Maven使用项目对象模型&#xff08;POM&#xff09;文件来描述项目配置和依赖关系。 Maven通过提供标准的项目…

酷开系统让用户在方方面面享受科技进步带来的美好体验

电视本身的特性&#xff0c;再有人工智能和全时AI的加持&#xff0c;让搭载了酷开系统的电视有能力成为一个“家庭智慧管控中心”。互联网的存在让大家能更懒地完成事情&#xff0c;满足宅家的愿望&#xff0c;有话说&#xff0c;科技因懒人而进步。打个简单的比方&#xff0c;…

手机照片删除了怎么恢复?恢复iPhone照片,试试这4招

当手机上的珍贵照片意外被删除时&#xff0c;让人心急如焚。幸运的是&#xff0c;对于使用iPhone的用户来说&#xff0c;恢复被删除的照片并不是一件难事。即使你不小心删除了照片&#xff0c;仍然有一些方法可以尝试将它们找回。手机照片删除了怎么恢复&#xff1f;在本文中&a…

计算机网络—传输层UDP协议:原理、应用

​ &#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;2月のセプテンバー 1:21━━━━━━️&#x1f49f;──────── 5:21 &#x1f504; ◀️ ⏸ ▶️ ☰ &am…

交叉熵损失函数介绍

交叉熵是信息论中的一个重要概念&#xff0c;它的大小表示两个概率分布之间的差异&#xff0c;可以通过最小化交叉熵来得到目标概率分布的近似分布。 为了理解交叉熵&#xff0c;首先要了解下面这几个概念。 自信息 信息论的基本想法是&#xff0c;一个不太可能的事件发生了…

【leetcode面试经典150题】51. 用最少数量的箭引爆气球(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

【学习笔记十六】EWM常见下架策略介绍

一、FIFO(First in ,First out)先进先出下架策略 1.后台配置 ①定义出库规则 字段: WDATU:收货日期和时间 或者WDATU_DATE收货日期无时间 QUAN:可用数量 排序: 不勾选升序,勾选降序 ②指定仓库类型搜索顺序 ③确定出库的存储类型搜索顺序 ②和③的配置详情见…

Android MVVM架构学习——ViewModel DataBinding

关于MVVM架构&#xff0c;我并不想花篇幅去做重复性的描述&#xff0c;网上一搜都是一堆讲解&#xff0c;大家可以自行了解&#xff0c;我所做的只是以最简单的例子&#xff0c;最有效的步骤&#xff0c;从零开始&#xff0c;去实现一个相对有点学习参考价值的项目。 先来看本…

无人机GB42590接收端 +接收端,同时支持2.4G与5.8G双频WIFI模组

严格按照GB42590的协议开发的发射端&#xff0c;通过串口和模块通讯&#xff0c;默认波特率 921600。 http://www.doit.am/首页-深圳四博智联科技有限公司-淘宝网https://shop144145132.taobao.com/?spma230r.7195193.1997079397.2.71f6771dJHT2r0 二、接口文档 单片机和模…

【web3技术】什么是 WEB3?

Web3 简介 中心化网络已经帮助数十亿人融入了互联网,并在其上创建了稳定、可靠的基础设施。 与此同时,少数中心化巨头几乎垄断了互联网,甚至可以为所欲为。 Web3 是摆脱这一困境的方案。 不同于科技巨头垄断的传统互联网,Web3 采用去中心化,由所有用户构建、运营和拥有。…