WebSockets and Apache proxy : how to configure mod_proxy_wstunnel?

I finally managed to do it, thanks to this topic.

TODO:

1) Have Apache 2.4 installed (doesn't work with 2.2), and do:

a2enmod proxy
a2enmod proxy_http
a2enmod proxy_wstunnel

2) Have nodejs running on port 3001

3) Do this in the Apache config

<VirtualHost *:80>
  ServerName www.domain2.com

  RewriteEngine On
  RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
  RewriteCond %{QUERY_STRING} transport=websocket    [NC]
  RewriteRule /(.*)           ws://localhost:3001/$1 [P,L]

  ProxyPass / http://localhost:3001/
  ProxyPassReverse / http://localhost:3001/
</VirtualHost>

Note: if you have more than one service on the same server that uses websockets, you might want to do this to separate them.

• upvote

  flag
  FWIW, Apache 2.4 in CentOS 7.1 has this bug therefore rewrite won't recognize ws:// protocol, and prepends the domain before sending the subrequest. You can test yourself by changing the [P]roxy flag to [R]edirect. – Andor Jul 23 '15 at 15:34
• 3

  upvote

  flag
  I still get 502 bad gateway for my ws:// routes when doing this. Running Apache 2.4 on Ubuntu 14.04 – Alex Muro Sep 10 '15 at 18:32
• 1

  upvote

  flag
  this is lifesaver man, thank you – chintan adatiya Jan 23 '17 at 10:42
• 1

  upvote

  flag
  solved the issue, thanks! – endo64 Sep 21 '17 at 13:27
• 1

  upvote

  flag
  Save my day, thanks and +1 – Waleed Abdalmajeed Feb 26 at 16:50

Instead of filtering by URL, you can also filter by HTTP header. This configuration will work for any web applications that use websockets, also if they are not using socket.io:

<VirtualHost *:80>
  ServerName www.domain2.com

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

  ProxyPassReverse / http://localhost:3001/
</VirtualHost>

• 1

  upvote

  flag
  RewriteCond %{HTTP:Upgrade} !^websocket$ [NC] some browsers will type websocket and some Websocket. That is why the NC (no case) option is needed – Didac Montero Jul 22 '16 at 12:46
• upvote

  flag
  Thanks, I updated the answer. – cdauth Jul 28 '16 at 8:49
• upvote

  flag
  @cdauth Worked for me proxying peer.js that for my webrtc app. Thanks! – ingridsede Sep 7 '16 at 12:57
• upvote

  flag
  This is working fine for me but I'm proxying a subpath and I've found it's important to add the ^ anchors since the regex is looking for a substring. E.g. RewriteRule ^[^/]*/foo/(.*) http://${FOO_HOST}/$1 [P,L] (otherwise /bar/foo will also be directed to the same place as /foo) – Steve Lilly Sep 10 '16 at 9:50
• 2

  upvote

  flag
  @cdauth You sir are a hero among heroes. – sova Mar 5 '17 at 21:19

May be will be useful. Just all queries send via ws to node

<VirtualHost *:80>
  ServerName www.domain2.com

  <Location "/">
    ProxyPass "ws://localhost:3001/"
  </Location>
</VirtualHost>

• upvote

  flag
  Thanks @Sergey. This helped me when I only used the direct path referenced by ws instead of routing everything to document root. I've shown what I've done in an answer below for the benefit of others. – Anwaarullah Sep 27 '15 at 7:13
• upvote

  flag
  This answer works for simple web sockets (no socket.io) so for me this is better answer – Tomas Feb 3 '16 at 9:42
• upvote

  flag
  Awesome! This was instantly working for me while the other rewrite and proxy attempts did'nt solve my problem. – Stephan Mar 11 '16 at 13:11
• upvote

  flag
  It works for me after spend hours for test more than 100 solution – vietnguyen09 Jun 16 '16 at 15:56
• upvote

  flag
  You my friend are a life-saver. Don't know how many solutions I tried....Thanks a lot.. :D – We are Borg Nov 8 '17 at 9:27

As of Socket.IO 1.0 (May 2014), all connections begin with an HTTP polling request (more info here). That means that in addition to forwarding WebSocket traffic, you need to forward any transport=polling HTTP requests.

The solution below should redirect all socket traffic correctly, without redirecting any other traffic.

1. Enable the following Apache2 mods:

   sudo a2enmod proxy rewrite proxy_http proxy_wstunnel

2. Use these settings in your *.conf file (e.g. /etc/apache2/sites-available/mysite.com.conf). I've included comments to explain each piece:

   <VirtualHost *:80>
       ServerName www.mydomain.com
   
       # Enable the rewrite engine
       # Requires: sudo a2enmod proxy rewrite proxy_http proxy_wstunnel
       # In the rules/conds, [NC] means case-insensitve, [P] means proxy
       RewriteEngine On
   
       # socket.io 1.0+ starts all connections with an HTTP polling request
       RewriteCond %{QUERY_STRING} transport=polling       [NC]
       RewriteRule /(.*)           http://localhost:3001/$1 [P]
   
       # When socket.io wants to initiate a WebSocket connection, it sends an
       # "upgrade: websocket" request that should be transferred to ws://
       RewriteCond %{HTTP:Upgrade} websocket               [NC]
       RewriteRule /(.*)           ws://localhost:3001/$1  [P]
   
       # OPTIONAL: Route all HTTP traffic at /node to port 3001
       ProxyRequests Off
       ProxyPass           /node   http://localhost:3001
       ProxyPassReverse    /node   http://localhost:3001
   </VirtualHost>

3. I've included an extra section for routing /node traffic that I find handy, see here for more info.

My setup:

Apache 2.4.10 (running off Debian) NodeJS (version 4.1.1) App running on port 3000 that accepts WebSockets at path /api/ws

As mentioned above by @Basj, make sure a2enmod proxy and ws_tunnel are enabled.

This is a screengrab of the Apache conf file that solved my problem:

Hope that helps.

• upvote

  flag
  I'm having trouble setting up my app with a prefered URL rather than the default, would you mind helping me out? (I'm sitting on top of a varnish cache server) – Josh Dec 30 '15 at 1:01
• upvote

  flag
  Could you copy/paste instead of screenshot? Thank you in advance, it would improve readability. – Basj Apr 6 at 14:35

With help from these answers, I finally got reverse proxy for Node-RED running on a Raspberry Pi with Ubuntu Mate and Apache2 working, using this Apache2 site config:

<VirtualHost *:80>
    ServerName nodered.domain.com
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*)           ws://localhost:1880/$1 [P,L]
    RewriteCond %{HTTP:Upgrade} !=websocket [NC]
    RewriteRule /(.*)           http://localhost:1880/$1 [P,L]
</VirtualHost>

I also had to enable modules like this:

sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel

In addition to the main answer: if you have more than one service on the same server that uses websockets, you might want to do this to separate them, by using a custom path (*):

Node server:

var io = require('socket.io')({ path: '/ws_website1'}).listen(server);

Client HTML:

<script src="/ws_website1/socket.io.js"></script>
...
<script>
var socket = io('', { path: '/ws_website1' });
...

Apache config:

RewriteEngine On

RewriteRule ^/website1(.*)$ http://localhost:3001$1 [P,L]

RewriteCond %{REQUEST_URI}  ^/ws_website1 [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule ^(.*)$ ws://localhost:3001$1 [P,L]

RewriteCond %{REQUEST_URI}  ^/ws_website1 [NC]
RewriteRule ^(.*)$ http://localhost:3001$1 [P,L]

(*) Note: using the default RewriteCond %{REQUEST_URI} ^/socket.io would not be specific to a website, and websockets requests would be mixed up between different websites!

TODO:

1. Have Apache 2.4 installed (doesn't work with 2.2), a2enmod proxy and a2enmod proxy_wstunnel.load

2. Do this in the Apache config
   
   just add two line in your file where 8080 is your tomcat running port

   <VirtualHost *:80>
   ProxyPass "/ws2/" "ws://localhost:8080/" 
   ProxyPass "/wss2/" "wss://localhost:8080/"
   
   </VirtualHost *:80>

For "polling" transport.

Apache side:

<VirtualHost *:80>
    ServerName mysite.com
    DocumentRoot /my/path


    ProxyRequests Off

    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>

    ProxyPass /my-connect-3001 http://127.0.0.1:3001/socket.io
    ProxyPassReverse /my-connect-3001 http://127.0.0.1:3001/socket.io   
</VirtualHost>

Client side:

var my_socket = new io.Manager(null, {
    host: 'mysite.com',
    path: '/my-connect-3001'
    transports: ['polling'],
}).socket('/');

User this link for perfact solution for ws https://httpd.apache.org/docs/2.4/mod/mod_proxy_wstunnel.html

You have to just do below step..

Got to /etc/apache2/mods-available

Step...1

Enable mode proxy_wstunnel.load by using below command

$a2enmod proxy_wstunnel.load

Step...2

Goto /etc/apache2/sites-available

and add below line in your .conf file inside virtual host

ProxyPass "/ws2/" "ws://localhost:8080/"

ProxyPass "/wss2/" "wss://localhost:8080/"

Note : 8080 mean your that your tomcat running port because we want to connect "ws" where our War file putted in tomcat and tomcat serve apache for "ws". thank you

My Configuration

ws://localhost/ws2/ALLCAD-Unifiedcommunication-1.0/chatserver?userid=4 =Connected

• upvote

  flag
  Sorry I don't really understand (especially your last sentence). Can you improve formatting of the answer and add details for people who don't know all what you mention? – Basj Jun 28 '17 at 15:39
• upvote

  flag
  I mean that 8080 is port address where your Tomcat running.. – Arvind Madhukar Jun 30 '17 at 13:24