Local's router doesn't proxy websockets

Support
,
1

Issue Summary

The nginx config that Local uses for its router does not forward the two headers necessary for web socket connections: ‘Connection’ and ‘Upgrade’. Specifically, router-config/location-block.conf is missing these lines:

proxy_set_header   Upgrade $http_upgrade;
proxy_set_header   Connection 'upgrade';
proxy_cache_bypass $http_upgrade;

If I add them manually, in my case in %LocalAppData%\Programs\Local\resources\extraResources\router-config\location-block.conf, everything works fine.

Troubleshooting Questions

  • Does this happen for all sites in Local, or just one in particular?

Should happen to all sites that need to handle websocket connections. (only tried with Apache sites so far though)

  • Are you able to create a new, plain WordPress site in Local and access it in a Browser?

Yes

Replication

As stated above, this should be replicable by any site accepting web socket connections.

However, my usecase is proxying the websocket connection of my Vue CLI frontend to the webpack-dev-server for hot module reload while still being able to use https (and wss, respectively):

  1. Create a new site in Local and trust the certificate.

  2. Chose Apache as server and add this to config/apache/site.conf.hbs in your project folder:

ProxyPass /sockjs-node/ http://localhost:8080/sockjs-node/
RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule /sockjs-node/(.*) ws://localhost:8080/sockjs-node/$1 [P,L]

Also add this to config/apache/modules.conf.hbs to load the proxy modules:

LoadModule proxy_http_module "{{ modules }}/mod_proxy_http.so"
LoadModule proxy_wstunnel_module "{{ modules }}/mod_proxy_wstunnel.so"

  1. Create a Vue CLI project: npx -p @vue/cli vue create -dbn --skipGetStarted my-theme

  2. Configure the Vue project to work with Local/WordPress by adding these files:

vue.config.js:

module.exports = {
  // or create a symlink .../wp-content/themes/my-theme → ./dist
  outputDir: '/path/to/local-site/app/public/wp-content/themes/my-theme',
  publicPath: '/wp-content/themes/my-theme/',
  indexPath: 'index.php',
  devServer: { writeToDisk: true, public: 'your-local-site-host.local' }
}

public/style.css:

/*
Theme Name: WebSocket Repro
Version: 1.0.0
*/

  1. Start the dev server with npm run serve, restart your Local site, go to your WordPress admin page and activate WebSocket Repro, then visit the site

  2. Check the console or network tab in DevTools. Instead of a single WebSocket connection there are a lot of failed requests as sockjs goes through the various possible fallback options.

System Details

  • Which version of Local is being used?

5.9.2+5056

  • What Operating System (OS) and OS version is being used?

Windows 10 Pro version 20H2 (Build 19042.630)

2

Forgot that the line proxy_http_version 1.1; is missing too in router-config/location-block.conf :point_up_2:

3

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.