Как исправить конфликт с синхронизацией браузера и socket.io?

Question

У меня, кажется, есть конфликт сокета, используемого в browser-sync и тот, который я хочу использовать с socket.io, я использую browser-sync через gulp задача (которая идет с Aurelia CLI проект по умолчанию). Что происходит, что только browser-sync Сокет, кажется, работает, и socket.io который в основном используется на стороне сервера, полностью не прочитан. Я нашел проблему #71 GitHub, которая решает эту проблему, а также эту другую проблему GitHub #241, в которой упоминается использование пространства имен. Однако я попробовал несколько вариантов, и даже если они работают с ошибками, это не решает ни одной из моих проблем.

Я в основном пользуюсь Gulp с browser-sync внутри Aurelia CLI проект, в то время как бэкэнд NodeJS с Koa, Версия socket.io@1.6.0 в то время как browser-sync@2.13.0 Используемые порты для внешнего интерфейса: 4000, внутреннего: 5000.

Вот список файлов

Gulp - run.js

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 => {
    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;

использование Socket.io-Client с Aurelia (внешний интерфейс)

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 => {
  let pos = arrayFindObjectIndex(this.items, 'id', data.id);
  if(pos >= 0) {
     this.items.splice(pos, 1, data);
     this.itemDoneCount = this.items.filter(x => x.completed).length;
   }
});

NodeJS с Коа (бэкэнд)

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

Я пробовал с и без пространства имен, это, кажется, ничего не меняет. Я ссылался на синхронизацию браузера - опция сокета

РЕДАКТИРОВАТЬ

От тестирования этого больше, на самом деле кажется, что socket.io на стороне сервера не работает вообще. Это не выводит console.log('connected with ID: ' + socket.client.id) с сервера, однако он также не отображает и не выдает никаких ошибок. Код на стороне сервера, используемый для работы с WebPack так что я действительно думаю, что это связано с browserSync конфликт.

Answer 1

Пройдя пару дней, я начал работать. Мне пришлось изменить пространство имен в 2 разных местах, в browserSync options, а также в клиенте (Aurelia), где я использую другой сокет, который должен быть другим пространством имен. Тогда, наконец, NodeJS Koa должен быть вызван с io.of('/clientNamespace'),

Важное замечание: имейте в виду, что оба browserSync и пространство имен клиента должно быть объявлено с полным URL-адресом: порт + пространство имен (например: http://localhost:4000/namespaceBs), но на стороне сервера пространство имен используется только с именем без URL (например: /namespaceClient).

Если вы когда-нибудь задумывались, я назвал это todoSocket потому что это приложение TODO

Короче говоря, я изменил следующий код:

Gulp - run.js

let serve = gulp.series(
  build,
  done => {
    browserSync({
      online: false,
      open: false,
      port: portFrontEnd,
      notify: true,
      logLevel: 'silent',
      server: {
        baseDir: ['.'],
        middleware: [
          proxyOptionsAccessControl,
          proxy(proxyOptionsApiRoute),
          proxy(proxyOptionsAuthRoute)
        ]
      },
      socket: {
        namespace: `http://localhost:4000/bs` // <<<< HERE >>>>
      }
    }, function(err, bs) {
      let urls = bs.options.get('urls').toJS();
      log(`Application Available At: ${urls.local}`);
      log(`BrowserSync Available At: ${urls.ui}`);
      done();
    });
  }
);

использование Socket.io-Client с Aurelia (внешний интерфейс)

import io from 'socket.io-client';

var socket = io('http://localhost:5000/todo-socket'); // <<<< HERE >>>>

NodeJS с Коа

const http = require('http');
const server = http.createServer(app.callback());
const io = require('socket.io')(server);

// Load config for RethinkDB and koa
const config = require("./config");

// attach on the todo-socket namespace, only the name (not the full URL)
var todoSocket = io.of('/todo-socket');         // <<<< HERE >>>>
todoSocket.on("connection", function(socket) {  // <<<< AND HERE >>>>
  console.log('A new TODO WebSocket namespace client connected with ID: ' + socket.client.id);
});

Answer 2

Для всех, кто встречается в этом посте, и вышесказанное для них не работает. я имел proxy настроил в моей конфигурации вот так

proxy: {
  target: `${protocol}://localhost:${SERVER__PORT}`,        
},

и исправление, чтобы наконец заставить оба сокета работать вместе, было просто добавлением ws

proxy: {
  target: `${protocol}://localhost:${SERVER__PORT}`,
  ws: true,
},