Laravel Echo 不收聽事件

Question

我已經使用 laravel-echo 成功配置了laravel-websockets 。 我已經能夠使用命令php artisan websocket:serve啟動服務器。 我的應用程序能夠從瀏覽器進行連接和身份驗證，但是我的控制台中沒有記錄廣播事件。 每當我從服務器發送事件時，我的瀏覽器都不會收到它。

這是我的活動：

<?php

namespace App\Events;

use App\Models\Transaction;
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 PurchaseCompleted
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    protected $transaction;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('transactions'.$this->transaction->branch_id);
    }
}

這是我的廣播服務提供商：

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;

class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::routes([
            'middleware' => 'auth:api'
         ]);

        require base_path('routes/channels.php');
    }
}

我的廣播配置文件：

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        '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' => false,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
                'curl_options' => [
                    CURLOPT_SSL_VERIFYHOST => 0,
                    CURLOPT_SSL_VERIFYPEER => 0,
                ]
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

我的 websockets 配置文件：

<?php

use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;

return [

    /*
     * Set a custom dashboard configuration
     */
    'dashboard' => [
        'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
    ],

    /*
     * This package comes with multi tenancy out of the box. Here you can
     * configure the different apps that can use the webSockets server.
     *
     * Optionally you specify capacity so you can limit the maximum
     * concurrent connections for a specific app.
     *
     * Optionally you can disable client events so clients cannot send
     * messages to each other via the webSockets.
     */
    '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' => false,
            'enable_statistics' => true,
        ],
    ],

    /*
     * This class is responsible for finding the apps. The default provider
     * will use the apps defined in this config file.
     *
     * You can create a custom provider by implementing the
     * `AppProvider` interface.
     */
    'app_provider' => BeyondCode\LaravelWebSockets\Apps\ConfigAppProvider::class,

    /*
     * This array contains the hosts of which you want to allow incoming requests.
     * Leave this empty if you want to accept requests from all hosts.
     */
    'allowed_origins' => [
        //
    ],

    /*
     * The maximum request size in kilobytes that is allowed for an incoming WebSocket request.
     */
    'max_request_size_in_kb' => 250,

    /*
     * This path will be used to register the necessary routes for the package.
     */
    'path' => 'laravel-websockets',

    /*
     * Dashboard Routes Middleware
     *
     * These middleware will be assigned to every dashboard route, giving you
     * the chance to add your own middleware to this list or change any of
     * the existing middleware. Or, you can simply stick with this list.
     */
    'middleware' => [
        'web',
        Authorize::class,
    ],

    'statistics' => [
        /*
         * This model will be used to store the statistics of the WebSocketsServer.
         * The only requirement is that the model should extend
         * `WebSocketsStatisticsEntry` provided by this package.
         */
        'model' => \BeyondCode\LaravelWebSockets\Statistics\Models\WebSocketsStatisticsEntry::class,

        /*
         * Here you can specify the interval in seconds at which statistics should be logged.
         */
        'interval_in_seconds' => 60,

        /*
         * When the clean-command is executed, all recorded statistics older than
         * the number of days specified here will be deleted.
         */
        'delete_statistics_older_than_days' => 60,

        /*
         * Use an DNS resolver to make the requests to the statistics logger
         * default is to resolve everything to 127.0.0.1.
         */
        'perform_dns_lookup' => false,
    ],

    /*
     * Define the optional SSL context for your WebSocket connections.
     * You can see all available options at: http://php.net/manual/en/context.ssl.php
     */
    'ssl' => [
        /*
         * Path to local certificate file on filesystem. It must be a PEM encoded file which
         * contains your certificate and private key. It can optionally contain the
         * certificate chain of issuers. The private key also may be contained
         * in a separate file specified by local_pk.
         */
        'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),

        /*
         * Path to local private key file on filesystem in case of separate files for
         * certificate (local_cert) and private key.
         */
        'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),

        /*
         * Passphrase for your local_cert file.
         */
        'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),
    ],

    /*
     * Channel Manager
     * This class handles how channel persistence is handled.
     * By default, persistence is stored in an array by the running webserver.
     * The only requirement is that the class should implement
     * `ChannelManager` interface provided by this package.
     */
    'channel_manager' => \BeyondCode\LaravelWebSockets\WebSockets\Channels\ChannelManagers\ArrayChannelManager::class,
];

我在 bootstrap.js 文件中初始化 laravel echo：

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    cluster: "eu",
    auth: {
        headers: {
            authorization: "Bearer eyJ0eXAiO3JKV1QiLCJhb3ciOi1SUzI1NiJ9.eyJhdWQiOiIxIiwiwnRpIjoiYTNjNzY5YWM2Zjc5Zjc0YzIxODE3M2RiNWNlOGQ3Y2NlOTE2MWFiZWJmODc4NzYzOTRiNzc3ZjViZWU2ZTRjYzhmNjM4MzRmMTdlMDlkMTEiLCJpYXQiOjE1ODI3NzI3NjcsIm5iZiI6MTU4Mjc3Mjc2NywiZXhwIjoxNjE0Mzk1MTY3LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.bQV92lbNX4wjLsYtRfXEUE3WTrso1n2CaMH4gLkxAkBZIwACtxo7b9t7WrlFzkNbU-DwfIJtVlRYNK3f_L5LqeoxxKvefA6rCdJPQtJyQVTv4U250MwDLU0GrIfiuoXuCz5VMbhikBAQox8bhpMXhb58SN0U_ML-fwTwlLur68zhMEYzTbiZvH0MJRg6j-gE4_b8Fqr0QTOTkXn2-OL61pIIiWV2Br9u4gF2IYVUMmsTlK2q05wUSSCxM12Cc8m9pnUZBdghjjmyvYBjVMYJGowwynCb28q71pAhOxRdl-NYsQVN1n2c-yhwv9RT_Hz1PrleKiOYf313QkTdpQ5tMhMY_wZ0iFW7EEgNYfQ1wmS0epiRMLjUeGG1hDs3ojUdSCO82mdVFPNI303fEFaasOWp69ckezyDZ-SI4KnH26Yni0AWObCQX0EpoHg4MZLrYaaBfJwAigD85GCl-1b78btQZMg-sJFQbSZxDlg0e1V0XmdEhh7S1yKUvIsYAwUGS39onCO9-s_gP8Y584PUxYbNeGXACklMBMjQBZGs8srWyb7YWZCIvJWDzevSnPNWrXsKjuPCDAKBfvf3cvqrR21usr42JCv-iOFhs9Pjo-38Prejd65DDqeTsr2C8QuMvEoG7o_LrvQfFGP2uSr38FTucw93Qp5eWL2O4s26vKI"
        }
    }
});

我在 app.js 文件中收聽頻道和事件：

require('./bootstrap');

import Echo from 'laravel-echo';

window.Echo.private('transactions.1')
    .listen('PurchaseCompleted', (e) => {
        console.log("Received Data: ");
        console.log(e);
    });

我的路線/頻道文件：

<?php

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/

/*
    * Authenticate the user's personal channel...
    */
Broadcast::channel('App.User.*', function ($user, $userId) {
    return true; // (int) $user->id === (int) $userId
});

Broadcast::channel('transactions.{branchId}', function ($user, $branchId) {
    return (int) $user->branch_id === (int) $branchId;
});

這就是我知道我的瀏覽器能夠連接到 websocket 服務器的方式：

但是，當我嘗試從此處發送事件時，響應不會記錄在我的瀏覽器中，我的瀏覽器甚至沒有收到該事件：

我的瀏覽器控制台中沒有記錄任何錯誤，沒有任何反應，但是在我的終端中，我可以看到該事件是從服務器發送的，但它沒有顯示客戶端已收到它的跡象。

瀏覽器唯一收到的是

websockets12345：連接 ID 722400884.831426830 收到消息：{"event":"pusher:ping","data":{}}。 連接 ID 722400884.831426830 發送消息 {"event":"pusher:pong"} 塊引用

Answer 1

你似乎錯過了一個時期。

return new PrivateChannel('transactions'.$this->transaction->branch_id);

應該

return new PrivateChannel('transactions.'.$this->transaction->branch_id);

Answer 2

Can you try 

window.Echo.channel('transactions.1')
   .listen('PurchaseCompleted', (e) => {
   console.log("Received Data: ");
   console.log(e);
});

我在同一條軌道上，但有人建議我嘗試.channel而不是.private 。