Laravel-echo-server被坑经历

最新推荐文章于 2025-03-28 10:04:27 发布

qq_17219645

最新推荐文章于 2025-03-28 10:04:27 发布

阅读量1.7k

点赞数 2

分类专栏： php 文章标签： php laravel

本文链接：https://blog.csdn.net/qq_17219645/article/details/115913200

版权

php 专栏收录该内容

1 篇文章

订阅专栏

1.安装 laravel-echo-server（需要先配置node环境）

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

npm install -g laravel-echo-server

2.安装 Predis

进入laravel应用目录，终端输入下面的命令

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项目的访问域名（默认为localhost）
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.

切记在生产环境中，应该关掉你的开发者模式。

5.启动Laravel-echo-server服务

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

运行如下图
laravel-echo-server启动
上图4个都打勾则表示启动成功。如果出现第四个报错，则先去启动你的redis并确认启动无误后配置 .env（我在这踩的第一个坑😂）

BROADCAST_DRIVER=redis 
QUEUE_CONNECTION=redis

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

打开你的 config/app.php 文件并且取消 BroadcastServiceProvider 在这个 Providers 数组中的注释：

//开启广播服务
App\Providers\BroadcastServiceProvider::class,

6.安装 Socket.io 客户端和 Laravel-Echo 包，如果报错前面加 sudo

在这之前建议运行一下 npm install安装相关依赖

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

7.打开 resources/js/bootstrap.js 文件，或者你自己的引入所有 JS 基础代码的 JS 文件。

import Echo from 'laravel-echo'

window.io = require('socket.io-client');
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'	//6001为端口号
});

8.准备测试页面，我的是resources/views/news.blade.php(根据自己自定义即可)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>等待广播事件</title>
    <link href="css/app.css'" rel="stylesheet">
</head>
<body>
<div class="content" id="app">
    等待广播事件
</div>
{{--<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.js"></script>--}}
{{--引入app.js--}}
<script src="js/app.js"></script>
<script>
    // ’news'是频道，‘News’ 是监听的事件（这是事件的类名，你也可以根据你的需要进行自定义）
    Echo.channel('news')
        .listen('News', (e) => {
            console.log(e.message );
            console.log(e);
        });
</script>
</body>
</html>

9.在终端运行

npm run dev

10.创建事件类

php artisan make:event News

代码如下：

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class News implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        //
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        //权限频道
//        return new PrivateChannel('channel-name');

        //让所有用户都能接受到，或者说都有权限
        return new Channel('news');
    }

    // 处理事件时返回的数据
    public function broadcastWith()
    {
        return [
            'message' => $this->message
        ];
    }
}

然后在/route/channels.php文件中加入以下代码：

Broadcast::channel('news',function (){
    //发送到频道里面去执行
    return true;
});

11.创建消息推送命令（用来模拟推送信息）

在/route/console.php文件中加入以下代码：

//定义消息推送命令
Artisan::command('bignews',function (){
    broadcast(new \App\Events\News(date('Y-m-d H:i:s A').'开始消息推送'));
    $this->comment('news send ok');
})->describe('消息通知');

12.启动监听事件队列

先在浏览器中打开new.blade.php页面
再在终端运行：

php artisan queue:listen --tries=1

在终端运行

php artisan bignews

截图如下：
在这里插入图片描述

这里又是一个大坑，频道怎么变了！！！ Channel: laravel_database_news，自动加了前缀！！！
修改config/database.php配置文件

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            //把下面这行注释掉
//            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
        ],