如何将socket.io与webpack-hot-middleware一起使用？

我有一个使用webpack-dev-middleware的Koa服务器和使用热模块replace（HMR）的webpack-hot-middleware，所以中间件使用一个websocket将更改推送到客户端。

但是我的应用程序代码在客户端和Koa服务器之间也需要自己的websocket连接。 我不知道如何实现？ 看起来好像两个是相冲突的。 我可以并排吗？

我的服务器代码看起来像这样

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 ，这些请求失败。

如何创build一个不与HMRsockets冲突的websocket？

Answer 1

这是我在我正在使用webpack热重新加载+ socket.io在同一个快递服务器上的应用程序的工作 。

添加到你的package.json ：

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

在你的webpackconfiguration的plugins部分：

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

我发布了这个问题的赏金，以帮助这个问题得到解答，但我已经为我自己的应用程序工作。