Laravel 10中Laravel WebSockets客户端事件无响应求助

在Laravel 10项目中使用Laravel WebSockets和Laravel Echo时，触发openShiftNotification事件后，WebSocket服务端能看到事件，但客户端无任何响应。以下是相关配置及排查建议：

相关配置代码 #

composer.json #

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "beyondcode/laravel-websockets": "^1.14",
        "guzzlehttp/guzzle": "^7.2",
        "joisarjignesh/bigbluebutton": "^2.6",
        "laravel/framework": "^10.0",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8",
        "laravel/ui": "^4.2",
        "pusher/pusher-php-server": "^7.2",
        "react/promise": "2.7",
        "spatie/browsershot": "^3.57",
        "tymon/jwt-auth": "^2.0"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.0",
        "spatie/laravel-ignition": "^2.0"
    }
}

Event文件（app/Events/openShiftNotification.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 openShiftNotification implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public $message;
    
    /**
     * Create a new event instance.
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn()
    {
        return new Channel('openShift');
    }
    
    public function broadcastAs()
    {
        return 'newOpenShiftNotification';
    }
    
}

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'),
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http'
    ],
    'client_options' => [
        // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
    ],
],

websockets.php配置 #

'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'path' => env('PUSHER_APP_PATH'),
        'capacity' => null,
        'enable_client_messages' => true,
        'enable_statistics' => true,
    ],
],

bootstrap.js配置 #

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    // forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    forceTLS: false,
    encrypted: false,
    enabledTransports: ['ws', 'wss'],
});

app.blade.php前端代码 #

@vite(['resources/js/app.js'])
<script>
    window.onload=function(){
        const channel = Echo.channel('openShift');
        channel.subscribed( () => {
            console.log('Test');
        }).listen('.newOpenShiftNotification', (event) => {
            console.log(event);
        });
    };
</script>

相关截图 #

• WebSockets监控页面：
• 页面检查截图：

排查方向与解决方案 #

1. 验证前端WebSocket连接地址
   确认.env文件中设置了VITE_PUSHER_HOST=127.0.0.1和VITE_PUSHER_PORT=6001，否则前端会默认连接Pusher官方服务器，而非本地Laravel WebSockets服务。

2. 检查队列运行状态
   如果事件使用队列广播，需确保队列worker正在运行（执行php artisan queue:work），否则事件会被延迟处理。

3. 确认CORS配置
   在config/cors.php中，确保paths包含/ws，且allowed_origins允许当前前端域名（本地开发通常为http://localhost:8000）。

4. 检查WebSocket连接状态
   打开浏览器开发者工具的Network标签，筛选WS协议，确认是否成功建立到ws://127.0.0.1:6001/app/{PUSHER_APP_KEY}的连接。若连接失败，检查端口是否被占用、Laravel WebSockets服务是否启动（执行php artisan websockets:serve）。

5. 确认广播驱动配置
   检查.env文件中BROADCAST_DRIVER=pusher，而非log或其他驱动。

6. 排查事件数据序列化问题
   确保$message属性可正常序列化，避免包含不可序列化的对象（如Eloquent模型需使用->toArray()转换后传入事件）。

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