Proxying and tunnel websocket issues

[meenie]

When running BrowserSync on port 4000, proxying localhost:4001, and enabling the tunnel option, BrowserSync is trying to connect the websocket to http://<random-letters>.localtunnel.me:4000. Also when you go to the HTTPS link for localtunnel.me, it tries to connect to browsersync via http://. Here's the snippet of code from the /browser-sync/browser-sync-client.2.8.2.js file:

___browserSync___.io = window.io;
window.io = window.___browserSync___oldSocketIo;
window.___browserSync___oldSocketIo=undefined;
___browserSync___.socketConfig = {}; ___browserSync___.socketConfig.path = '/browser-sync/socket.io';
___browserSync___.socket = ___browserSync___.io('http://' + location.hostname + ':4000/browser-sync', ___browserSync___.socketConfig);

You can see that it's hard coded in.

I'm using the following options:

{
  port: 4000,
  proxy: 'localhost:4001',
  tunnel: true
}

[leedm777]

I've run into the same issue. I was able to work around the https issue by setting https: true in the BrowserSync config (which breaks direct access on localhost).

No idea how to work around the port issue for what gets generated into the snippet.

[leedm777]

I've put up a small sample app at https://github.com/leedm777/browser-sync-bug

[LeoColomb]

This issue seems to still be valid.

But I find a work around without breaking direct access on localhost by setting up socket options. My goal is removing the port when browsing behind localtunnel.me.

socket: {
  domain: function (options) {
    return [
      "'",
      "location.protocol",
      "'//'",
      "location.hostname",
      "(/localtunnel\\.me/.test(location.hostname) ? '' : ':" + options.get('port') + "')",
      "'",
    ].join(" + ");
  },
}

Everything is working, BUT on localtunnel.me, if browsersync requests are accepted, the connection with the browsersync management system (HMR connection) is not fully activated (no output, no error, but no assets injection).

[vindemasi]

@LeoColomb it works for me too. As I've a tunnel between my local machine an a VPS through SSH I've changed a bit your nice solution (it is a bit more general):

socket: {
      domain: "' + location.protocol + '//' + location.hostname + (location.port ? ':'+location.port : '') + '"
    }

P.S.: Sorry, too in a hurry. The right one is the previous by @LeoColomb. With this one the port is changed also when the console connect to the local server. Then it try to connect to :3001 instead the :3000 and the sync, injection and other goodies stop to works. The test on location.port isn't reliable.