45

I have a ratchet chat server file

use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
use MyAppChat\Chat;
require dirname(__DIR__) . '/vendor/autoload.php';
$server = IoServer::factory(
    new WsServer(
        new Chat()
    )
  , 26666
);
$server->run();

I using Websocket to connect with ws and it works fine

if ("WebSocket" in window) {
    var ws = new WebSocket("ws://ratchet.mydomain.org:8888");
    ws.onopen = function() {
        // Web Socket is connected. You can send data by send() method.
        ws.send("message to send");
    };
    ws.onmessage = function (evt) { 
        var received_msg = evt.data;
    };
    ws.onclose = function() { 
        // websocket is closed. 
    };
} else {
  // the browser doesn't support WebSocket.
}

I want secure connection, so I try to connect with SSL but is not work.

if ("WebSocket" in window) {
    var ws = new WebSocket("wss://ratchet.mydomain.org:8888");
    ws.onopen = function() {
        // Web Socket is connected. You can send data by send() method.
        ws.send("message to send");
    };
    ws.onmessage = function (evt) { 
        var received_msg = evt.data;
    };
    ws.onclose = function() { 
        // websocket is closed. 
    };
} else {
  // the browser doesn't support WebSocket.
}

My question is how to connect websocket with SSL connection

Any idea?

Viet Nguyen
  • 2,285
  • 2
  • 26
  • 43

9 Answers9

62

If you are using Apache web server (2.4 or above), enable these modules in httpd.conf file :

  1. mod_proxy.so
  2. mod_proxy_wstunnel.so

Add this setting to your httpd.conf file

ProxyPass /wss2/ ws://ratchet.mydomain.org:8888/

Use this URL in your JavaScript call when you want a WSS connection:

var ws = new WebSocket("wss://ratchet.mydomain.org/wss2/NNN");

Restart Apache web server and make sure that your Ratchet worker (web socket connection) is open before applying the settings (telnet hostname port).

danronmoon
  • 3,814
  • 5
  • 34
  • 56
webcoder
  • 1,355
  • 1
  • 15
  • 14
  • 3
    Nice, this works, but a question: why the "/NNN" at the end? Thanks! – amcastror Dec 18 '15 at 22:57
  • 2
    Referring our next URL parameters (eg: /wss2/param1/param2...) which can be use by our system to identify the request purpose. You may remove it if not needed, but please note that you must have the same matching identity url parameter (in this case '/wss2/') so the server able to match/catch the request and forward it to custom domain/port. – webcoder Dec 19 '15 at 04:14
  • This does actually work on APache 2.4 with cboden/ratchet, thx a lot – mitchken Mar 22 '16 at 15:26
  • 1
    In what kind of vhost do those directives work? Which port do you need to listen to? Would it be possible to give a vhost example including HTTP and WS protocoles? – Flo Schild Sep 07 '16 at 12:32
  • Does this work for localhost? Is it just ProxyPass /wss2/ ws://ratchet.localhost:8888/ ??? How do I get this working properly on localhost? ws works great for Opera and Chrome, but wss for Firefox and others has been a significant hurdle. – Joe Leonard Oct 18 '16 at 02:36
  • 2
    As a follow-up: I finally got this working on localhost for Chrome and Firefox using https, but in my case I had to use port 8080... I was confused about which port to use and this led to a lot of trial and error. Mostly error. This is what worked for me: `var conn = new WebSocket('wss://localhost/wss2/');` `ProxyPass /wss2/ ws://localhost:8080/` `$server = IoServer::factory( new HttpServer( new WsServer( new Chat() ) ), 8080 );` – Joe Leonard Oct 30 '16 at 19:57
  • 1
    By doing this, Will it affect the perfomance or cause any vulnerabilities ? – Deepak M Jul 31 '17 at 12:48
  • This is The Bets Answer That I have Found After HOURS!!!!! of searching for an answer! Thank YOU!!!!!!! – dror shalit Jan 03 '21 at 11:23
  • This worked for me! Only thing is I used `127.0.0.1` in javascript. No need to open the port on the firewall. – fred Mar 13 '21 at 15:43
  • By doing a `ProxyPass`, one should consider raising `ServerLimit` in Apache prefork. Because it may become a bottleneck as a connection in Apache remain open and busy during the socket lifetime. see here: https://stackoverflow.com/a/70347693/2962705 – s.abbaasi Dec 14 '21 at 11:02
18

A few days ago I was looking for the answer of this question and I found this in the Github Ratchet issues: https://github.com/ratchetphp/Ratchet/issues/489

The last answer, answered by heidji, says this:

I only added this comment for newbies like me who need a quick instruction how to implement SSL: Via the ReactPHP docs you only need to construct the SecureServer mentioned in such manner:
$webSock = new React\Socket\Server('0.0.0.0:8443', $loop);
$webSock = new React\Socket\SecureServer($webSock, $loop, ['local_cert' => '/etc/ssl/key.pem', 'allow_self_signed' => true, 'verify_peer' => false]);
and then inject into the IoServer as mentioned by cboden above

So it seems that now there is a way to implement a secure websocket server with Ratchet without needing an HTTPS proxy.

Here you have the SecureServer class documentation: https://github.com/reactphp/socket#secureserver

Jordi
  • 1,108
  • 1
  • 8
  • 18
  • 4
    This is the most up-to-date answer and should probably be the accepted answer now that SSL support has been added! – BenMorel Oct 08 '19 at 08:18
12

The problem is that React (which Ratchet is built on) does not support direct SSL connections. See this issue.

There is a simple workaround. Use stunnel with a config like:

[websockets]
accept = 8443
connect = 8888

Stunnel will handle SSL traffic on port 8443 and port them to your websocket server.

mattexx
  • 6,456
  • 3
  • 36
  • 47
  • Not that nginx supports proxy_passing websocket, I will suggest using it. This way we can facilitate serving wss on port 443 hence not being blocked by most of corporate firewalls. – Arun Poudel Nov 10 '14 at 01:40
  • 4
    Looks like SSL is supported now, since early 2017. See [reactphp/socket#55](https://github.com/reactphp/socket/pull/55) and [@Jordi's answer](https://stackoverflow.com/a/47200806/759866) below. – BenMorel Oct 08 '19 at 08:16
9

I found this answer on Ratchet's google group by Chris Boden:

The best solution would be to use Nginx as your web server. Have Nginx listen on port 80 for incoming connections and have it handle your SSL. Nginx will forward incoming connections to PHP-FPM for your regular website and if it detects a connection is a WebSocket connection have it proxy to your running Ratchet application on a port of your choice. Your javascript could then connect via wss://mydomain.org

This is an alternative way to using stunnel if your application is going to be served using nginx.

Songo
  • 5,618
  • 8
  • 58
  • 96
  • Thanks for your answer, i done this work :D, now i will work with scapy in python for spoof source ip address but really hard work :( can you help me? – Viet Nguyen Nov 29 '13 at 03:19
  • @temuri yea I found a gist sometime ago with the configuration to make it work. Sadly I can't find it now – Songo Mar 19 '14 at 00:06
  • argh... Is there stunnel config sample? – temuri Mar 19 '14 at 00:07
  • @Songo Thank you! Unfortunately, I am not an expert in nginx config. I am not sure how to alter my existing config. Here's my shot at it: https://gist.github.com/temuri416/9633097. What am I doing wrong? – temuri Mar 19 '14 at 00:27
  • 2
    An improved attempt: http://stackoverflow.com/questions/22493646/ratchet-nginx-ssl-secure-websocket – temuri Mar 19 '14 at 01:30
6

If you're using Nginx, just write this in your SSL server block:

location /services/myservice {
    # switch off logging
    access_log off;

    # redirect all HTTP traffic to localhost
    proxy_pass http://localhost:1234;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # WebSocket support (nginx 1.4)
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    # Path rewriting
    rewrite /services/myservice/(.*) /$1 break;
    proxy_redirect off;

    # timeout extension, possibly keep this short if using a ping strategy
    proxy_read_timeout 99999s;
}

This will upgrade any wss://yoursite.com/services/myservice call to a socket running on port 1234. Just make sure you remember not to leave port 1234 open to the world.

RaisinBranCrunch
  • 567
  • 12
  • 20
  • Hi @RaisinBranCrunch would you please tell me then what will be final code then? I mean for this line of code `var ws = new WebSocket("wss://ratchet.mydomain.org/wss2/NNN");` what would be the changes. Thanks – Mushfiqur Rahman Sep 01 '18 at 13:22
  • @MushfiqurRahman Before the location block in my post, I have in my server block the line: `server_name subdomain.mysite.com;` So, that means with the location block in my post being `/services/myservice`, the final thing in the Javascript would be `var ws = new WebSocket("wss://subdomain.mysite.com/services/myservice");`. – RaisinBranCrunch Sep 06 '18 at 02:08
4

Apache also worked for me, just add in domain conf:

ProxyPass /wss/ wss://127.0.0.1:8888/

Reload apache and then it's import to set wss in client side to include /wss/ location

wss://127.0.0.1/wss/
rukavina
  • 184
  • 1
  • 6
3

If you are using Windows IIS, make sure that you have configured it for HTTPS (I'm using self signed certificate), then install reverse proxy:

URL rewrite: https://www.iis.net/downloads/microsoft/url-rewrite and ARR 3.0: https://www.iis.net/downloads/microsoft/application-request-routing

You also need to enable websockets support in IIS:enter image description here

create folder (e.g. myproxyfolder) for URL rewrite, on this folder create web.config file with content:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="WebSocketProxy" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="http://127.0.0.1:8080" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

and change "http://127.0.0.1:8080" to your websocket service (I'm using Ratched for PHP on WIN).

On client side in javascript, use secure websockets wss:// protocol, like:

    mysock = new WebSocket('wss://127.0.0.1/myproxyfolder');
...
W.g.
  • 51
  • 3
2

It is working for me for ubuntu 18.04.

var ws = new WebSocket('wss://domain.com/ws/');

Enabled proxy modules by running the following command in terminal.

sudo a2enmod proxy proxy_balancer proxy_wstunnel proxy_http

Added these lines in my Apache virtualhost config file(/etc/apache2/sites-available/000-default-le-ssl.conf)

ProxyRequests Off

ProxyPass "/ws/" "ws://domain.com:5555/"

Restarted apache service. And the websocket started working in https.

0

I was trying to do this for a subdomain. Ex: Redirect realtime.domain.org to localhost:8080 from apache.

Here's how it worked. You can create a virtual host and proxy pass that.

<VirtualHost *:80>
    ServerName realtime.domain.org

    RewriteEngine On
    RewriteCond %{HTTP:Connection} Upgrade [NC]
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteRule /(.*) ws://localhost:8080/$1 [P,L]

    ProxyPreserveHost On
    ProxyRequests off
    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
</VirtualHost>

So, all the requests to realtime.domain.org can be redirected to port 8080, where you can run the WebSocket handler.

Supun Kavinda
  • 1,355
  • 14
  • 13