laravel reverb installation process and setup with common mistakes

Masum Rahman Hasan — Mon, 10 Jun 2024 09:16:19 +0000

Installing and setting up Reverb in a Laravel project involves several steps. Reverb is a package that allows for a quick implementation of real-time broadcasting features in a Laravel application. Here's a step-by-step guide:

Prerequisites

Laravel Installation: Ensure you have a Laravel project set up.
Composer: Make sure Composer is installed on your system.
Node.js and npm: These are required for front-end dependencies.
Step 1: Install Laravel Echo and Pusher
Install Laravel Echo: Laravel Echo is a JavaScript library that makes it easy to work with WebSockets in Laravel.
Install Pusher: Pusher is a WebSocket service that is commonly used with Laravel Echo.

Step 1: Install Laravel Reverb. You may install Reverb using the install:broadcasting Artisan command:

php artisan install:broadcasting

Behind the scenes, the install:broadcasting Artisan command will run the reverb:install command, which will install Reverb with a sensible set of default configuration options. If you would like to make any configuration changes, you may do so by updating Reverb's environment variables or by updating the config/reverb.php configuration file.

You may define these credentials using the following environment variables:

REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret

If you are using auth but no api then you dont have to use any other extra configuration but there are several configurations for some api authentication system. Lets configure for those

Sanctum or Passport

if you are using sanctum api authentication then you have to set some things while using the ECHO

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
auth: {
        headers: {
            Authorization: useCookie('accessToken').value,  // If using token-based auth
        },
    },

});

as you can see i have added auth param in the echo. if you dont use this for private channel it will give you error. So you need to pass the authentication token. cause by default the route middleware is auth

and also you need to add a special thing on the channel.php file without that your private channel will not work for token based authentication

Broadcast::routes(['middleware' => ['auth:sanctum']]);

if you use other token based authentication then add that middleware here in channel.php

This will solve the 403 forbidden issue for private channel

Is there Any way to use laravel Default auth with vue to send response?

Masum Rahman Hasan — Thu, 13 Aug 2020 06:32:44 +0000

DEV Community: Masum Rahman Hasan

laravel reverb installation process and setup with common mistakes

Prerequisites

Step 1: Install Laravel Reverb. You may install Reverb using the install:broadcasting Artisan command:

Sanctum or Passport

Is there Any way to use laravel Default auth with vue to send response?