本地环境下Laravel Echo集成Pusher无响应问题求助

已成功连接Pusher且完成所有配置，但JavaScript端无法接收事件，控制台无任何输出，仅返回状态码101。

已执行的操作步骤 #

依赖版本 #

"pusher/pusher-php-server": "^7.2",
"laravel-echo": "^1.16.0",
"pusher-js": "^8.4.0-rc2",

1. .env配置

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=098576747
PUSHER_APP_KEY=34kkh4jhj56mn7nl7h5
PUSHER_APP_SECRET=h4857jfhf83746565
PUSHER_APP_CLUSTER=eu

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

2. bootstrap.js配置

window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.$ = require('jquery');

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    forceTLS: true
});

3. app.js配置

Echo.channel('notifications')
    .listen('LogInLogOutEvent', (e) => {
        console.log(e)
    })

4. laravel.log内容
   

5. broadcasting.php配置

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
                'encrypted' => true,
            ],
        ],

6. LogInLogOutEvent事件类

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

    public $message;
    public $type;

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


    public function broadcastOn()
    {
        Log::debug($this->message);
        Log::debug($this->type);
        return new Channel('notifications');
    }
}

7. 登录/登出监听器

public function handle(Login $event): void
{
    broadcast(new LogInLogOutEvent("{$event->user->name} is online", 'success'));
}

public function handle(Logout $event): void
{
    broadcast(new LogInLogOutEvent("{$event->user->name} is offline", 'danger'));
}

8. EventServiceProvider.php配置

Login::class => [
            LogInListener::class,
        ],
        Logout::class => [
            LogOutListener::class,
        ],

9. 相关截图
   
   
   

排查修复步骤 #

1. 修正事件监听名称
   Laravel Echo默认监听事件的全类名，而非单纯类名。两种解决方式：

• 前端监听时加前缀点号：

Echo.channel('notifications')
    .listen('.LogInLogOutEvent', (e) => {
        console.log(e)
    })

• 或在事件类中定义别名：

public function broadcastAs()
{
    return 'LogInLogOutEvent';
}

2. 重新编译前端资源
   修改.env或前端配置文件后，必须重新编译注入环境变量：

npm run dev # 开发环境
# 或
npm run prod # 生产环境

3. 验证Pusher事件推送
   登录Pusher控制台，进入应用的Debug Console，检查notifications频道是否有事件推送。如果没有：

• 确认队列服务运行（若用队列广播）：php artisan queue:work
• 检查广播功能是否被禁用（比如测试环境默认关闭广播）

4. 确认监听器触发状态
   在监听器handle方法中添加日志：

public function handle(Login $event): void
{
    Log::info('登录监听器触发：'.$event->user->name);
    broadcast(new LogInLogOutEvent("{$event->user->name} is online", 'success'));
}

查看laravel.log是否有对应日志，确认监听器是否被正确调用。

5. 注意状态码101的含义
   状态码101是WebSocket握手成功的标志，并非错误，无需担心。

内容的提问来源于stack exchange，提问作者Mohsen