Laravel Websockets : SSL on Apache Centos 8

gistfile1.txt

## Installations

# ========================================================================
# apache + centos 8
# ========================================================================

# create APP_DOMAIN.conf on /etc/httpd/conf.d/
# fill with vhosts entry
<VirtualHost APP_DOMAIN:80>
    ServerName APP_DOMAIN
    ServerAlias APP_DOMAIN
    ServerAdmin webmaster@APP_DOMAIN
    DocumentRoot LARAVEL_PUBLIC_PATH

    <Directory LARAVEL_PUBLIC_PATH>
        Options -Indexes +FollowSymLinks
        AllowOverride All
    </Directory>

    ErrorLog /var/log/httpd/APP_DOMAIN-error.log
    CustomLog /var/log/httpd/APP_DOMAIN-access.log combined
</VirtualHost>

<VirtualHost APP_DOMAIN:443>
    ServerName APP_DOMAIN
    ServerAlias APP_DOMAIN
    ServerAdmin webmaster@APP_DOMAIN
    DocumentRoot LARAVEL_PUBLIC_PATH

    <Directory LARAVEL_PUBLIC_PATH>
        Options -Indexes +FollowSymLinks
        AllowOverride All
    </Directory>

    ErrorLog /var/log/httpd/APP_DOMAIN-error.log
    CustomLog /var/log/httpd/APP_DOMAIN-access.log combined
</VirtualHost>

# restart apache
sudo systemctl restart httpd

#register certbot
sudo certbot --apache

# append proxypass to bottom of vhosts https part

RewriteEngine on
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /app/(.*)           ws://localhost:6001/app/$1 [P,L]
ProxyPass "/app" "ws://localhost:6001/app"
ProxyPassReverse "/app" "ws://localhost:6001/app"

# restart apache again
sudo systemctl restart httpd


# ========================================================================
# Laravel Composer
# ========================================================================

# https://beyondco.de/docs/laravel-websockets/getting-started/installation

composer require beyondcode/laravel-websockets
composer install
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"
php artisan migrate
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

# ========================================================================
# Client
# ========================================================================

npm install pusher-js

# in pusher.js

import Pusher from 'pusher-js'

Pusher.log = (msg) => { console.log(msg); };

let app={
    host: window.location.hostname,
    port: 6001,
    path: '',
    id: 'PUSHER_ID',
    key: 'PUSHER_KEY',
    cluster: 'PUSHER_APP_CLUSTER',
};

let pusher = new Pusher(app.key, {
    forceTLS: false,
    cluster: app.cluster === null ? '' : app.cluster,
    wsHost: app.host === null ? window.location.hostname : app.host,
    wsPort: app.port === null ? 6001 : app.port,
    wssPort: app.port === null ? 6001 : app.port,
    wsPath: app.path === null ? '' : app.path,
    enableStats: true,
    authEndpoint: '/api/match/auth',
    auth: {
        params: {
          user_id: 0
        },
        headers: {
            'X-App-ID': app.id
        }
    },
    enabledTransports: ['ws', 'wss', 'flash']
});

pusher.connection.bind('state_change', states => {
    // console.log("Connection current state is " + states.current);
});
pusher.connection.bind('connected', () => {
    // console.log('connected');
    pusher.onConnected('connected');
});
pusher.connection.bind('disconnected', () => {
    // console.log('disconnected');
    pusher.onConnected('disconnected');
    logs = [];
});
pusher.connection.bind('error', event => {
    if (event.data.code === 4100) {
        // console.log("Maximum connection limit exceeded!");
        logs = [];
        pusher.onConnected('error:max-connection-limit');
    }else{
        pusher.onConnected('error:'+event.data.code);
    }
});

pusher.joinChannel = (channel) => {
    return pusher.subscribe(channel)
        .bind('log-message', (data) => {
            // console.log(data);
        });
}

pusher.closeChannel = (channel) => {
    return pusher.unsubscribe(channel);
}

pusher.onConnected = (status) => {
	// override this
}




# ========================================================================
# ========================================================================
## Configurations
# ========================================================================
# ========================================================================

# ========================================================================
# Laravel
# ========================================================================

# .env
# easiest way is register an app on pusher and put ids here
PUSHER_APP_ID=APP_ID
PUSHER_APP_KEY=APP_KEY
PUSHER_APP_SECRET=APP_SECRET
PUSHER_APP_CLUSTER=APP_CLUSTER

# and put ssl credential here
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT=PATH_TO_CERT_PEM
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK=PATH_TO_PRIVKEY_pem
LARAVEL_WEBSOCKETS_SSL_PASSPHRASE=

# config/broadcasting.php
'connections' => [
        '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' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'https',
            'useTLS' => true,
            'curl_options' => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,
            ],
        ],
    ],
...
]

# config/websockets.php
'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'path' => env('PUSHER_APP_PATH'),
        'capacity' => null,
        'enable_client_messages' => false,
        'enable_statistics' => true,
    ],
],

'ssl' => [
        /*
         * Path to local certificate file on filesystem. It must be a PEM encoded file which
         * contains your certificate and private key. It can optionally contain the
         * certificate chain of issuers. The private key also may be contained
         * in a separate file specified by local_pk.
         */
        'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),

        /*
         * Path to local private key file on filesystem in case of separate files for
         * certificate (local_cert) and private key.
         */
        'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),

        /*
         * Passphrase for your local_cert file.
         */
        'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),

    /*
     * Hopefully chrome will able to connect
     */
    'verify_peer' => false,
],


# commit config
php artisan optimize



# ========================================================================
# Run server on screen
# ========================================================================

screen
sudo php artisan websockets:serve

# CTRL+A D to detach screen

screen
php artisan queue:work

# again CTRL+A D to detach screen

use screen -r to check detached screens

Thank you so much, the vhost configuration for wss protocol just saved my life! Thank you again!