skip to Main Content

I’m developing an application with separate Laravel 10 and Vue 3. I wanted to implement real time events with Laravel broadcasting but I’m running into some problems.

I connect to the websockets from the frontend, but I get nothing and when I try to trigger the event from the backend I get the Curl error.

BACKEND LARAVEL

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' => false,
            'enable_statistics' => true,
        ],
    ],`

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

.env (laravel)

BROADCAST_DRIVER=pusher
QUEUE_CONNECTION=sync
PUSHER_APP_ID=local
PUSHER_APP_KEY=local
PUSHER_APP_SECRET=local
PUSHER_APP_CLUSTER=eu
PUSHER_SCHEME=http

in api.php

/**
 * Live EVENTS
 */
Route::get('/test', function () {
    event(new UpdateUser());
});

Events/UpdateUser.php

class UpdateUser implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct()
    {
    }

    public function broadcastWith(): array
    {
        return ['message' => 'Hello, Vue!'];
    }

    public function broadcastOn(): Channel
    {
        return new Channel('userupdate-channel');
    }
}

app.php


'providers' => ServiceProvider::defaultProviders()->merge([
        /*
         * Package Service Providers...
         */

        /*
         * Application Service Providers...
         */
        AppProvidersAppServiceProvider::class,
        AppProvidersAuthServiceProvider::class,
        AppProvidersBroadcastServiceProvider::class,
        AppProvidersEventServiceProvider::class,
        AppProvidersRouteServiceProvider::class,
    ])->toArray(),

FRONTEND VUE

.env

VITE_PUSHER_APP_KEY=local
VITE_PUSHER_APP_HOST='127.0.0.1'
VITE_PUSHER_CLUSTER='eu'

main.js

//Laravel Notifications
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: 'eu',
    wsHost: import.meta.env.VITE_PUSHER_APP_HOST,
    wsPort: 6001,
    forceTLS: false,
    encrypted: false,
    disableStats: true,
    enabledTransports: ['ws'],
    //enabledTransports: ['ws', 'wss'],
})

The versions i used:
"pusher-js": "^4.3.1",
"laravel-echo": "^1.15.3",

On frontend:

enter image description here

I developing in local with lando.

2

Answers


  1. First of all, Pusher is an application/service hosted outside of your local machine. Here is the pusher link.

    Pusher cannot be accessed from 127.0.01 and port 6001. When you create an account with Pusher and create an application from their website, you’ll get the credentials. And you’ll have to use those credentials. When using pusher, you can simply omit host ports and the package will take care of those configs.

    But, if you don’t want to buy the subscription from Pusher, you can use self-hosted pusher implementation using Laravel-Websockets

    Or at least in your local environment, to test your application you can use the laravel-websockets. In this case, as the service will be in your local machine, the host with 127.0.0.1:6001 will be available and you can test out the application.

    Login or Signup to reply.
  2. Make sure websocket is turned on

    php artisan websocket:serve
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search