Sending custom events to client

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]

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
    }
});