理解laravel中的事件和广播
# 理解laravel中的事件和广播
# 一、准备
依赖文件的重新加载
composer dumpautoload
1
# 二、认识event和boardcast
有的事件会触发广播
# 三、广播的配置
# 3.1 启用广播
config\app.php 中开启广播服务提供者
//App\Providers\BroadcastServiceProvider::class,
去掉注释
1
2
2
# 3.2 配置广播的驱动
log(发送信息到本地日志)
pusher(借助第三方推送服务)
redis(自己搭建websocket服务,来实现推送 tlaverdure/laravel-echo-server)
nodejs(socket.io)
websocket(ws)
http(http)
# 3.3 前端需要安装依赖
Laravel Echo pusher-js
npm install --save laravel-echo push-js
1
# 3.4 pusher作为广播系统的操作细节
# 开启广播
app.php
# 配置广播驱动为pusher
# pusher网站申请Your Channels Apps
获取应用程序相关的推送项目信息 存入到后端的.env配置文件
PUSHER_APP_ID=798223
PUSHER_APP_KEY=bd2e1850d92c0d4abddd
PUSHER_APP_SECRET=fabaaa05ec5f1ea85d34
PUSHER_APP_CLUSTER=ap1
1
2
3
4
2
3
4
# 后端安装插件pusher-php-server
composer require pusher/pusher-php-server "~3.0"
1
# 建立事件,然后事件中启用广播和配置广播的频道
php artisan make:event UserLogin
1
# 配置事件的频道
Channel()、PrivateChannel(),
# 前端vue.js的SPA项目里面安装插件(larvel-echo pusher-js)
main.js文件中编写下面代码
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your-pusher-key', // 关键部分,与pusher官网上申请到的要一致
cluster: 'youer-cluster',
encrypt: true
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 后端发送广播
event(new Login($user))
1
# 前端处理接收信息
window.Echo.channel('login-test')
.listen('Login', (e) => {
console.log(e.order.name);
});
1
2
3
4
2
3
4
chancel->'发送的广播频道' listen -> '触发的事件'
# 3.5 自己搭建websocket 服务,作为pusher来使用
原理:自己搭建websocket来代替pusher服务,所有要使用和laravel匹配的websocket服务,选择社区提供的laravel-echo-server
# 全局安装laravel-echo-server服务
npm install -g laravel-echo-server
1
# 配置laravel-echo-server服务
laravel-echo-server init
1
# 开启后端的websocket服务
laravel-echo-server start
1
# 3.6 事件与广播配置
# 前端安装依赖
npm install --save laravel-echo socket.io-client
1
# 前端mian.js配置安装
import Echo from "laravel-echo"
window.io = require('socket.io-client')
window.Echo = new Echo({
broadcaster: 'socket.io',
host: 'http://restful.test' + ':6001'
});
window.Echo.channel('user-login')
.listen('UserLogin', (e) => {
console.log(e);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 3.7 后端的环境配置
env 文件配置
BROADCAST_DRIVER=redis
1