Websockets Not Working: Phoenix Scripts On Sub-Domain, Loaded Through Main Domain / Apache

Phoenix Forum Questions / Help
, , ,
1

My Apache setup is like this:

##  MAIN WEBSITE  ##
<VirtualHost *:443>
  ServerAdmin admin@mywebsite.com
  ServerName www.mywebsite.com
  ServerAlias mywebsite.com
  DocumentRoot /home/username/mywebsite.com
  ProxyRequests Off
  
  ## SOCKET SETUP FOR MY EXISTING NODE.JS APP THAT RUNS ON PORT 3000
  #####################################################################
  RewriteCond %{QUERY_STRING} transport=polling       [NC]
  RewriteRule /(.*)           http://127.0.0.1:3000/$1 [P]
  RewriteCond %{HTTP:Upgrade} websocket               [NC]
  RewriteRule /(.*)           ws://127.0.0.1:3000/$1  [P]
  <Location /cnode2/>
    ProxyPass http://127.0.0.1:3000/
    ProxyPassReverse http://127.0.0.1:3000/
  </Location>
</VirtualHost>



## SUB-DOMAIN DEDICATED SOLELY FOR PHOENIX PROJECT - PORT 4000
<VirtualHost *:80>
    ServerAdmin admin@mywebsite.com
    ServerName ex.mywebsite.com
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =ex.mywebsite.com
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

<VirtualHost *:443>
    ServerAdmin admin@mywebsite.com
    ServerName ex.mywebsite.com
    DocumentRoot /home/username/mywebsite.com
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    RewriteEngine on
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule ^/?(.*) "ws://127.0.0.1:4000/$1" [P,L]

    ProxyRequests Off
    ProxyPass        / http://127.0.0.1:4000/
    ProxyPassReverse / http://127.0.0.1:4000/

    ProxyPass        /socket/ ws://127.0.0.1:4000/socket/
    ProxyPassReverse /socket/ ws://127.0.0.1:4000/socket/
</VirtualHost>

Here is the HTML Source Code for my simple test page at https://www.mywebsite.com/test.php:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Exchat · Phoenix Framework</title>
    <link rel="stylesheet" href="https://ex.mywebsite.com/css/app.css"/>
    <script defer type="text/javascript" src="https://ex.mywebsite.com/js/app.js"></script>
  </head>
  <body>
    <header>
      <section class="container">
        <nav role="navigation">
          <ul>
            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>

              <li><a href="https://ex.mywebsite.com/dashboard">LiveDashboard</a></li>

          </ul>
        </nav>
        <a href="https://phoenixframework.org/" class="phx-logo">
          <img src="https://ex.mywebsite.com/images/phoenix.png" alt="Phoenix Framework Logo"/>
        </a>
      </section>
    </header>
    <main role="main" class="container">
      <p class="alert alert-info" role="alert"></p>
      <p class="alert alert-danger" role="alert"></p>
<section class="phx-hero">
  <h1>Welcome to Phoenix!</h1>
  <p>Peace of mind from prototype to production</p>
</section>

<section class="row">
  <article class="column">
    <h2>Resources</h2>
    <ul>
      <li>
        <a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
      </li>
      <li>
        <a href="https://github.com/phoenixframework/phoenix">Source</a>
      </li>
      <li>
        <a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a>
      </li>
    </ul>
  </article>
  <article class="column">
    <h2>Help</h2>
    <ul>
      <li>
        <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
      </li>
      <li>
        <a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
      </li>
      <li>
        <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
      </li>
      <li>
        <a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
      </li>
    </ul>
  </article>
</section>

    </main>
  <iframe hidden height="0" width="0" src="https://ex.mywebsite.com/phoenix/live_reload/frame"></iframe></body>
</html>

Basically, on a page on my main domain name “mywebsite.com”, I’m loading up the css, js and images externally from the phoenix project set up on my subdomain “ex.mywebsite.com”. Everything appears to load up fine, but there are still issues with the web sockets not working.

In the developer console, I am getting errors like:

WebSocket connection to 'wss://www.mywebsite.com/socket/websocket?token=undefined&vsn=2.0.0' failed: Error during WebSocket handshake: Invalid status line

In the network “waterfall”, I am seeing these socket requests/responses:

(this one shows up only once for the proper sub-domain "ex.mywebsite.com", the initiator is "frame", which is probably the iframe url in the HTML source code.)

GENERAL:
Request URL: wss://ex.mywebsite.com/phoenix/live_reload/socket/websocket?vsn=2.0.0
Request Method: GET
Status Code: 101 Switching Protocols

RESPONSE:
cache-control: max-age=0, private, must-revalidate
connection: Upgrade
date: Tue, 24 Aug 2021 04:39:43 GMT
sec-websocket-accept: ikc2MBZrO94E7m7sVm0KO6fJEW4=
server: Cowboy
upgrade: websocket

REQUEST:
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: ex.mywebsite.com
Origin: https://ex.mywebsite.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: n18b2ofXGa0LGw5y08m+IA==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36 Edg/92.0.902.78

and:

(this is a repeating error, and is NOT using the "ex.mywebsite.com" subdomain either. The initiator is "phoenix.js?31bb:1", which I'm assuming is the main app.js file.)

GENERAL:
Request URL: wss://www.mywebsite.com/socket/websocket?token=undefined&vsn=2.0.0

REQUEST:
Provisional headers are shown
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: www.mywebsite.com
Origin: https://www.mywebsite.com
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: ikzQ6SHJAzRMQWczj+mLug==
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Mobile Safari/537.36 Edg/92.0.902.78

Reminder: in the apache config above for the main site “mywebsite.com”, I have a web socket setup for an existing node app on port 3000. I’m not sure if this makes a difference or not, if my phoenix app and phoenix socket script is loaded on the “ex.mywebsite.com” subdomain on port 4000. Hopefully it won’t matter. As a test, I commented out the node config in apache anyways, but made no difference at all with my web socket errors, still getting them. There is something else causing the issue.

An explanation and fix would be greatly appreciated. It seems like I’m so close to finally getting my website “desktop” all prepared so I can actually start developing actual apps!

2

You app.js probably has something like:

let socket = new Socket("/socket", {params: {token: window.userToken}})

So the client side is connecting to “/socket” which is the related to the host name from the client side of view. And that resolved to wss://www.mywebsite.com/socket/websocket?token=undefined&vsn=2.0.0

Either you proxy this to phoenix, or you change your exposed domain name.

1 Like
3

Really appreciate your help. As far as I can see, I got a full phoenix setup working alongside my existing node project, now I can begin the fun.

4

I am facing thé same problema. Any tips on how to proxy it to Phoenix?

5

If by “same problem” you mean you are using Apache like the OP, can you start with Apache documentation?