文档中心
首页
  • HTML
  • CSS
  • JavaScript
  • Vue
  • 前端工程化
  • Laravel
  • MySql
  • Linux
  • 公众号与小程序
  • 其他
  • vue-element-admin
  • vue-antd-admin
  • VuePress
  • 《JavaScript教程》
  • 《JavaScript高级程序设计》
  • 《ES6 教程》
  • 《Vue》
  • 《React》
  • 《TypeScript 从零实现 axios》
  • 《Git》
  • TypeScript
  • vue-element-admin集成模板
  • 商品进销存管理系统
  • 民主测评管理系统
  • 在线考试系统
  • 股票分析系统
  • 利用vue.js和vue-element-admin开发管理系统
  • PHP开发微信公众号
  • Laravel开发RESTful API
  • uni-app开发微信小程序
技术文摘
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
关于
收藏
  • 分类
  • 标签
  • 归档

Evan Xu

前端界的小学生
首页
  • HTML
  • CSS
  • JavaScript
  • Vue
  • 前端工程化
  • Laravel
  • MySql
  • Linux
  • 公众号与小程序
  • 其他
  • vue-element-admin
  • vue-antd-admin
  • VuePress
  • 《JavaScript教程》
  • 《JavaScript高级程序设计》
  • 《ES6 教程》
  • 《Vue》
  • 《React》
  • 《TypeScript 从零实现 axios》
  • 《Git》
  • TypeScript
  • vue-element-admin集成模板
  • 商品进销存管理系统
  • 民主测评管理系统
  • 在线考试系统
  • 股票分析系统
  • 利用vue.js和vue-element-admin开发管理系统
  • PHP开发微信公众号
  • Laravel开发RESTful API
  • uni-app开发微信小程序
技术文摘
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
关于
收藏
  • 分类
  • 标签
  • 归档
  • PHP

  • Laravel

    • laravel命令行操作
    • laravel API接口开发
    • 后端路由
    • 业务开发流程
    • 理解laravel中的事件和广播
      • 一、准备
      • 二、认识event和boardcast
      • 三、广播的配置
        • 3.1 启用广播
        • 3.2 配置广播的驱动
        • 3.3 前端需要安装依赖
        • 3.4 pusher作为广播系统的操作细节
        • 开启广播
        • 配置广播驱动为pusher
        • pusher网站申请Your Channels Apps
        • 后端安装插件pusher-php-server
        • 建立事件,然后事件中启用广播和配置广播的频道
        • 配置事件的频道
        • 前端vue.js的SPA项目里面安装插件(larvel-echo pusher-js)
        • 后端发送广播
        • 前端处理接收信息
        • 3.5 自己搭建websocket 服务,作为pusher来使用
        • 全局安装laravel-echo-server服务
        • 配置laravel-echo-server服务
        • 开启后端的websocket服务
        • 3.6 事件与广播配置
        • 前端安装依赖
        • 前端mian.js配置安装
        • 3.7 后端的环境配置
    • laravel中手机短信的应用与开发
    • laravel中邮件的发送
    • laravel中接口的开发流程
  • ThinkPHP

  • MySql

  • linux

  • 公众号与小程序

  • 其他

  • 后端
  • Laravel
wmhello
2021-11-17
目录

理解laravel中的事件和广播

# 理解laravel中的事件和广播

# 一、准备

依赖文件的重新加载

  composer dumpautoload
1

# 二、认识event和boardcast

有的事件会触发广播

# 三、广播的配置

# 3.1 启用广播

config\app.php 中开启广播服务提供者

 //App\Providers\BroadcastServiceProvider::class,
  去掉注释
1
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

# 后端安装插件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

# 后端发送广播

event(new Login($user))
1

# 前端处理接收信息

window.Echo.channel('login-test')   
    .listen('Login', (e) => {
        console.log(e.order.name);
});
1
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

# 3.7 后端的环境配置

env 文件配置

BROADCAST_DRIVER=redis
1
#pusher
业务开发流程
laravel中手机短信的应用与开发

← 业务开发流程 laravel中手机短信的应用与开发→

最近更新
01
使用VuePress搭建博客系统(一)
08-08
02
利用FreeSSL.cn申请免费SSL证书
07-23
03
民主测评管理系统
07-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 wmhello |备案号:滇ICP备2023013341号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式