Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收

用Laravel有一年多了,但是广播这块一直没涉及到,最近看着官方文档结合实用场景,使用最新版本的Laravel5.7做了一个小例子,具体流程如下:

  • 使用Laravel的广播机制触发广播事件,使用Redis驱动
  • 使用Laravel的队列读取事件,Redis驱动发布出去
  • laravel-echo-server通过Redis收听到该事件
  • laravel-echo-server通过socket.io将事件对象发送给laravel-echo
  • laravel-echo解析接收到的事件对象

创建项目

使用官方的集成环境Homestead,创建项目过程略过,直接从使用广播相关的部分开始。

  • 打开 config/app.php 找到 'provides' 属性,将 BroadcastServiceProvider 前的注释去掉。
  • 编辑 .env 文件,修改BROADCAST_DRIVER=redis
  • 创建广播事件,自动在app/Events和app/Listeners生成文件。
# php artisan make:event TriggerAlarm
  • 创建该事件的触发路由,routes/channels.php添加内容。
  • 项目增加 predis依赖
# composer require predis/predis

相关文件内容如下:
Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收

发布广播

  • 通过postman调用路由
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
  • 通过 redis-cli 查看当前redis中的数据
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
  • 让队列消费事件
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
  • 再查看redis数据,发现已被消费掉。
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收

订阅广播

  • 使用 Redis + socket.io方式转发接收,需要安装开源项目 laravel-echo-server
// 安装
# npm install -g laravel-echo-server
// 初始化,默认即可,在项目根目录下生成 laravel-echo-server.json 配置文件,修改devMode 修改为 true。
# laravel-echo-server init
// 启动
# laravel-echo-server start

截图如下:
Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收

  • 前端通过laravel-echo 接收广播
$ npm i --save socket.io-client
$ npm i --save laravel-echo
  • 打开 /resources/assets/js/bootstrap.js 在这个文件的结尾已经预先写上了 laravel-echo 的使用例子,进行修改。
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
  • 创建页面,在 resources/views/ 下建立页面 triggerAlalm.blade.php 内容如下截图,并增加对应的路由。
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收

Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收

  • 关闭laravel-echo-server,然后构建前端文件
# npm install
# npm run dev
  • 重启laravel-echo-server,在浏览器里访问新页面路由。
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
  • 通过postman触发报警,然后页面收到信息,打开警铃,页面样式变更。
    Laravel 5.7 中广播实践,使用websocket(Redis + socket.io) 技术接收
上一篇:phantomjs截图中文乱码问题解决


下一篇:Markdown 常用语法