Laravel 5.8 Laravel-echo-server教程坑满满

电玩女神 2024-04-18 11:19 53阅读 0赞

首先我不得吐槽一下，网上写教程真是坑满满，全在教程里面爬坑！！！度娘更不靠谱?

教程基于5.8 顺便提醒一下低版本的问题

环境：

*  Laravel 框架 （5.8 版本）
 *  Redis 服务

### **1.安装 laravel-echo-server** ###

首先我们需要全局安装 laravel-echo-server ,终端输入下面的命令

npm install -g laravel-echo-server

安装完成后，打开你的 Laravel 应用，或新启一个测试项目

$ composer create-project --prefer-dist laravel/laravel echo-test

### **2.安装 Predis** ： ###

$ composer require predis/predis

### **3.初始化 Socket 服务：** ###

$ laravel-echo-server init

执行这条命令后，会询问你一些关于 Socket 服务的配置信息，**这段摘得……将就一下**

// 是否在开发模式下运行此服务器（y/n） 输入y
    ? Do you want to run this server in development mode? (y/N) 
    
    // 设置服务器的端口 默认 6001 输入 6001就可以了 或者你想要的
    ? Which port would you like to serve from? (6001)
    
    // 想用的数据库  选择 redis
    ? Which database would you like to use to store presence channel members? (Use arrow keys)
    ❯ redis 
      sqlite 
    
    //   这里输入 你的laravel  项目的访问域名
    ? Enter the host of your Laravel authentication server. (http://localhost) 
    
    // 选择 网络协议 http
    ? Will you be serving on http or https? (Use arrow keys)
    ❯ http 
      https 
    
    // 您想为HTTP API生成客户端ID/密钥吗 N
    ? Do you want to generate a client ID/Key for HTTP API? (y/N) 
    
    // 要设置对API的跨域访问吗？（y/n）N
    Configuration file saved. Run laravel-echo-server start to run server.

## ##

### **4.laravel-echo-server.json配置文件，这个文件处于执行上面命令的目录下** ###

{
    	"authHost": "http://laravel6:7888", // 自己的laravel服务端
    	"authEndpoint": "/broadcasting/auth", // 权限认证接口，如果是前后端分离地址是：/api/broadcasting/auth
    	"clients": [],
    	"database": "redis",
    	"databaseConfig": {
    		"redis": {},
    		"sqlite": {
    			"databasePath": "/database/laravel-echo-server.sqlite"
    		}
    	},
    	"devMode": true, // 调试打印
    	"host": null,
    	"port": "6001",
    	"protocol": "http",
    	"socketio": {},
    	"secureOptions": 67108864,
    	"sslCertPath": "",
    	"sslKeyPath": "",
    	"sslCertChainPath": "",
    	"sslPassphrase": "",
    	"subscribers": {
    		"http": true,
    		"redis": true
    	},
    	"apiOriginAllow": {
    		"allowCors": false,
    		"allowOrigin": "",
    		"allowMethods": "",
    		"allowHeaders": ""
    	}
    }

### **5.启动服务** ###

laravel-echo-server start  启动
    
    laravel-echo-server stop  停止

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70][]

四个全部打勾就代表启动OK了。但是应该有90%的会出现第四个报错！！！！也是很多教程没讲清楚的地方，

出现报错，先去启动你的redis 确认启动无误后开始配置 .env

BROADCAST_DRIVER=redis
    
    QUEUE_CONNECTION=redis
    
    
    REDIS_HOST=127.0.0.1
    REDIS_PASSWORD=null
    REDIS_PORT=6379

按照上面的进行配置，如果redis有其他设定自行修改，如果不是5.8，骚年你应该看不到**QUEUE\_CONNECTION**，请修改**QUEUE\_DRIVER=redis**

### **6.database.php  修改** ###

'client' => env('REDIS_CLIENT', 'predis'),
    
    
    
    'options' => [
    
        'cluster' => env('REDIS_CLUSTER', 'redis'),
    
        // 'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),  // 这个是前缀后面有解释
    
    ],

以上设置完毕 恭喜骚年第一个坑过去了！！！

### **7.接下来我们继续安装 Socket.io 客户端和 Laravel-Echo 包，**在这之前建议运行一下 **npm install  ，如果报错加 sudo** ###

npm install --save socket.io-client
    npm install --save laravel-echo

### **8.现在我们先准备客户端的事情** resources/js/app.js 修改app.js，如果不是5.8自行找对应目录文件 ###

import Echo from 'laravel-echo'
    
    window.io = require('socket.io-client');
    window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: window.location.hostname + ':6001'
    });

### **9.终端运行** ###

npm run dev

### 10.引入到页面，我就是先拿首页来测试了**resources/views/welcome.blade.php** ###

// 头部加入
    <meta name="csrf-token" content="{
       { csrf_token() }}">
    
    // 引入app.js
    <script src="js/app.js"></script>
    
    // 监听并输出
    <script>
    
    //  ’user1'是频道，‘ExampleEvent’ 是监听的事件（这是事件的类名，你也可以根据你的需要自定义）
        window.Echo.channel('user1')
            .listen('ExampleEvent', (e) => {
                console.log(e);
            });
    </script>

### **11.接下来我们开始准备事件，创建一个ExampleEvent事件** ###

php artisan make:event ExampleEvent

这时在 `App/Events` 目录下面会创建一个叫做 `ExampleEvent.php` 的事件类  
事件类继承于 `ShouldBroadcast` 接口

class ExampleEvent implements ShouldBroadcast

找到  `broadcastOn`  函数，在对应的频道上进行广播

// user1就是频道
        public function broadcastOn()
        {
            return new Channel('user1');
            //return new PrivateChannel('channel-name');
        }
    
        // 处罚事件时返回的数据
        public function broadcastWith()
        {
            return [
                'data' => '老雷啊   坑满满'
            ];
        }

**现在添加一条路由用来测试，这里也可以通过控制器去发送，相关看事件文档**

Route::get('user1', function(){
        broadcast(new \App\Events\ExampleEvent);
    });

**现在启动监听事件列队**

php artisan queue:listen --tries=1

现在我们可以开始测试，先打开首页，如果你定义了其他路由自行打开，我就默认的欢迎页面?！

如果看到下面页面  恭喜骚年你已经和服务器连接上了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 1][]

**服务端**

![20190905234814474.png][]

**现在我们打开事件路由广播一条消息，打开另一个页面访问  **`/user1，如果你设定了控制器访问对应的路由就是了，访问以后是空白不必紧张，我们先在终端看看队列，如果什么都没有输出，自行检查redis相关配置，以及查看redis库内是否有数据。正确会看到下面图，刷新一次页面会出现一条`

![20190905235214667.png][]

**然后我们可以看看第一个页面收到消息没！**

**下图什么都没收到，但是连接正常，骚年又进入坑了！哈哈！**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 2][]

如果正常就可以略过这一步了，基本都是5.8版本的问题，其他也没测试，我们先看看服务端显示什么

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 3][]

骚年有没有发现 **Channel: laravel\_database\_user1，频道怎么变了！！！?，是的自动加了前缀！！！**

**找到config/database.php配置文件**

'options' => [
                'cluster' => env('REDIS_CLUSTER', 'predis'),
                // 删掉这一行或是注释掉
                'prefix' => Str::slug(env('APP_NAME', 'laravel'), '_').'_database_',  
            ],

然后我们再次**重新启动服务和队列，刷新两个页面**

就可以正常接收消息了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 6][]

**拓展点小知识！为什么会自动发送  2，3**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 7][]

### 这是 [Engine .io][]协议，其中的数字是数据包编码： ###

`0 open`

在打开新传输时从服务器发送（重新检查）

`1 close`

请求关闭此传输，但不关闭连接本身。

`2 ping`

由客户端发送。服务器应该用包含相同数据的乓包应答

示例1.客户端发送：2probe 2.服务器发送：3probe

`3 pong`

由服务器发送以响应ping数据包。

`4 message`

实际消息，客户端和服务器应该使用数据调用它们的回调。

实施例1

服务器发送：4HelloWorld客户端接收并调用回调socket.on（'message'，function（data）\{console.log（data）;\}）;

实施例2

客户端发送：4HelloWorld服务器接收并调用回调socket.on（'message'，function（data）\{console.log（data）;\}）;

`5 upgrade`

在engine.io切换传输之前，它测试，如果服务器和客户端可以通过这个传输进行通信。如果此测试成功，客户端发送升级数据包，请求服务器刷新其在旧传输上的缓存并切换到新传输。

`6 noop`

noop数据包。主要用于在接收到传入WebSocket连接时强制轮询周期。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/89b54ebcf724427ebde6cc36a422b60e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/881f394043e94300900b3863e96e3edd.png
[20190905234814474.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c610796ae4274bc08d12922e93999d23.png
[20190905235214667.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/91a2c145545941c59fd84cb0d7e5486b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8addbabaabf54a85a947ab34327bf6e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1b3474f7c0ac4e58a37bed3a7af6b0bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/28dd6df0684e4061a9e010a780a7faf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4fd8aa8e7fc4464caf77536f32709fb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/93bfd985baf64cd9b331ab3a6647268b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N5bTEzNA_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/07a586c5ee234cad9ae56e1e06e90f88.png
[Engine .io]: https://github.com/socketio/engine.io-protocol/blob/master/README.md