Utilizing Laravel WebSockets and Laravel Echo with a Vue 3 Application: A Step-by-Step Guide

In this tutorial, we will walk through the process of setting up Laravel WebSockets and Laravel Echo with a Vue 3 application. Laravel WebSockets is a package that allows real-time broadcasting of events to a Vue application using WebSockets. Laravel Echo is a JavaScript library that makes working with WebSockets in a Vue application easier.

Before we begin, make sure you have a Laravel application set up and running. If you don’t already have a Laravel application, you can create one using the Laravel installer by running the following command:

composer global require laravel/installer
laravel new my-laravel-app
cd my-laravel-app

Next, let’s install the Laravel WebSockets package using Composer:

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCodeLaravelWebSocketsWebSocketsServiceProvider" --tag="migrations"
php artisan migrate

Now, let’s publish the WebSockets configuration file:

php artisan vendor:publish --provider="BeyondCodeLaravelWebSocketsWebSocketsServiceProvider" --tag="config"

Next, we need to set up the broadcasting configuration in config/broadcasting.php. Add the following configuration to the connections array:

'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' => true,
        'host' => env('LARAVEL_WEBSOCKETS_HOST'),
        'port' => env('LARAVEL_WEBSOCKETS_PORT'),
        'scheme' => env('LARAVEL_WEBSOCKETS_SCHEME'),
    ],
],

Set up the Pusher credentials in your .env file:

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
LARAVEL_WEBSOCKETS_PORT=6001
LARAVEL_WEBSOCKETS_SCHEME=http
LARAVEL_WEBSOCKETS_HOST=localhost

Now, let’s install the Laravel Echo package using npm:

npm install laravel-echo pusher-js

Next, let’s set up Laravel Echo in our Vue 3 application. You can create a new Vue 3 application using Vue CLI:

vue create my-vue-app
cd my-vue-app

In your Vue application, add the following code to your main.js file to set up Laravel Echo:

import Echo from 'laravel-echo'

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.VUE_APP_PUSHER_APP_KEY,
    cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});

Add the following code to your Vue component to listen to events from Laravel Echo:

created() {
    window.Echo.channel('channel-name')
        .listen('EventName', (e) => {
            console.log(e);
        });
}

In your Laravel application, you can broadcast events using Laravel WebSockets by using the broadcast method in your controllers:

broadcast(new EventName($data));

Make sure to replace channel-name and EventName with your actual channel name and event name.

That’s it! You have successfully set up Laravel WebSockets and Laravel Echo with a Vue 3 application. You can now broadcast events from your Laravel application and listen to them in real-time in your Vue application.