在 vue 独立组件中使用 laravel echo
在 vue 独立组件中使用 laravel echo
引入包
1 | import Echo from "laravel-echo" |
设置新的Echo
,同时监听新的echo
1 | this.echo = new Echo({ |
以上
laravel 包中创建新 view 并使用 vue-route
laravel 包中创建新 view 并使用 vue-route
前言
自行开发的laravel
扩展包少不了UI
的显示。
官方又没有写明,于是就踩了不少的坑。
填坑方法如下。
js 设置文件
package.json
复制laravel
最初的设置就好
webpack.mix.js
注意copy
到对应的laravel
项目路径
1 | const mix = require('laravel-mix'); |
resources 文件夹
app.js
1 | import Vue from 'vue'; |
routes.js
1 | export default [ |
其他vue组件
正常写法,没什么需要注意的
laravel
路由
有使用vue-router
,不按照下面的写会404
哦。
1 | Route::get('/{view?}' , 'LogServiceController@getHome')->where('view', '(.*)' )->name('home'); |
控制器
传递logsServicePath
到页面。
1 | return view('logsservice::layout' , [ 'logsServicePath' => [ 'path' => 'logs' ] ]); |
blade
注意$logsServicePath
有控制器传递了。注意根据需要修改。
1 | <!doctype html> |
以上
Clashx
laravel logs
为laravel logs添加自定义格式与处理方法
Monolog\Formatter\LineFormatter
用来定义log
内容。
Monolog\Processor\IntrospectionProcessor
用来获取控制器、方法、行数。
1 | <?php |
设置logging.php
1 | 'daily' => [ |
奇怪的梦
奇怪的梦
太过美好的梦,以至于不愿意醒来……
laravel echo 设置
laravel echo
用于提供socket
服务,现代网络服务必备。
于是使用laravel-echo-server
注意laravel-echo-server
是兼容pusher
的。
所以直接安装pusher
包 + 设置config/broadcasting.php
就可以快速上手。
网络上没人将详细的设置方法写出来不知道是为什么。
需要的包
1 | composer require pusher/pusher-php-server |
设置
.env
1 | BROADCAST_DRIVER=pusher |
config/broadcasting.php
1 | 'pusher' => [ |
启动echo-server
官方写的非常清楚了。
注意:非本地使用的情况下建议开启https
1 | laravel-echo-server init |
到这里,laravel
有可以使用php
向频道中推送信息了。
vue前端设置
bootstrap.js
中进行设置
注意地址的对应。如果需要laravel-echo-server
完全可以拆分为独立服务器。也可以使用docker
包。
1 | import Echo from "laravel-echo" |
使用echo
在laravel
中
新建一个事件,laravel
中的推送要使用的到队列。
类要implements ShouldBroadcast
__construct
的消息为要推送信息。
broadcastOn()
用来指定频道。
broadcastAs()
用来指定频道名称。
1 | <?php |
在vue
组件中
注意listen
名字前的.
1 | var channel = Echo.channel('your_channel'); |
日常
gantt dateFormat YYYY-MM-DD-HH section 2019-12-13 整理 : a1, 2019-12-13-10 , 2h 早课 : crit , after a1 , 2h 程序 : a2 , after a1 , 4h 健身环 : a3 , after a2 , 3h 晚课 : crit , 2019-12-13-19 , 2h 工作 : a4 , after a3 , 4h 休息 : a5 , after a4 , 1h 工作2 : a6 , after a5 , 3h 整理工作记录 : 2019-12-14-03 , 1h
使用 mermaid
重新分配服务
重新分配服务,分割功能,创建新的功能包。
laravel horizon
使用vue 对UI进行构建,使文件在不导入的情况下可以使用
方法可以学习,不过无法使用 2FA 验证 与 用户登录。除非使用vuex
。
测试 mermaid
graph LR A --> |test| B
gantt dateFormat YYYY-MM-DD-HH section 2019-12-12 整理文档 : done, a1, 2019-12-12-12 , 4h 健身环 :active, a2 , 2019-12-12-16 , 3h 晚课 :crit , a3 , after a2 , 2h 建立对应包 : 2019-12-12-19 , 6h 心理测量者3 : a4 , 2019-12-13-01 , 2h 整理工作记录 : 2019-12-13-03 , 1h