Laravel-echo-server 加入不了频道

问题

按照 广播系统 配置后，队列启动正常，laravel-echo-server start正常，事件触发后，laravel-echo-server也有日志，但是前端页面没有加入频道，导致消息不能接收。

环境

• Windows
• Laravel Framework 7.30.0
• PHP 7.2.31
• Redis 3.2.100
• Laravel echo server 1.6.2

配置

.env

...
BROADCAST_DRIVER=redis
CACHE_DRIVER=redis
QUEUE_CONNECTION=redis

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
...

app.php

...
'providers'=>[
    App\Providers\BroadcastServiceProvider::class,
]
...

queue.php

...
'redis' => [
  'driver' => 'redis',
  'connection' => 'default',
  'queue' => 'default',
  'retry_after' => 90,
  'block_for' => null,
],
...

database.php

...
'redis' => [

  'client' => env('REDIS_CLIENT', 'predis'),

  'options' => [
      'cluster' => env('REDIS_CLUSTER', 'redis'),
      'prefix' => '',
  ],

  'default' => [
      'url' => env('REDIS_URL'),
      'host' => env('REDIS_HOST', '127.0.0.1'),
      'password' => env('REDIS_PASSWORD', null),
      'port' => env('REDIS_PORT', 6379),
      'database' => env('REDIS_DB', 0),
  ],

  'cache' => [
      'url' => env('REDIS_URL'),
      'host' => env('REDIS_HOST', '127.0.0.1'),
      'password' => env('REDIS_PASSWORD', null),
      'port' => env('REDIS_PORT', 6379),
      'database' => env('REDIS_CACHE_DB', 1),
    ],
],
...

broadcasting.php

...
'default' => env('BROADCAST_DRIVER', 'null'),
...
'redis' => [
  'driver' => 'redis',
  'connection' => 'default',
],
...

laravel-echo-server.json

{
  "authHost": "http://www.hawaii.local/",
  "authEndpoint": "/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": ""
  }
}

事件

ExampleEvent.php

<?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 ExampleEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('test-event');
    }
    public function broadcastWith()
    {
        return [
            'time' => time(),
        ];
    }
}

前端页面

bootstrap.js

import Echo from "laravel-echo"

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

app.js

require('./bootstrap');
...
const app = new Vue({
  el: '#app',
  mounted() {
    this.echo();
  },
  methods: {
    echo() {
      console.log(123456);
      window.Echo.channel('test-event').listen('ExampleEvent', (e) => {
    console.log(e);
  });
});

队列截图

laravel-echo-server 截图

Network截图

补充

我是按照 这篇文章 操作的，其中的截图
可以很清楚地看到 xxx joined channel: test-event，但是我这边只有事件触发的日志，没有用户加入频道的日志输出。