Как использовать socket.io вместе с webpack-hot-middleware?

У меня есть сервер Koa, использующий webpack-dev-middleware и webpack-hot-middleware, выполняющий горячую замену модуля (HMR), поэтому промежуточное программное обеспечение использует веб-приложение для изменения изменений для клиента.

Но мой код приложения также нуждается в собственном соединении с сервером между клиентом и сервером Koa. Я понятия не имею, как это достичь? Похоже, что они конфликтуют. Могу ли я иметь их бок о бок?

Мой код сервера выглядит примерно так:

const compiler = webpack(webpackConfig)
const app = new Koa()

app.use(webpackDevMiddleware(compiler, {
  quiet: true,
  noInfo: true
  stats: {
    colors: true,
    reasons: true
  }
})))

app.use(webpackHotMiddleware(compiler))

const server = require('http').createServer(app.callback())
const io = require('socket.io')(server)
io.on('connection', function() { console.log('socket connection!!') })

И мой клиент что-то вроде

import Client from 'socket.io-client'
const io = Client()
io.on('connection', (socket) => {
  console.log('+++ io connected! ++++')
  io.on('disconnect', () => { console.log('disconnected', socket) })
})

Сокет HMR работает правильно, но другой пытается поговорить с GET /socket.io/?EIO=3&transport=polling&t=1446911862461-0, и эти запросы не работают.

Как создать веб-узел, который не сталкивается с гнездом HMR?

Ответы

Ответ 1

Здесь работал у меня в приложении, над которым я работаю, где я использую горячую перезагрузку webpack + socket.io на тот же самый экспресс-сервер.

Добавляет к вашему package.json:

"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"

В разделе plugins вашего веб-пакета config:

plugins: [
   new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoErrorsPlugin(),
],

Настройка для экспресс-приложения:

const http = require('http');
const express = require('express');

const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);

// Create the app, setup the webpack middleware
const app = express();
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler));

// You probably have other paths here
app.use(express.static('dist'));

const server = new http.Server(app);
const io = require('socket.io')(server);

const PORT = process.env.PORT || 8090;

server.listen(PORT);

io.on('connection', (socket) => {
  // <insert relevant code here>
  socket.emit('mappy:playerbatch', playerbatch);
});

Я отправил щедрость на этот вопрос, чтобы помочь ответить на этот вопрос, хотя у меня есть работа для моего собственного приложения.