前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >php-laravel Redis 广播

php-laravel Redis 广播

原创
作者头像
iwhao
发布2024-07-05 23:08:38
940
发布2024-07-05 23:08:38

前言

在很多现代 Web 应用中,WebSockets被用于实现实时更新的用户接口。当一些数据在服务器上

被更新,通常一条消息通过 Websocket 连接被发送给客户端处理。这为我们提供了一个更强大的、更有效的选择来持续拉取应用的更新。

为实现的这样的应用,Laravel 中 通过 Websocket 连接广播事件使开发变得简单。广播 Laravel 事件允许你在服务端和客户端 JavaScript 框架之间共享同一事件名

本 文档 仅使用了 redis的广播驱动

简介

laravel 的广播系统和队列系统类似,需要两个进程协作,一个是 laravel 的 web 后台系统,另一个是 Socket.IO 服务器系统。具体的流程是页面加载时,网页 js 程序 Laravel Echo 与 Socket.IO 服务器建立连接, laravel 发起通过驱动发布广播,Socket.IO 服务器接受广播内容,对连接的客户端网页推送信息,以达到网页实时更新的目的。

配置

配置文件 config/broadcasting.php,可以直接在 .env 中配置以下代码

代码语言:php
复制
    BROADCAST_DRIVER=redis
广播服务提供者
代码语言:php
复制
config/app.php 配置文件中 providers数组中打开注释

    App\Providers\BroadcastServiceProvider::class,
CSRF令牌

Laravel Echo需要访问当前 Session 的 CSRF 令牌(token)

自创建的 blade视图的 head中 加入 meta标签

代码语言:php
复制
    <meta name="csrf-token" content="{{ csrf_token() }}">
Redis

Redis广播需要安装 Predis库

代码语言:php
复制
    composer require predis/predis
安装Laravel Echo

Laravel Echo是一个JavaScript库,web端可以轻松订阅频道并收听Laravel广播的事件

通过 npm 包管理器安装 Echo

代码语言:node
复制
    npm install
    npm install laravel-echo-server

初始化    laravel-echo-server

    laravel-echo-server init
    
    // 是否在开发模式下运行此服务器(y/n) 输入y
    ? Do you want to run this server in development mode? (y/N) 
    
    // 设置服务器的端口 默认 6001 输入 6001就可以了 或者你想要的
    ? Which port would you like to serve from? (6001)
    
    // 想用的数据库  选择 redis
    ? Which database would you like to use to store presence channel members? (Use arrow keys)
    ❯ redis 
      sqlite 
      
    //   这里输入 你的laravel  项目的访问域名
    ? Enter the host of your Laravel authentication server. (http://localhost) 
    
    // 选择 网络协议 http
    ? Will you be serving on http or https? (Use arrow keys)
    ❯ http 
      https 
      
    // 您想为HTTP API生成客户端ID/密钥吗 N
    ? Do you want to generate a client ID/Key for HTTP API? (y/N) 
    
    // 要设置对API的跨域访问吗?(y/n)N
    Configuration file saved. Run laravel-echo-server start to run server.

设置完成后 项目根目录 下 会生成 laravel-echo-server.json 文件 这里面就是刚才的配置

执行命令启动 服务 出现如下 则启动成功

代码语言:node
复制
    laravel-echo-server start

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

频道

频道必须是 Channel、PrivateChannel 或 PresenceChannel 的实例。Channel 实例表示任何用户都可以订阅的公开频道,而 PrivateChannels 和 PresenceChannels 则表示需要 频道授权 的私有频道:

创建事件
代码语言:shell
复制
    php artisan make:event PublicMessageEvent 

文件生成目录 app/Events

代码语言:php
复制
    // 消息内容
    public $message;

    public function __construct(string $message)
    {
        $this->message = $message;
    }
    
    // 返回一个公共频道 频道名称为push
    public function broadcastOn()
    {
        return new Channel('push');
    }
    
    // Laravel 默认会使用事件的类名作为广播名称来广播事件,自定义:
    public function broadcastAs()
    {
        return 'push.message';
    }

添加路由

代码语言:php
复制
     use App\Events\PublicMessageEvent;
     Route::get('/echo', function () {
        return view('echo');
     });
    
    Route::get('/push/{message}', function ($message) {
        broadcast(new PublicMessageEvent($message));
    })

前端

安装 laravel-echo

代码语言:shell
复制
    npm install laravel-echo

编辑 resource/js/bootstrap.js 添加如下代码

代码语言:js
复制
    import Echo from "laravel-echo"

    window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: window.location.hostname + ':6001'
    });

编辑 resource/js/app.js 添加如下代码

代码语言:js
复制
    Echo.channel('push')
    .listen('.push.message', (e) => {
        alert('来了')
        console.log(e);
    });

创建 echo.blade.php

head 中加上

代码语言:php
复制
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
     
     <script src="/js/app.js"></script>

编译 js 文件

代码语言:shell
复制
    npm run watch

浏览器访问 项目域名/echo

浏览器访问 项目域名/push/这是一个测试广播

echo 页面 会自动弹出

到这 广播 发布到公共频道就完成了

私有频道 PrivateChannel

创建事件
代码语言:shell
复制
    php artisan make:event PrivateMessageEvent

PrivateMessageEvent 中 写入 以下内容

代码语言:php
复制
    class PrivateMessageEvent implements ShouldBroadcast
    {
       
        // 消息内容
        public $message;
        // 用户
        public $user;
    
        public function __construct(User $user, string $message)
        {
            $this->user = $user;
            $this->message = $message;
        }
    
        // 创建私有频道
        public function broadcastOn()
        {
            return new PrivateChannel('privatePush.' . $this->user->id);
        }
        
        //    //Laravel 默认会使用事件的类名作为广播名称来广播事件,自定义:
        //    public function broadcastAs()
        //    {
        //        return 'privatePush.message';
        //    }
        
        // 控制广播数据:
        public function broadcastWith()
        {
            return ['message' => $this->message,'status' => 'okok'];
        }
    }
添加发布广播到私有频道 触发路由 routes/web
代码语言:php
复制
    Route::get('/privatePush/{message}/{id}', function ($message, $id) {
        $user = \App\User::find($id);
        if (empty($user)) return '无此用户';
        broadcast(new PrivateMessageEvent($user, $message));
    });
频道授权

定义授权路由 routes/channel 中加入一下代码

代码语言:php
复制
    Broadcast::channel('privatePush.{id}', function ($user, $id) {
        return (int) $user->id === (int) $id;
    });
前端

echo.blade.php 中加入

代码语言:php
复制
    <script>
        @if(!empty(Auth::user()))
            window.id = "{{Auth::user()->id}}"
        @endif
    </script>

app.js

代码语言:php
复制
    Echo.private('privatePush.' + window.id)
    .listen('PrivateMessageEvent', (e) => {
        alert('qweqwe')
        console.log(e);
    });

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 简介
  • 配置
    • 频道
      • 前端
    • 私有频道 PrivateChannel
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档