Laravel-websockets: Client Side Event not Triggering

Created on 18 Mar 2019  路  8Comments  路  Source: beyondcode/laravel-websockets

I am triggering an event but it is not printing in my console on client side.
When I trigger event with the dashboard event creator then it works and prints message in console. Even with tinker it doesnt works as expected.

I am using Laravel V5.8 and not using valet

I tried with two way as shown below but none of them prints.

//Blade View file.
<script src="{{asset('js/app.js')}}"></script>
        <script>
            Echo.channel('home')
                .listen('NewMessage', (e) => {
                    console.log(e.message);
                });

            Echo.channel('home').on('.NewMessage', function (data) {
                console.log(data.message);
            });
        </script>
//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,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: false,
    wsHost: window.location.hostname,
    wsPort: 6001,
});
//Event Class
class NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

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



md5-a324137248e4202da7f5d1f88e23507b



//Web Route
Route::get('/test', function () {
     event(new NewMessage('Sent from my Laravel application'));
     return 'Event Fired';
});



md5-a324137248e4202da7f5d1f88e23507b



//.env file
BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

PUSHER_APP_ID=12345
PUSHER_APP_KEY=ABCDEFG
PUSHER_APP_SECRET=HIJKLMNOP
PUSHER_APP_CLUSTER=mt1

I followed websockets docs and this

Most helpful comment

Try php artisan config:cache
I had the same problem because I forgot to cache after editing the settings

All 8 comments

You need to enable client_messages

by change
'enable_client_messages' => false,
to
'enable_client_messages' => true,
in config/websockets.php
@abhiburk

I am also having this problem even with 'enable_client_messages' => true,

First check if you have change your app name if yes then try to give full path of your notification class. Also try to give dot . Before your path or class name.

"dot . Before your path or class name." this worked, thank you

@rbreahna please, show your result code

@ankkk
on client side i have this test code compiled with browserify:

require('pusher-js');
var Echo = require('laravel-echo');


window.Echo = new Echo(
    {
        broadcaster: 'pusher',
        key: 'SOMEKEY',
        //cluster: 'mt1',
        wsHost: 'websocket.host', //your socket server
        disableStats: true,
        encrypted: false
    }
);

window.Echo.channel('test')
    .listen('.test', function (data) {
        console.log(data);
    });

//browserify main.js -o bundle.js

on the package dashboard I just send a test event on channel test
and this code logs it to the browser console.

You have an error in your event NewMessage class.
Replace $this->$message = $message;
with $this->message = $message;

Try php artisan config:cache
I had the same problem because I forgot to cache after editing the settings

Was this page helpful?
0 / 5 - 0 ratings

Related issues

stefandanaita picture stefandanaita  路  4Comments

ahmed-aliraqi picture ahmed-aliraqi  路  4Comments

connecteev picture connecteev  路  3Comments

vesper8 picture vesper8  路  3Comments

ElegantSoft picture ElegantSoft  路  3Comments