An Issue with connecting: SSL + WebSocket(socketo.me) + Nginx

问题

Followed this link to configure Nginx click here Tried to connect WebSocket(socketo.me) through HTTPS, didn't succeed gave the error as

WebSocket opening handshake timed out

As my hosting server's ngnix (version: 1.13.8) is configured to work in reverse proxy mode in the front-end. Here is the configuration of the Nginx

http {
    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }
    upstream websocket {
        server xx.xxx.xxx.x:8282; #External IP address
    }
    server {

        location / {
            proxy_pass http://xx.xxx.xxx.x:8080; #External IP address
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
            proxy_read_timeout 120s;
        }
    }
}

chatroom.php

<script type="text/javascript">
    $(document).ready(function(){
        var conn = new WebSocket('ws://xx.xxx.xxx.x:8282');
        conn.onopen = function(e) {
            console.log("Connection established!");
        };

        conn.onmessage = function(e) {
            console.log(e.data);
            ...
        };

        conn.onclose = function(e) {
            console.log("Connection Closed!");
        }
    })
</script>

server.php

<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;

    require dirname(__DIR__) . '/vendor/autoload.php';

    $server = IoServer::factory(
        new HttpServer(
            new WsServer(
                new Chat()
            )
        ),
        8282
    );

    $server->run();

Before applying SSL,

Then after applying SSL,

Established the WebSocket connection via port #8282 from the terminal as shown below

root@user:/var/www/vhosts/somedomain.xy/httpdocs/chatroom-php-mysql/bin# php server.php
Server Started.
New connection! (84)
Connection 84 has disconnected

When website URL is opened in browser basically this is what it happens as follows:

Client request comes to front-end Nginx asking for some resource (.html page, .php page, image, javascript, etc). Nginx in our hosting server works on TCP ports: 80 - http, 443 - https.
Nginx checks if it has the resource already in its cache.
If the resource is cached, Nginx returns the cached content.
If the resource is not cached or if the dynamic page (e.g. index.php) is requested, Nginx proxies (forwards) the request to back-end server - Apache. Apache in our hosting server works on TCP ports: 7080 - http, 7081 - https. Then Nginx caches static content - HTML, images, js, css.

Updated:

Symbolic link had been created in /etc/nginx/plesk.conf.d/vhosts in somedomain.xy.conf

#ATTENTION!
#
#DO NOT MODIFY THIS FILE BECAUSE IT WAS GENERATED AUTOMATICALLY,
#SO ALL YOUR CHANGES WILL BE LOST THE NEXT TIME THE FILE IS GENERATED.

server {
    listen xx.xxx.xxx.x:443 ssl http2;

    server_name somedomain.xy;
    server_name www.somedomain.xy;
    server_name ipv4.somedomain.xy;

    ssl_certificate             /opt/psa/var/certificates/scfPsMGvJ;
    ssl_certificate_key         /opt/psa/var/certificates/scfPsMGvJ;
    ssl_client_certificate      /opt/psa/var/certificates/scfSdpTzN;

    client_max_body_size 128m;

    root "/var/www/vhosts/somedomain.xy/httpdocs";
    access_log "/var/www/vhosts/system/somedomain.xy/logs/proxy_access_ssl_log";
    error_log "/var/www/vhosts/system/somedomain.xy/logs/proxy_error_log";

    #extension letsencrypt begin
    location /.well-known/acme-challenge/ {
        root /var/www/vhosts/default/htdocs;

        types { }
        default_type text/plain;

        satisfy any;
        auth_basic off;
        allow all;

        location ~ ^/\.well-known/acme-challenge.*/\. {
            deny all;
        }
    }
    #extension letsencrypt end

    location / {
        proxy_pass https://xx.xxx.xxx.x:7081;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    location /internal-nginx-static-location/ {
        alias /var/www/vhosts/somedomain.xy/httpdocs/;
        internal;
    }

    location ~ ^/(plesk-stat|awstats-icon|webstat|webstat-ssl|ftpstat|anon_ftpstat) {
        proxy_pass https://xx.xxx.xxx.x:7081;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    location ~ ^/proj_ci/ {
        proxy_pass https://xx.xxx.xxx.x:7081;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    location ~ "^/files/" {
        proxy_pass https://xx.xxx.xxx.x:7081;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    add_header X-Powered-By PleskLin;

}

server {
    listen xx.xxx.xxx.x:80;

    server_name somedomain.xy;
    server_name www.somedomain.xy;
    server_name ipv4.somedomain.xy;

    client_max_body_size 128m;

    root "/var/www/vhosts/somedomain.xy/httpdocs";
    access_log "/var/www/vhosts/system/somedomain.xy/logs/proxy_access_log";
    error_log "/var/www/vhosts/system/somedomain.xy/logs/proxy_error_log";

    #extension letsencrypt begin
    location /.well-known/acme-challenge/ {
        root /var/www/vhosts/default/htdocs;

        types { }
        default_type text/plain;

        satisfy any;
        auth_basic off;
        allow all;

        location ~ ^/\.well-known/acme-challenge.*/\. {
            deny all;
        }
    }
    #extension letsencrypt end

    location / {
        proxy_pass http://xx.xxx.xxx.x:7080;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    location /internal-nginx-static-location/ {
        alias /var/www/vhosts/somedomain.xy/httpdocs/;
        internal;
    }

    location ~ ^/(plesk-stat|awstats-icon|webstat|webstat-ssl|ftpstat|anon_ftpstat) {
        proxy_pass http://xx.xxx.xxx.x:7080;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    location ~ ^/proj_ci/ {
        proxy_pass http://xx.xxx.xxx.x:7080;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    location ~ "^/files/" {
        proxy_pass http://xx.xxx.xxx.x:7080;
        proxy_set_header Host             $host;
        proxy_set_header X-Real-IP        $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header X-Accel-Internal /internal-nginx-static-location;
        access_log off;

    }

    add_header X-Powered-By PleskLin;

}

I had tried to create in /etc/nginx/conf.d with the filename app_name.conf

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream websocket {
    server xx.xxx.xxx.x:8282;
}

server {
    # listen xx.xxx.xxx.x:80;
    # listen      443 default_server ssl;
    listen 443 ssl http2;
    server_name somedomain.xy;


    location / {
        proxy_pass http://xx.xxx.xxx.x:8282;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # proxy_read_timeout 120s;
        proxy_read_timeout 86400;
        # proxy_redirect default;
        # proxy_redirect http://xx.xxx.xxx.x:8282/  /;
        # proxy_redirect http://www.somedomain.xy/ /;
    }

    location /chat/ {
        proxy_pass http://xx.xxx.xxx.x:8282;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_read_timeout 120s;
    }

    location /test {
        rewrite ^/test(.*) $1 break;
        proxy_pass http://127.0.0.1:8282;
    }

    location /wss {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Proxy "";
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://xx.xxx.xxx.x:8282;
        proxy_read_timeout 120s;
    }

    location /websocket {  
        proxy_pass http://xx.xxx.xxx.x:8282; ## WSPHP listening port
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_read_timeout 86400;
    }

}

Also, In Nginx we are not able to see such directories they are /etc/nginx/sites-available/* and /etc/nginx/sites-enabled/* , we will be seeing under /etc/apache2

来源：https://stackoverflow.com/questions/53411060/an-issue-with-connecting-ssl-websocketsocketo-me-nginx

标签

php

ssl

nginx

websocket

ratchet