Laravel Echo 不监听公共频道事件？

Question

I am using Laravel Websockets package.Everything looks great on server side but Laravel Echo is not listening to events.. MySocketEvent.php:

<?php

namespace App\Events;

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

class MySocketEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $data;

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

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('DemoChannel.1');
    }

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

Web.php

Route::get('tests',function(){

    $arr=['some'=>'some'];

    broadcast(new \App\Events\MySocketEvent($arr));
    return view('hi');


});

Bootstrap.js

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
   

    broadcaster: 'pusher',
    //key: process.env.MIX_PUSHER_APP_KEY,
    key: 'my-key',
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,

    disableStats: true,
    cluster: 'ap2',
    //cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    //encrypted: true
});


//subscribe-for-the-test-demo-channel-and-listen

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

I see the data sent from server by using php artisan WebSockets:serve but Laravel Echo does not listen. Please help. I'm 100% sure problem is with Laravel Echo.

Answer 1

The "dot" before "testing"

Broadcasting As " testing "

Listening For " .testing "

Replace this

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

To this

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

Update:

Add this line to your event file

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

Replace this

class MySocketEvent implements ShouldBroadcast

To this

class MySocketEvent implements ShouldBroadcastNow

Answer 2

I was able to get Echo working by downgrading pusher to 4.4.0

npm install pusher-js@4.4.0