I am slowly going insane. I just can't connect to Reverv via ws.

I have put up an environment to host multiple projects using Reverb, well that's the idea at least, and so far i haven't even been able to test it out, since i am still trying to connect there from one of the procets. The Reverb server is hosted on Forge, without any SSL, and no matter what i try, for some reason, the website always try to connect to the server via wss instead of ws, and without any port number.

This is my configuration.

app.blade.php

<script>
    const pusher = new Pusher('{{ config('broadcasting.connections.reverb.key') }}', {
        cluster: 'mt1',
        wsHost: '{{ config('broadcasting.connections.reverb.options.host') }}',
        wsPort: '{{ config('broadcasting.connections.reverb.options.port') }}',
        forceTLS: false,
        encrypted: false,
        disableStats: true,
        enabledTransports: ['ws']
    });
</script>

broadcasting.php

'default' => env('BROADCAST_CONNECTION', 'reverb'),
'reverb' => [
            'driver' => 'pusher',
            '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'),
                'scheme' => env('REVERB_SCHEME'),
                'useTLS' => false,
            ],
        ],

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 ?? 8080,
    forceTLS: false,
    encrypted: false,
    disableStats: true,
    enabledTransports: ['ws'],
});

Which is imported from app.js

.env

REVERB_APP_ID=someid
REVERB_APP_KEY=somekey
REVERB_APP_SECRET=somesecret

REVERB_HOST=188.66.62.35
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY=somekey
VITE_REVERB_HOST=serverip
VITE_REVERB_PORT=8080
VITE_REVERB_SCHEME=http

Deployment script

cd /home/forge/thepage
git pull origin $FORGE_SITE_BRANCH

# Clear caches before caching again
$FORGE_PHP artisan config:clear
$FORGE_PHP artisan route:clear
$FORGE_PHP artisan view:clear

# Cache configuration, routes, and views
$FORGE_PHP artisan config:cache
$FORGE_PHP artisan route:cache
$FORGE_PHP artisan view:cache

# Install npm dependencies and build assets
npm install
npm run build

# Install composer dependencies
$FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader

# Restart the queue to apply new code changes
$FORGE_PHP artisan queue:restart

# Reload PHP-FPM to apply new code changes
( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock

# Run migrations
if [ -f artisan ]; then
    $FORGE_PHP artisan migrate --force
fi

The console

WebSocket connection to 'wss://theip/appthekey?protocol=7&client=js&version=8.2.0&flash=false' failed:

No matter what i try, its's just not doing anything to change this. I don't know what to do anymore, so if anyone got any bright ideas, please, help me. I don't understand

Thanks!

Shahryar

2 years ago

Level 1

I don't understand why you need both configured echo and pusher at the same time! this is my echo config:

window.Echo = new Echo({
    authorizer: ({ name }, options) => {
        return {
            authorize: (socketId, callback) => {
                axios
                    .post(`xxxx:8000/api/broadcasting/auth`, {
                        socket_id: socketId,
                        channel_name: name,
                    })
                    .then(({ data }) => callback(null, data))
                    .catch(callback);
            },
        };
    },
    broadcaster: "reverb",
    key: import.meta.env.VITE_WEBSOCKETS_APP_KEY,
    wsHost: import.meta.env.VITE_WEBSOCKETS_APP_SERVER,
    wsPort: import.meta.env.VITE_WEBSOCKETS_APP_PORT,
    wssPort: import.meta.env.VITE_WEBSOCKETS_APP_PORT,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: (import.meta.env.VITE_PUSHER_APP_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss']
});

I'm using echo with custom authorize method with axios for different domain. pay attention to 'wssPort'. I think you need to set the port for wssPort as well.

Please or to participate in this conversation.