mdev11's avatar
Level 1

Laravel websocket message not reaching others on localhost

I'm trying to build a real-time notification system.

config/broadcasting.php:

'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'),
                'encrypted' => false,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],
]

.env:

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_APP_CLUSTER=ap1

Events/CommentCreated.php:

class CommentCreated implements ShouldBroadcast
{
        public function broadcastOn()
        {
            return new PrivateChannel('notifications');
        }
}

routes/channels.php:

Broadcast::channel('notifications', function ($user) {
    return true;
});

resources/js/bootstrap.js:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'app-key',
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
    cluster: 'ap1',
    authEndpoint: 'http://localhost/project/public/broadcasting/auth'
});

resources/js/app.js:

require('./bootstrap');

window.Echo.private('notifications')
    .listen('CommentCreated', (e) => {
        console.log('test');
});

routes/web.php:

Route::get('send', function(){
    event(new CommentCreated('test'));
});

Route::get('receive', function(){
    echo '<script src="' . asset('js/app.js') . '"></script>';
});

When I visit HTTP://localhost/project/public/receive and go to the network tab I see the following:

{"event":"pusher:connection_established","data":"{\"socket_id\":\"154066640.435471633\",\"activity_timeout\":30}"}

{"event":"pusher:subscribe","data":{"auth":"app-key","channel":"private-notifications"}}

{"event":"pusher_internal:subscription_succeeded","channel":"private-notifications"}

Then, I visit this page to send event HTTP://localhost/project/public/send and move to the receive tab and view both network and console there is nothing about the fired event.

Why the event not reaching HTTP://localhost/project/public/receive ?

0 likes
0 replies

Please or to participate in this conversation.