VUE JS Echo + Laravel 11 + Reverb in IIS (Server 2022) WebSocket is closed before the connection is established.

[soicat123]

Reverb Version
1.0

Laravel Version
11.9

Php Version
8.2

VueJS Version
3.0

Node Version
v20.18.0

Laravel Echo
1.16.1

Pusher-js
8.4.0-rc2

Description

I have Laravel 11 application (backend) and Vue (front) hosted in IIS (Server 2022). I'm not quite familiar working with websockets(Reverb) in IIS and read a lot of discussions in nginx, sail, etc.. and tried it but none are working so far. I'm receiving the error

WebSocket connection to 'wss://test.local:8080/app/1233455?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

In the IIS Manager under Bindings this is our configuration:

VueJS front site:
type: https
hostname: test.local
port:443

laravel backend site:
type: https
hostname: test.local
port: 3004

So it's basically under the same hostname but in different ports.

For the Websocket, here's what I've done so far.

1. Enabled Websockets in Server Manager
2. Open ports in Firewall (8080, etc)
3. Set the SSL (self signed certificate from open ssl) in the reverb.php file
4. Executed php artisan reverb:start --debug (I also have a separate service to keep this running in the server without cmd but using this for testing)
5. I also tried using nginx for reverse proxy and followed configurations from other discussions regarding laravel reverb but it also didn't work. I'm totally stuck, any help and suggestion will be appreciated. Thank you.

In the .env of backend

REVERB_APP_ID=******
REVERB_APP_KEY=******
REVERB_APP_SECRET=******
REVERB_HOST="test.local"
REVERB_LOCAL_CERT="path/to/cert.pem"
REVERB_LOCAL_PK="path/to/key.pem"
REVERB_PORT=8080
REVERB_SCHEME=https
BROADCAST_CONNECTION=reverb
QUEUE_CONNECTION=sync

In the .env of front

VITE_REVERB_APP_KEY=******
VITE_REVERB_HOST="test.local"
VITE_REVERB_PORT="8080"
VITE_REVERB_SCHEME="https"

Also the 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 ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: true,
    enabledTransports: ['ws', 'wss'],
    encrypted: true,
    disableStats: true
});

Inside reverb.php

    'servers' => [

        'reverb' => [
            'host' => env('REVERB_SERVER_HOST', '0.0.0.0'),
            'port' => env('REVERB_SERVER_PORT', 8080),
            'hostname' => env('REVERB_HOST'),
            'options' => [
                'tls' => [
                    'local_cert'=> env('REVERB_LOCAL_CERT'),
                    'local_pk' => env('REVERB_LOCAL_PK'),
                    'passphrase' => 'test',
                    'verify_peer' => false,
                    'allow_self_signed' => true,
                ],
      ]

Inside 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',
                'encrypted' => false,
                'curl_options' => [ 
                    CURLOPT_SSL_VERIFYHOST => false,
                    CURLOPT_SSL_VERIFYPEER => false,
                ],
            ],
            'client_options' => [
                'verify' => false,
            ],
        ],

[Dinesh-loma]

I have same configuration like you. Only difference is that I using Nginx server. In my case, I deployed code to test server. when check on my personal machine reverb work.(auth api fired and ping-pong happend). When check on other systems reverb not works. Auth api(/broadcasting/auth) not fired and socket connection shows finished.
I am also stuck. Somebody please help @taylorotwell @JeffreyWay @joedixon

Vuejs .env

VITE_APP_TITLE = '案件管理系统'
VITE_PORT = 3200
VITE_REVERB_APP_KEY=**********
VITE_REVERB_PORT=9080
VITE_REVERB_SCHEME=https

vuejs config.js

var BASE_URL = 'https://domain.com/api';
var REVERB_HOST = 'domain.com';

Note: REVERB_HOST value is same as domain name.

Reverb.php
`<?php

return [

/*
|--------------------------------------------------------------------------
| Default Reverb Server
|--------------------------------------------------------------------------
|
| This option controls the default server used by Reverb to handle
| incoming messages as well as broadcasting message to all your
| connected clients. At this time only "reverb" is supported.
|
*/

'default' => env('REVERB_SERVER', 'reverb'),

/*
|--------------------------------------------------------------------------
| Reverb Servers
|--------------------------------------------------------------------------
|
| Here you may define details for each of the supported Reverb servers.
| Each server has its own configuration options that are defined in
| the array below. You should ensure all the options are present.
|
*/

'servers' => [

    'reverb' => [
        'host' => env('REVERB_SERVER_HOST', '0.0.0.0'),
        'port' => env('REVERB_SERVER_PORT', 8080),
        'hostname' => env('REVERB_HOST'),
        'options' => [
            'tls' => [
                'local_cert' => env('CERT_URL'),
                'local_pk' => env('PK_URL'),
            ],
        ],
        'max_request_size' => env('REVERB_MAX_REQUEST_SIZE', 10_000),
        'scaling' => [
            'enabled' => env('REVERB_SCALING_ENABLED', false),
            'channel' => env('REVERB_SCALING_CHANNEL', 'reverb'),
            'server' => [
                'url' => env('REDIS_URL'),
                'host' => env('REDIS_HOST', '127.0.0.1'),
                'port' => env('REDIS_PORT', '6379'),
                'username' => env('REDIS_USERNAME'),
                'password' => env('REDIS_PASSWORD'),
                'database' => env('REDIS_DB', '0'),
            ],
        ],
        'pulse_ingest_interval' => env('REVERB_PULSE_INGEST_INTERVAL', 15),
        'telescope_ingest_interval' => env('REVERB_TELESCOPE_INGEST_INTERVAL', 15),
    ],

],

/*
|--------------------------------------------------------------------------
| Reverb Applications
|--------------------------------------------------------------------------
|
| Here you may define how Reverb applications are managed. If you choose
| to use the "config" provider, you may define an array of apps which
| your server will support, including their connection credentials.
|
*/

'apps' => [

    'provider' => 'config',

    '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),
            'max_message_size' => env('REVERB_APP_MAX_MESSAGE_SIZE', 10_000),
        ],
    ],

],

];
`

laravel .env

REVERB_APP_ID=*******
REVERB_APP_KEY=*****
REVERB_APP_SECRET=*****
REVERB_HOST='domain.com'
REVERB_PORT=9080
REVERB_SCHEME=https
CERT_URL='/etc/nginx/ssl/domain/fullchain.pem'
PK_URL='/etc/nginx/ssl/domain/privkey.pem'

vuejs echo connection code

export default function useEchoConnection() {
    const userStore = useUserStore();
    const echoInstance = ref<Echo | null>(null);

    const initializeEcho = () => {
        window.Pusher = Pusher;
        echoInstance.value = new Echo({
            broadcaster: 'reverb',
            key: import.meta.env.VITE_REVERB_APP_KEY,
            wsHost: window.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'],
            authorizer: (channel, options) => {
                return {
                    authorize: (socketId, callback) => {
                        axios
                            .post(
                                `${window.BASE_URL}/broadcasting/auth`,
                                {
                                    socket_id: socketId,
                                    channel_name: channel.name,
                                },
                                {
                                    headers: {
                                        Authorization: `Bearer ${userStore.JWT}`,
                                    },
                                },
                            )
                            .then(response => {
                                callback(false, response.data);
                            })
                            .catch(error => {
                                callback(true, error);
                            });
                    },
                };
            },
        });
    };

Added proxy setting also

server {
    server_name  ***************;

    root /var/www/folder/public;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
        proxy_pass http://0.0.0.0:9080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

Update:
websocket connected and ping-pong happened in all other systems but only in firefox browser.

[Dinesh-loma]

I found the solution for this after lot of re-search. Need to create subdomain, and add proxy code in server config file.
REVERB_HOST = 'sub.domain.com';
REVERB_HOST = '443';