如何修复浏览器同步&；socket.io冲突？

我似乎在

浏览器同步

中使用的套接字与我想与

socket.io

一起使用的套接字存在冲突。我通过

gulp

任务使用

browser-sync

（这是

Aurelia-CLI

default项目附带的）。发生的情况是，只有

浏览器同步

套接字似乎可以工作，而服务器端主要使用的

socket.io

完全未读。我确实找到了解决这个问题的方法，还有另外一种方法，它们都提到了名称空间的使用。然而，我尝试了一些差异，即使它们运行时出现错误，也无法解决我的任何问题

我主要在

Aurelia CLI

项目中使用

Gulp

和

browser sync

，而后端是

NodeJS

和

Koa

。

socket的版本。io@1.6.0

而

浏览器-sync@2.13.0

使用的端口用于前端：4000，后端：5000

这是文件列表

Gulp-run.js

将Socket.io-Client与Aurelia一起使用（前端）

< Koa >（后端）NoDjs < /P> 我尝试了使用和不使用名称空间，这似乎没有改变任何东西。我提到

编辑

---

通过进一步测试，服务器端的

socket.io

似乎根本不起作用。它不会从服务器输出

console.log（'connected with ID:'+socket.client.ID）

，但是它也不会显示或抛出任何错误。服务器端的代码过去与

WebPack

一起工作，所以我真的认为这与

browserSync

冲突有关。

经过几天的工作，我让它工作起来了。我不得不在两个不同的地方更改名称空间，在

browserSync

选项中，以及在客户端（Aurelia）中，我使用的另一个套接字必须是不同的名称空间。最后，必须使用（'/clientNamespace'）的

io.of调用
NodeJS-Koa

重要提示，请注意
浏览器同步
和客户端命名空间必须使用完整的URL:port+命名空间声明（例如：
http://localhost:4000/namespaceBs
），但是在服务器端，名称空间仅与不带URL的名称一起使用（例如：
/namespaceClient
）

如果你想知道的话，我称它为todoSocket，因为它是一个TODO应用程序

因此，为了简短起见，我更改了以下代码：

Gulp-run.js

let serve=gulp.series(
建造，
完成=>{
浏览器同步({
在线：错，
开：错，
端口：portFrontEnd，
通知：正确，
日志级别：“静默”，
服务器：{
baseDir:['。]，
中间件：[
ProxyOptionAccessControl，
代理（proxyOptionsApiRoute），
代理（ProxyOptionAuthRoute）
]
},
插座：{
名称空间：`http://localhost:4000/bs` // >
}
}，功能（err，bs）{
让url=bs.options.get（'url'）.toJS（）；
日志（`Application Available At:${url.local}`）；
日志（`BrowserSync可在：${url.ui}`）获得；
完成（）；
});
}
);

将Socket.io-Client与Aurelia一起使用（前端）

从“socket.io客户端”导入io；
变量套接字=io（'http://localhost:5000/todo-套接字“；/>

与Koa的NodeJS

consthttp=require（'http'）；
const server=http.createServer（app.callback（））；
const io=require（'socket.io'）（服务器）；
/ReTimkDB和膝关节炎的负载配置
const config=require（“./config”）；
//附加在todo套接字命名空间上，仅附加名称（不是完整URL）
var todoSocket=io.of（'/todo socket'）；/>
todoSocket.on（“连接”，函数（套接字）{/>
log（'一个新的TODO WebSocket命名空间客户端，连接ID:'+socket.client.ID）；
});
在花了几天的时间之后，我让它工作了。我不得不在两个不同的地方更改名称空间，在
浏览器同步
选项中，以及在客户端（Aurelia），我使用的另一个套接字必须是不同的名称空间。最后，必须使用的
io调用
NodeJS Koa
（'/clientNamespace'）

重要提示，请注意
浏览器同步
和客户端命名空间必须使用完整的URL:port+命名空间声明（例如：
http://localhost:4000/namespaceBs
），但是在服务器端，名称空间仅与不带URL的名称一起使用（例如：
/namespaceClient
）

如果你想知道的话，我称它为todoSocket，因为它是一个TODO应用程序

因此，为了简短起见，我更改了以下代码：

Gulp-run.js

let serve=gulp.series(
建造，
完成=>{
浏览器同步({
在线：错，
开：错，
端口：portFrontEnd，
通知：正确，
日志级别：“静默”，
服务器：{
baseDir:['。]，
中间件：[
ProxyOptionAccessControl，
代理（proxyOptionsApiRoute），
代理（ProxyOptionAuthRoute）
]
},
插座：{
名称空间：`http://localhost:4000/bs` // >
}
}，功能（err，bs）{
让url=bs.options.get（'url'）.toJS（）；
日志（`Application Available At:${url.local}`）；
日志（`BrowserSync可在：${url.ui}`）获得；
完成（）；
});
}
);

将Socket.io-Client与Aurelia一起使用（前端）

从“socket.io客户端”导入io；
变量套接字=io（'http://localhost:5000/todo-套接字“；/>

与Koa的NodeJS

consthttp=require（'http'）；
const server=http.createServer（app.callback（））；
const io=require（'socket.io'）（服务器）；
/ReTimkDB和膝关节炎的负载配置
const config=require（“./config”）；
//附加在todo套接字命名空间上，仅附加名称（不是完整URL）
var todoSocket=io.of（'/todo socket'）；/>
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;

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

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

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

import io from 'socket.io-client';

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

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