基于 laravel + redis + laravel-echo-server + vue.js 开发消息通知小demo
laravel + redis + laravel-echo-server + vue.js
- 消息推送 -- 基础配置
- 消息推送 -- 公共广播监听
- 消息推送 -- 私有广播监听
- 消息推送 -- 错误解决
消息推送 – 基础配置
- 服务器 - 全局安装laravel-echo-server
npm install -g laravel-echo-server
- 后端接口项目中 - 初始化larvel-echo-server，生成配置文件。
laravel-echo-server init
// 是否在开发模式下运行此服务器（y/n）
? Do you want to run this server in development mode? **Yes**
// 设置服务端口
? Which port would you like to serve from? **6001**
// 驱动
? Which database would you like to use to store presence channel members? **redis**
// 域名
? Enter the host of your Laravel authentication server. **http://demo.test**
// 网络协议
? Will you be serving on http or https? **http**
? Do you want to generate a client ID/Key for HTTP API? **No**
? Do you want to setup cross domain access to the API? **No**
? What do you want this config to be saved as? (laravel-echo-server.json) **回车**
- 服务器 - 启动laravel-echo-server服务
laravel-echo-server start
##################################################
L A R A V E L E C H O S E R V E R
version 1.6.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!
- 象征性得测试是否正常。
浏览器请求： host:6001/socket.io/socket.io.js
###########################
/*!
* Socket.IO v2.3.0
* (c) 2014-2019 Guillermo Rauch
* Released under the MIT License.
*/
.......
- 前端 - 安装laravel-echo依赖
npm install laravel-echo
- 前端 - 连接socket.io，监听 -公共- 广播事件。
import Echo from "laravel-echo"
<script src="//host:6001/socket.io/socket.io.js"></script>
window.Echo = new Echo({
broadcaster: 'socket.io',
host: 'host:6001'
});
Echo.channel('广播名')
.listen('事件名', (e) => {
console.log(e);
});
- 如果出现以下情况表示成功。
L A R A V E L E C H O S E R V E R
version 1.6.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!
[9:41:11 AM] - CPUrobryRIXQtphSAAAB joined channel: 广播名
- 配置env文件
BROADCAST_DRIVER=redis
QUEUE_DRIVER=redis
- 安装Predis库
composer require predis/predis
- 注册广播服务提供者
// config/app.php 中providers数组下解除注释
App\Providers\BroadcastServiceProvider::class,
消息推送 – 公共广播监听
- 后端 - 创建广播事件类，编辑代码
// 创建事件类
php artisan make:event PublicMessageEvent
....
class PublicMessageEvent implements ShouldBroadcast
{
.....
// 定义频道名称
public function broadcastOn()
{
return new Channel('pushMessage');
}
/**
* 控制广播数据
* @return mixed
*/
public function broadcastWith()
{
return ["message"=>"类好啊"];
}
}
- 后端 - 写一个触发广播事件的路由。
// routes/web.php
Route::get('/', function () {
broadcast(new PublicMessageEvent());
});
- 前端 - 监听公共的广播事件
import Echo from "laravel-echo"
<script src="host(你的域名):6001/socket.io/socket.io.js"></script>
window.Echo = new Echo({
broadcaster: 'socket.io',
host: 'host(你的域名):6001'
});
Echo.channel('pushMessage')
.listen('PublicMessageEvent', (e) => {
console.log(e);
});
-
效果图
消息推送 – 私有广播监听
- 后端 - 创建广播事件类，编辑代码
// 创建事件类
php artisan make:event PrivateMessageEvent
....
class PrivateMessageEvent implements ShouldBroadcast
{
private $admin_id;
public function __construct( $admin_id)
{
$this->admin_id = $admin_id;
}
// 定义频道名称
public function broadcastOn()
{
return new PrivateChannel('pushPrivateMessage'.$this->admin_id);
}
/**
* 控制广播数据
* @return mixed
*/
public function broadcastWith()
{
return ['message'=>"类好呀"];
}
}
- 后端 - 写一个私有广播鉴权路由
// routes/channels.php
Broadcast::channel('pushPrivateMessage.{id}', function () {
return true;
});
- 前端 - 监听私有的广播事件
// 后面拼接得按说是 用户id 用来标识私有广播得。 现在暂且用 1
Echo.private('pushPrivateMessage.' + 1)
.listen('PrivateMessageEvent', (e) => {
alert(JSON.stringify(e));
});
- 后端 - 写一个触发广播事件的路由。并请求调用
// routes/web.php
Route::get('/', function () {
// 这里也默认传1
broadcast(new PrivateMessageEvent(1));
});
- 效果图
消息推送 – 错误解决
-
linux 中 npm install 安装失败
解决: npm install --ignore-scripts -
linux 中 npm 启动失败
解决 : 删掉package.json中scripts对象中带有cross-env，切记devDependencies中的不要删 -
连接报 - 404
解决: 看是否注册广播服务提供者。解决2: php artisan config:cache 重新生成缓存。 -
连接报 - 419
解决 : 将app/Http/Kernel.php文件中 $middlewareGroups属性中 \App\Http\Middleware\VerifyCsrfToken::class注释掉，意思是全局关闭csrf -
连接报 - 403
解决 : 将vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/RedisBroadcaster.php第50行的抛异常注释掉。
关于 laravel + redis + laravel-echo-server + vue.js 之间如何交互的，及原理 敬请等待…