Resolving polling URL

[zslabs]

Hi all,
My gulp task is setup with the bare-bones browser-sync instance within a WordPress site:

gulp.task 'browser-sync', -> browserSync() return

I'm not able to use the proxy option due to this being a multisite install -- so I went the route of adding the following right before </body>:

/**
 * Add inline browsersync function for live reloads locally only to wp_footer()
 * @return void
 */
function bt_browsersync() { ?>
    <script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.7.12.js'><\/script>".replace("HOST", location.hostname));
//]]></script>
<?php }
add_action('wp_footer', 'bt_browsersync', 9999);

I'm not able to use HOST as the variable here though, because the file is not available going through http://wpsite.dev:3000/browser-sync/browser-sync-client.2.7.12.js and only works by going to local:3000/browser-sync/browser-sync-client.2.7.12.js, so I changed the above to the following:

/**
 * Add inline browsersync function for live reloads locally only to wp_footer()
 * @return void
 */
function bt_browsersync() { ?>
    <script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://localhost:3000/browser-sync/browser-sync-client.2.7.12.js'><\/script>");
//]]></script>
<?php }
add_action('wp_footer', 'bt_browsersync', 9999);

The problem now is that when browsersync is polling the page, it is using the site URL to reference the GET request, so I get these console errors:

http://wpsite.dev:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1434574564882-43 net::ERR_CONNECTION_REFUSED

How can I set those URLs to use localhost in this case as well? I looked into scriptPath, but that did not change anything. Thanks!

Note

I am running the install through Vagrant.

[shakyShane]

You can alter the domain for websockets via

// This will result in something like this in
// the socket connector code
// browserSync.io('localhost:3003/browser-sync')
socket: {
    namespace: function (namespace) {
        return "localhost:3003" + namespace;
    }
}

http://www.browsersync.io/docs/options/#option-socket

[zslabs]

Getting the following error now:

GET http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1435326614412-4 net::ERR_CONNECTION_REFUSED

[shakyShane]

Yeah, sorry this is a bug we're working on asap.

[zslabs]

Thanks Shane, really appreciate the updates on this!

[shakyShane]

Please see #690

tl;dr

socket: {
    domain: "localhost:3000"
}

[zslabs]

That fixed it, thanks!

[brian-lamb-software-engineer]

@shakyShane you just solved my issue for running browsersync on the vm host(windows), accessed from a site that's hosted on vagrant/homestead. This is totally awesome!! This has been days in the fix..

Working setup

Vagrantfile

  config.vm.network "public_network"
...

• im going to trying to turn off the vagrant network bridge you see above, i feel its not necessary, but for some reason i get a connection reset error when i tried last. that will be my next task.

browsersync portion of gulpfile

      plugins.browserSync.init(
        {
        port: port,
        socket: {
            domain: '127.0.0.1:3000'
        },
        notify: false,
        open: false,
      }
    );

note, you have to have a watch to trigger browsersync still.

footer of main body

<script src="http://127.0.0.1:3000/browser-sync/browser-sync-client.js?v=2.18.13"></script>

So, a bit of history,
After i finally realized that when i was getting socket errors, that was because i finally got right the part that allowed the connection to http://someip-or-domain:3000/browser-sync/browser-sync-client.js. Then it was polling with errors to connect to the site.app defined in the the Homestead.yaml. To overcome this i neded a fix to configure the socket, since that's what was having the issue at that point.

And finally in an effort to help anyone else trying to work out the homestead issue, some notes on that;

• the vm is a default homestead box using vbox, on windows.
• I am running browsersync on my windows box, inside msys2 terminal, you can probably also run it in cmd, cmdr, git bash, or powertools.
• homestead version laravel/homestead (virtualbox, 4.0.0)
• no ports forwarded on homestead/vagrant for browsersync connection
• no tunnels open for browsersync connection
• no proxy set on browsersync
• you need to make sure your using the same instance of var browserSync = require('browsersync'); e.g if you have multiple gulp files, you need to make sure your sharing the same browserSync var, so that your not trying to reload one that isnt already init'ed.