0

I am using the laravel-websockets and pusher packages to run a simple chat feature inside my application. I managed to make it work locally using the ssl certificates of the valet dev environment. Right now, I am in the final phase of development, I put my application on my VPS server, created ssl certificates, everything works perfectly but I cannot get the websockets server to work. I am using an ubuntu server with plesk and I run my application through the nginx. Currently Getting this error in the console

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' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'https',
            'curl_options' => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,
            ]
        ],
    ],

bootstrap.js

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
  broadcaster: 'pusher',
  wsHost: window.location.hostname,
  wsPort: 6001,
  wssPort: 6001,
  key: process.env.MIX_PUSHER_APP_KEY,
  cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  disableStats: true,
  forceTLS: true
});

.env (I am going to change the pusher credentials in production)

PUSHER_APP_ID=12345
PUSHER_APP_KEY=ABCDEFG
PUSHER_APP_SECRET=HIJKLMNOP
PUSHER_APP_CLUSTER=mt1

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT=localhost.crt
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK=localhost.key

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
George2ps
  • 5
  • 4

1 Answers1

0

In my experience i had similar issue with Plesk and Nginx+Apache. After a lot of researches and tests i find this solution, that is working in prod env:

Login to plesk and open your domain configuration > Apache and Nginx settings > Additional settings for HTTPS

(Maybe are different because my server lang is not english.)

In that box put:

# When Upgrade:websocket header is present, redirect to ws
# Using NC flag (case-insensitive) as some browsers will pass Websocket
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule ^/chat_ws/(.*)    ws://<your_domain>:6001 [P,L]

After this, you have to use http://<your_domain>/chat_ws/ as the chat websocket server endpoint (in your javascript)

In my case worked correctly, from what i remember: nginx is going to reverse proxy the requests, and websocket over https are not allowed directly

Jack
  • 489
  • 1
  • 6
  • 18
  • Do you know how to override the nginx configuration file through plesk. When I tried to reverse proxy the requests, on top of the nginx.conf was written that this file is generated from plesk and should not be edited – George2ps Apr 26 '21 at 10:17
  • That's how. By plesk interface. Thos rules are added to the default config file – Jack Apr 26 '21 at 10:17
  • I am trying to put a new location into the additional nginx directives like this: `location /app{ .......... }` but I get this error: Invalid nginx configuration: nginx: [emerg] unknown directive " " in /var/www/vhosts/system/mydomain.com/conf/vhost_nginx.conf:2 nginx: configuration file /etc/nginx/nginx.conf test failed – George2ps Apr 26 '21 at 10:24
  • I'm sorry I'm not an nginx expert. With plesk i found this as a good solution. Sorry mate – Jack Apr 26 '21 at 10:59