trigger event from client to host

[linus-amg]

hi,
im building an es6 front-end module boilerplate and im using browser-sync to refresh the mocha-chai-blanket.js index.html where im running unit tests and coverage on a chrome browser, im using gulp to start browserSync and reload on certain events like file changes.

Since im running coverage in the browser I would like to know if there is any way to trigger-back to the browserSync-host (in gulp) whenever I would like to trigger something from the browser/client.

A way I could imagine is using some global variable which has the bs.socket inside of it and emit an event, so in gulp i could have a listener on browserSync which calls a callback when the socket emit got triggered.

i would like to do so because like that i could run building an uglified dist with gulp whenever I reach like e.g. 90% of coverage in the browser. I hope I was able to explain the idea behind that and maybe its already possible like browserSync works. Or maybe its not desired.

[linus-amg]

this is the boilerplate with the working in-browser coverage and a console log when coverage is 90%+

https://github.com/elgubenis/es6-module-boilerplate-browser

[linus-amg]

just found ___browserSync___ will see how far i get.

[linus-amg]

I got it to work, by calling:

___browserSync___.socket.emit('build');

from the browser and listening on the browserSync instance like this:

// Run development server environment
gulp.task('serve', ['browserify'], () => {
  const instance = browserSync({
    notify: false,
    port: 9000,
    ui: {
      port: 9001,
    },
    server: {
      baseDir: ['server', 'node_modules', 'test'],
    },
  });

  setTimeout(function() {
    instance.sockets.sockets[instance.sockets.sockets.length-1].on('build', function() {
      gulp.start('build');
    });
    instance.sockets.on('connection', function(socket) {
      socket.on('build', function() {
        gulp.start('build');
      });
    });
  }, 4000);

  gulp.watch(['test/**/*.js', 'server/index.html']).on('change', reload);
});

a little bit ugly with the timeout, but wihtout the timeout the sockets are not open right after starting browserSync

[linus-amg]

after some tuning, on the client side:

    <script>
      mocha.setup('bdd');
      mocha.suite.afterAll(function () {
        setTimeout(function () {
          const percent = Number(document.querySelectorAll('.bl-cl.rs')[2].innerHTML.split(' ')[0]);
          if (percent > 89) {
            ___browserSync___.socket.emit('build');
          }
        }, 0);
      });
    </script>

on the gulp side:

// Run development server environment
gulp.task('serve', ['browserify'], () => {
  const instance = browserSync({
    notify: false,
    port: 9000,
    ui: {
      port: 9001,
    },
    server: {
      baseDir: ['server', 'node_modules', 'test'],
    },
  });

  instance.emitter.on('service:running', function() {
    instance.sockets.on('connection', function(socket) {
      socket.on('build', function() {
        gulp.start('build');
      });
    });
  });

  gulp.watch(['test/**/*.js', 'server/index.html']).on('change', reload);
});

[shakyShane]

you can use the callback too.

// Run development server environment
gulp.task('serve', ['browserify'], () => {
  browserSync({
    notify: false,
    port: 9000,
    ui: {
      port: 9001,
    },
    server: {
      baseDir: ['server', 'node_modules', 'test'],
    },
  }, function(err, bs) {
    bs.io.sockets.on('connection', function(socket) {
      socket.on('build', function() {
        gulp.start('build');
      });
    });
  });

  gulp.watch(['test/**/*.js', 'server/index.html']).on('change', reload);
});

[linus-amg]

oh cool, thanks man!