node.js - react - socket io tutorial

¿Cómo usar socket.io junto con webpack-hot-middleware?

Question

Tengo un servidor Koa que usa webpack-dev-middleware y webpack-hot-middleware que realiza el reemplazo de módulos en caliente (HMR), por lo que el middleware usa un websocket para enviar cambios al cliente.

Pero el código de mi aplicación también necesita su propia conexión websocket entre el cliente y el servidor Koa. ¿No tengo idea de cómo lograr eso? Parece que los dos son conflictivos. ¿Puedo tenerlos uno al lado del otro?

Mi código de servidor se ve algo como esto

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!!'') })

Y mi cliente algo como

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

El zócalo HMR está funcionando correctamente, pero el otro está intentando hablar con GET /socket.io/?EIO=3&transport=polling&t=1446911862461-0 y esas solicitudes fallan.

¿Cómo creo un websocket que no coincida con el socket HMR?

Answer 1

Esto es lo que me funcionó en una aplicación en la que estoy trabajando, donde estoy usando webpack hot recarga + socket.io en el mismo servidor Express.

Adiciones a tu package.json :

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

En la sección de plugins de la configuración de su paquete web:

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

Configuración para la aplicación Express:

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

Publiqué una recompensa por esta pregunta para ayudar a obtener respuesta a esta pregunta, aunque la tengo funcionando para mi propia aplicación.