Laravel + Vuejs + Laravel-Webscoket + Apache

Question

Greeting community

I have the next problem. I have an api made in Laravel and frontend made in vuejs. The trouble is that socket only works in locally, but when i upload both projects in a shared hosting the socket fails and display error connection in the browser console

This is mi configuration in config/broadcasting.php

'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'),
            'useTLS'                => true,
            'encrypted'             => false,
            'host'                  => 'backtotalv2.tastyboom.com',
            'port'                  => 6001,
            'scheme'                => 'https',
            'curl_options'          => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,
            ]
        ],
    ],

That's my configuration in config/websocket.php

'ssl' => [
    'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),

    'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),

    'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),
],

This is my main.js in my vuejs:

import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '***************',
    cluster: 'tls',
    forceTLS: false,
    wsHost: '127.0.0.1',
    wssPort: 6001,
    wsPort: 6001,
    authEndpoint: `${config.url}/broadcasting/auth`,
    enabledTransports: ['ws', 'wss'],
    encrypted: false,
    auth: {
      headers: { 
        "Authorization": "Bearer " + token
      }
    }
});

I tried to follow this example but it did not work Laravel + Nuxt + Nginx

Always show this error in console when in production

Image Error

If somebody can help me, i'm will full grateful.

score 0 · Answer 1 · answered Mar 05 '21 at 14:32

It looks to me like your server is configured to run securely over TLS since you have 'useTLS' set to true, but in your client you have 'encrypted' and 'forceTLS' set to false. Also remember that if your site is running on HTTPS then you are forced to use encrypted WSS as well since WS only works when your site is running unencrypted over HTTP.

Laravel + Vuejs + Laravel-Webscoket + Apache

1 Answers1