laravellaravel-reverboctane

Laravel reverb on production server to local development

So i have deployment my reverb app on mydomain.com, it using 8080 port (i just follow the tutorial from laravel docs). my question is, can i use reverb app that is online to connect with my local project?

this is my nginx conf.

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    listen [::]:80;
    server_name mydomain.com;
    server_tokens off;
    root /var/www/faceid/public;

    index index.php;

    charset utf-8;

    location /index.php {
        try_files /not_exists @octane;
    }

    location / {
        try_files $uri $uri/ @octane;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    access_log off;
    error_log  /var/log/nginx/mydomain.com-error.log error;

    error_page 404 /index.php;

    location @octane {
        set $suffix "";

        if ($uri = /index.php) {
            set $suffix ?$query_string;
        }

        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header Scheme $scheme;
        proxy_set_header SERVER_PORT $server_port;
        proxy_set_header REMOTE_ADDR $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;

        proxy_pass http://127.0.0.1:8000$suffix;
    }

    location /app {
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header Scheme $scheme;
        proxy_set_header SERVER_PORT $server_port;
        proxy_set_header REMOTE_ADDR $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
 
        proxy_pass http://0.0.0.0:8080;
    }
}

.env

REVERB_APP_ID=*****
REVERB_APP_KEY=*****
REVERB_APP_SECRET=*****
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="reverb.myserver.my.id"
VITE_REVERB_PORT=443
VITE_REVERB_SCHEME=https

echo.js

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'],
});

what i have do is:

still dont know how to do this.

enter image description here

enter image description here

Solution

  • Let me try helping.

    First of all, it is possible to have your reverb server remotely, your backend app & client app to connect with it.

    From the nginx.conf, I have the same configuration, so I think it's alright. I assume that you've already created the reverb credentials. If you haven't, please do create one. By default, the reverb installation should already create one for you in the .env file and is defined in reverb.php

    'apps' => [
    [
        'key' => env('REVERB_APP_KEY'),
        'secret' => env('REVERB_APP_SECRET'),
        'app_id' => env('REVERB_APP_ID'),
        'options' => [
            'host' => env('REVERB_HOST'),
            'port' => env('REVERB_PORT', 443),
            'scheme' => env('REVERB_SCHEME', 'https'),
            'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
        ],
        'allowed_origins' => ['*'],
        'ping_interval' => env('REVERB_APP_PING_INTERVAL', 60),
        'activity_timeout' => env('REVERB_APP_ACTIVITY_TIMEOUT', 30),
        'max_message_size' => env('REVERB_APP_MAX_MESSAGE_SIZE', 10_000),
    ],
],

    The next step is to setup the backend app. For this example, I'll put my events & channels together with the reverb server, but take note that you can separate reverb server and backend app.

    Skip this portion if you already your backend side configured to use Laravel reverb and have broadcasting events.

    1. Configure laravel project to broadcast using reverb connection.

    Following this step should be alrightLaravel Broadcasting

    But if you are not sure, check the following configurations:

    ā†’ .env variables. Make sure to use the following.

    BROADCAST_CONNECTION=reverb

REVERB_APP_ID=xxxxxx
REVERB_APP_KEY=somerandomkey
REVERB_APP_SECRET=somerandomsecret
REVERB_HOST="reverb.mydomain.com" # remote reverb server
REVERB_PORT= # empty to use port 80
REVERB_SCHEME=https # usually https if remote

    ā†’ config/broadcasting.php

    'connections' => [

    'reverb' => [
        'driver' => 'reverb',
        'key' => env('REVERB_APP_KEY'),
        'secret' => env('REVERB_APP_SECRET'),
        'app_id' => env('REVERB_APP_ID'),
        'options' => [
            'host' => env('REVERB_HOST'),
            'port' => env('REVERB_PORT', 443),
            'scheme' => env('REVERB_SCHEME', 'https'),
            'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
        ],
        'client_options' => [
            // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
        ],
    ],

],
    1. Make channel and apply it in your routes/channels.php

    php artisan make:channel WelcomeChannel

    <?php

namespace App\Broadcasting;

use App\Models\User;

class WelcomeChannel
{
    /**
     * Create a new channel instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Authenticate the user's access to the channel.
     */
    public function join(User $user): array|bool
    {
        return true; // allow all users to join the channel
    }
}

    <?php

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('welcome', \App\Broadcasting\WelcomeChannel::class);
    1. Make an event that will broadcast messages.

    php artisan make:event WelcomeNotification

    <?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

    /**
     * Create a new event instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('welcome'),
        ];
    }

    /**
     * Get the data to broadcast.
     *
     * @return array<string, mixed>
     */
    public function broadcastWith(): array
    {
        return [
            'message' => 'Welcome to the application!',
        ];
    }

    /**
     * The event's broadcast name.
     */
    public function broadcastAs(): string
    {
        return 'WelcomeNotification';
    }
}
    1. Dispatch event. In this case, I simply added into the welcome page. WelcomeNotification event will fire everytime the / page is accessed.
    <?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    broadcast(new \App\Events\WelcomeNotification());

    return view('welcome');
});

    With this setup, your backend app should be sending broadcast messages to ALL reverb connections. I'm only using public channels for demonstration.

    In this example, let us use the backend app's URL as reverb.mydomain.com.

    Resume here for client side connection

    The final step is to setup your client side. This can be the same Laravel project or an entirely different project. Since reverb utilizes the pusher protocol, you can use the pusher library OR use laravel echo. Let us use a different project with laravel echo setup to show that we can connect to a remote reverb server.

    Here is a public repo that I made with a basic page that connects to reverb server.

    https://github.com/YutaInouePH/reverb-example

    Once you clone, make .env file with the following configurations and start with the readme steps to start the dev server.

    NUXT_PUBLIC_ECHO_KEY=somerandomkey
NUXT_PUBLIC_ECHO_HOST=reverb.mydomain.com
NUXT_PUBLIC_ECHO_SCHEME=https
NUXT_PUBLIC_ECHO_AUTHENTICATION_BASE_URL=https://reverb.mydomain.com # this can be your laravel URL.

    Once you installed and started the dev server, your page will look like this.

    initial page

    It will be an empty page, but on a different browser, if we try to access reverb.mydomain.com to dispatch the WelcomeNotification event, the frontend will render its message.

    reverb welcome message

    We can check how the connections are handled in our network tab. The first image shows the handshake between the reverb server, and the 2nd image shows the that we are receiving the welcome event.

    handshake

    receive welcome message