title: How to fix browser-sync & socket.io conflict?
body: <p>I seem to have a conflict of the socket used in <code>browser-sync</code> and the one I want to use with <code>socket.io</code>. I use <code>browser-sync</code> via a <code>gulp</code> task (that comes with <code>Aurelia CLI</code> default project). What happens is that only the <code>browser-sync</code> socket seems to work and the <code>socket.io</code> that is mostly used on server side is completely unread. I did find the <a href="https://github.com/BrowserSync/browser-sync/issues/71" rel="nofollow noreferrer">GitHub issue #71</a> which is addressing the problem, and also this other <a href="https://github.com/PolymerElements/polymer-starter-kit/issues/241" rel="nofollow noreferrer">Github issue #241</a> which both mention the use of namespace. However I tried a few variances and even if they run with errors, it doesn't fix any of my problems. </p>
  
  <p>I mainly use <code>Gulp</code> with <code>browser-sync</code> inside an <code>Aurelia CLI</code> project, while the backend is <code>NodeJS</code> with <code>Koa</code>. The version of <code>socket.io@1.6.0</code> while <code>browser-sync@2.13.0</code> The ports used are for frontend: 4000, backend: 5000.</p>
  
  <p>Here's a list of the files</p>
  
  <p><em>Gulp - run.js</em></p>
  
  <pre><code>import gulp from 'gulp';
  import browserSync from 'browser-sync';
  import historyApiFallback from 'connect-history-api-fallback/lib';
  import project from '../aurelia.json';
  import build from './build';
  import {CLIOptions} from 'aurelia-cli';
  import url from 'url';
  import proxy from 'proxy-middleware';
  
  var portBackEnd = 5000;
  var portFrontEnd = 4000;
  
  var proxyOptionsAccessControl = function(req,res, next){
        res.setHeader('Access-Control-Allow-Origin', '*');
        next();
  };
  
  var proxyOptionsApiRoute = url.parse(`http://localhost:${portBackEnd}/api`);
      proxyOptionsApiRoute.route = '/api';
  
  var proxyOptionsAuthRoute = url.parse(`http://localhost:${portBackEnd}/auth`);
      proxyOptionsAuthRoute.route = '/auth';
  
  function log(message) {
    console.log(message); //eslint-disable-line no-console
  }
  
  function onChange(path) {
    log(`File Changed: ${path}`);
  }
  
  function reload(done) {
    browserSync.reload();
    done();
  }
  
  let serve = gulp.series(
    build,
    done =&gt; {
      browserSync({
        online: false,
        open: false,
        port: portFrontEnd,
        notify: true,
        logLevel: 'silent',
        server: {
          baseDir: ['.'],
          middleware: [
            proxyOptionsAccessControl,
            proxy(proxyOptionsApiRoute),
            proxy(proxyOptionsAuthRoute)
          ]
        },
        socket: {
          domain: 'localhost:4000',
          namespace: '/browsersync'
        }
      }, function(err, bs) {
        let urls = bs.options.get('urls').toJS();
        log(`Application Available At: ${urls.local}`);
        log(`BrowserSync Available At: ${urls.ui}`);
        done();
      });
    }
  );
  
  let refresh = gulp.series(
    build,
    reload
  );
  
  let watch = function() {
    gulp.watch(project.transpiler.source, refresh).on('change', onChange);
    gulp.watch(project.markupProcessor.source, refresh).on('change', onChange);
    gulp.watch(project.cssProcessor.source, refresh).on('change', onChange);
  };
  
  let run;
  
  if (CLIOptions.hasFlag('watch')) {
    run = gulp.series(
      serve,
      watch
    );
  } else {
    run = serve;
  }
  
  export default run;
  </code></pre>
  
  <p><em>use of Socket.io-Client with Aurelia (frontend)</em></p>
  
  <pre><code>import io from 'socket.io-client';
  
  var socket = io('http://localhost:5000');
  // also tried with a namespace instead
  //var socket = io('/todo-socket');
  
  // ...
  
  socket.on("todo_update", data =&gt; {
    let pos = arrayFindObjectIndex(this.items, 'id', data.id);
    if(pos &gt;= 0) {
       this.items.splice(pos, 1, data);
       this.itemDoneCount = this.items.filter(x =&gt; x.completed).length;
     }
  });
  </code></pre>
  
  <p><em>NodeJS with Koa (backend)</em></p>
  
  <pre><code>// Middlewares
  const app = require('koa')();
  const serve = require('koa-static');
  const api = require('koa-router')();
  const assertTimeout = require('co-assert-timeout');
  const http = require('http');
  const server = require('http').createServer(app.callback());
  const io = require('socket.io')(server);
  
  // or without namespace: io.sockets.on("connection", function(socket) {
  var tsp = io.of('/todo-socket');
  tsp.on("connection", function(socket) {
    console.log('A new WebSocket client connected with ID: ' + socket.client.id);
  })
  .error(function(err){
    console.log("Changefeeds Failure: ", err);
    return null;
  });
  
  socket.on('disconnect', function(data) {
    console.log('A WebSocket client disconnnected with ID: ' +      socket.client.id);
    return null;
  });
  </code></pre>
  
  <p>I tried with and without namespace, that doesn't seem to change anything. I referred to <a href="https://browsersync.io/docs/options/#option-socket" rel="nofollow noreferrer">browser-sync - socket option</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>From testing this more, it actually seems like the <code>socket.io</code> on server side isn't working at all. It doesn't output the <code>console.log('connected with ID: ' + socket.client.id)</code> from the server, however it doesn't display or throw any errors either. The code on server side used to work with <code>WebPack</code>, so I really think it's related to <code>browserSync</code> conflict.</p>