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:
I developing in local with lando.
2
Answers
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.
Make sure websocket is turned on