Browser-sync: Sending custom events to client

[derpoho]

Hi guys!

Maybe i can`t find it, but is there a way to send a custom event to a page and listen to it via js?

I have to update a variable after a file has been changed.

Thanks in advance.
Greets

[shakyShane]

It's a little bit wonky right now as we're still looking at improving this use case - but the following will work.

var bs = require('browser-sync').create();

/**
 * Start BrowserSync as normal
 */
bs.init({
    server: 'test/fixtures',
    plugins: [
        // create plugin to load your JS onto clients
        {
            plugin: function () {}, // required for plugin system :(
            hooks: {
                "client:js": require('fs').readFileSync('test/fixtures/some.js', 'utf-8')
            }
        }
    ]
}, function (err, instance) {

    /**
     * Your custom watcher for all files with test/fixtures directory
     */
    bs.watch("test/fixtures").on('change', function (file) {

        /**
         * Emit custom event to clients
         */
        instance.io.sockets.emit('custom-event', {file: file});
    });
});

then, the contents of some.js would be something like

;(function (bs) {

    bs.socket.on('custom-event', function (data) {
        console.log(data);
    })

})(___browserSync___);

[shakyShane]

You can skip the entire plugin section, if you're prepared to wait for our JS script to load (it's done with async, so the order of your scripts after it won't matter.

So you would just the content of some.js in your own file somewhere, but you'll need some sort of polling in place to check for window.___browserSync___ before you call that function above.

[shakyShane]

Hope that makes sense - this issue has highlighted the fact that we have much to improve in terms of UX in this area.

[derpoho]

That makes sense. My current workaround is to send a change event from an file that doesn't really exist, and listen on the client for a change event this file. That works, but isn't the best solution. Your suggestion makes much more sense.

But i can confirm that this part should be improved a bit, sending custom events through the connection open a lot of possibilites that haven`t been here before, especially for "no-reload-pure-js" Apps as we have. Updating variables (or anything) from Grunt or Gulp based on events is a cool thing...

Thanks for your time and reply"

[shakyShane]

No problem. I'm going to work on the api for this use-case, I'm thinking my above example could look like:

var bs = require('browser-sync').create();

// register some client-side JS (without needing plugin boilerplate from above)
bs.addClientJs(somefile);

// start Browsersync
bs.init({server: './app'});

// expose 'sockets' to public API to allow:
bs.watch('**/*.js').on('change, function(file) {
    bs.sockets.emit('custom-event', {file: file});
});

or, should you just want to access window.___browserSync___ in your own scripts, you should be able to disable the async attribute on the snippet.

bs.init({
    server: './app',
    snippetOptions: {
        async: false
    }
});

[Odrin]

@shakyShane any updates here? Is it possible to emit custom events from server/client and handle in the client (browser)?