2

I run websocket server on local php artisan websocket:serve.

My nginx server configration is 

server {

    root /var/www/laravel/public;

    index index.html index.htm index.php;
    
    server_name testingdomain.com;
    
    location / {
    
        try_files $uri $uri/ /index.php?$query_string ;
    
    }
    
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
    
        # With php-fpm (or other unix sockets):
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        # With php-cgi (or other tcp sockets):
        # fastcgi_pass 127.0.0.1:9000;
    }
    location ~ /\.ht {
        deny all;
    }
    

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/testingdomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/testingdomain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = testingdomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80 default_server;
        listen [::]:80 default_server;

        server_name testingdomain.com;
    return 404; # managed by Certbot


}

I tried like this. by adding location /ws {---} but not working.

server {

    root /var/www/laravel/public;

    index index.html index.htm index.php;
    
    server_name testingdomain.com;
    
    location / {
    
        try_files $uri $uri/ /index.php?$query_string ;
    
    }
    
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
    
        # With php-fpm (or other unix sockets):
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        # With php-cgi (or other tcp sockets):
        # fastcgi_pass 127.0.0.1:9000;
    }
    location ~ /\.ht {
        deny all;
    }
    

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/testingdomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/testingdomain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

location /ws {
    
        proxy_pass             http://127.0.0.1:6001;
        proxy_set_header Host  $host;
        proxy_read_timeout     60;
        proxy_connect_timeout  60;
        proxy_redirect         off;
    
        # Allow the use of websockets
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    
    }

}

server {
    if ($host = testingdomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80 default_server;
        listen [::]:80 default_server;

        server_name testingdomain.com;
    return 404; # managed by Certbot


}

My client side js is

const token = window.localStorage.getItem('access_token');
import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: false,
    disableStats: true,
    enabledTransports: ['ws','wss'],
    auth:{
        headers:{
            Authorization: `Bearer ${token}`
        }
    }
});

  window.Echo.channel('channelname')
  .listen('.channelevent',(e)=>{
     console.log(e);
  });

But not working
I get an error like this.

WebSocket connection to 'wss://testingdomain.com/app/any_key?
protocol=7&client=js&version=7.0.3&flash=false' failed:
Error during WebSocket handshake: Unexpected response code: 404

My project is all fine on local. But, When I deploying, I am getting websocket connection error. How can I config and fix it?

Adriaan
  • 17,741
  • 7
  • 42
  • 75
MraukOoDeveloper
  • 47
  • 7

1 Answers1

0

this is what your nginx server location block should look like.

location /app/ {
proxy_pass http://127.0.0.1:6001/app/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;

}

remove the "/ws" and replace it with the "/app/" because this is the default location of the laravel-websocket pusher back end package.

then your client can look like the below

    broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
wsHost: 'window.location.hostname',
forceTLS: true,
disableStats: true,
Benjamin
  • 133
  • 7