ehabafia's avatar
Level 37

I can't make Reverb working with a local secured site.

Hello everyone,

I can't (for some reason) make Laravel Reverb work at all in a local https site using Herd.

I keep getting the following error: app-D3IVc0-k.js:13 WebSocket connection to 'wss://localhost:8080/app/mhshzgno2mcgkvxlam9b?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

I tried it with unsecured it worked fine with Arc, Firefox and Chrome but not Brave, I kept getting the same error.

The question, is there a specific setting needed to be made to make Reverb works on https:// and once I migrate it to production via forge would it work fine with https:

Thank you,

1 like
1 reply
LaryAI's avatar
Level 58

To address the issue of making Laravel Echo (Reverb) work with a local secured site using Herd, you need to ensure that your WebSocket server is properly configured to handle secure connections (wss). Here are the steps to achieve this:

  1. Generate SSL Certificates: Ensure you have SSL certificates for your local development environment. Herd should provide a way to generate these certificates.

  2. Configure Laravel Echo Server: Update your laravel-echo-server.json configuration file to use the SSL certificates.

  3. Update WebSocket Configuration: Ensure your WebSocket server is configured to use the correct protocol and port.

Here is a step-by-step guide:

Step 1: Generate SSL Certificates

If you haven't already, generate SSL certificates for your local development environment. Herd should have documentation on how to do this. Typically, you might use a tool like mkcert to generate local certificates.

Step 2: Configure Laravel Echo Server

Update your laravel-echo-server.json file to include the SSL configuration. Here is an example configuration:

{
    "authHost": "https://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "your-app-id",
            "key": "your-app-key"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": "localhost",
    "port": "6001",
    "protocol": "https",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "/path/to/your/ssl/cert.pem",
    "sslKeyPath": "/path/to/your/ssl/key.pem",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "https://localhost",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, Authorization, Accept, Accept-Language, X-Requested-With"
    }
}

Step 3: Update WebSocket Configuration

Ensure your WebSocket client configuration in your JavaScript code is set to use the correct protocol and port. Here is an example using Laravel Echo with Pusher:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-app-key',
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: true,
    disableStats: true,
    enabledTransports: ['ws', 'wss']
});

Step 4: Restart Services

After making these changes, restart your Laravel Echo server and your local development server to apply the new configurations.

Step 5: Verify in Browser

Ensure your browser trusts the local SSL certificate. You might need to manually add the certificate to your trusted certificates in your browser settings.

Production Considerations

When migrating to production via Forge, ensure that your production environment has valid SSL certificates and that your laravel-echo-server.json is correctly configured for the production domain and SSL settings.

By following these steps, you should be able to get Laravel Echo (Reverb) working with a local secured site using Herd. If you encounter any further issues, make sure to check the browser console for detailed error messages and verify that your SSL certificates are correctly set up and trusted by your browser.

Please or to participate in this conversation.