基于 laravel + redis + laravel-echo-server + vue.js 开发消息通知小demo

消息推送 – 基础配置

1. 服务器 - 全局安装laravel-echo-server

	npm install -g laravel-echo-server

3. 后端接口项目中 - 初始化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) **回车**	

4. 服务器 - 启动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!

5. 象征性得测试是否正常。

	浏览器请求： host:6001/socket.io/socket.io.js
	
	###########################
	/*!
	 * Socket.IO v2.3.0
	 * (c) 2014-2019 Guillermo Rauch
	 * Released under the MIT License.
	 */
	.......

6. 前端 - 安装laravel-echo依赖

 
	 npm install laravel-echo
 

8. 前端 - 连接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);
	});

9. 如果出现以下情况表示成功。

	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: 广播名

11. 配置env文件

	BROADCAST_DRIVER=redis
	QUEUE_DRIVER=redis

12. 安装Predis库

	composer require predis/predis

13. 注册广播服务提供者

// config/app.php 中providers数组下解除注释
App\Providers\BroadcastServiceProvider::class,

消息推送 – 公共广播监听

1. 后端 - 创建广播事件类，编辑代码

	// 创建事件类
	php artisan make:event PublicMessageEvent 
	
	<?php
		
		....

		class PublicMessageEvent implements ShouldBroadcast
		{
		    .....
		
		   	// 定义频道名称
		    public function broadcastOn()
		    {
		        return new Channel('pushMessage');
		    }
		
		    /**
		     * 控制广播数据
		     * @return mixed
		     */
		    public function broadcastWith()
		    {
		        return ["message"=>"类好啊"];
		    }
		
		
		}
	

2. 后端 - 写一个触发广播事件的路由。

	 // routes/web.php
	 Route::get('/', function () {
	    broadcast(new PublicMessageEvent());
	 });
	 

3. 前端 - 监听公共的广播事件

	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);
	});

4. 效果图

   

消息推送 – 私有广播监听

1. 后端 - 创建广播事件类，编辑代码

	// 创建事件类
	php artisan make:event PrivateMessageEvent 
	
	<?php
		
		....

		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'=>"类好呀"];
		    }
		
		
		}
	

2. 后端 - 写一个私有广播鉴权路由

	// routes/channels.php
	Broadcast::channel('pushPrivateMessage.{id}', function () {
	    return true;
	});

3. 前端 - 监听私有的广播事件

	// 后面拼接得按说是 用户id 用来标识私有广播得。 现在暂且用 1 
	Echo.private('pushPrivateMessage.' + 1)
	.listen('PrivateMessageEvent', (e) => {
	   alert(JSON.stringify(e));
	});
	

4. 后端 - 写一个触发广播事件的路由。并请求调用

	 // routes/web.php
	 Route::get('/', function () {
	 	// 这里也默认传1
	    broadcast(new PrivateMessageEvent(1));
	 });
	 

6. 效果图

消息推送 – 错误解决

1. linux 中 npm install 安装失败

   解决:  npm install --ignore-scripts
   

2. linux 中 npm 启动失败

   解决 : 删掉package.json中scripts对象中带有cross-env，切记devDependencies中的不要删
   

3. 连接报 - 404

   解决: 看是否注册广播服务提供者。解决2: php artisan config:cache 重新生成缓存。
   

4. 连接报 - 419

   解决 : 将app/Http/Kernel.php文件中 $middlewareGroups属性中 \App\Http\Middleware\VerifyCsrfToken::class注释掉，意思是全局关闭csrf
   

5. 连接报 - 403

   解决 : 将vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/RedisBroadcaster.php第50行的抛异常注释掉。
   

关于 laravel + redis + laravel-echo-server + vue.js 之间如何交互的，及原理 敬请等待…