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

Question

我有一台使用webpack-dev-middleware和webpack-hot-middleware进行热模块替换（HMR）的Koa服务器，因此中间件使用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和那些请求失败。

如何创建不与HMR套接字冲突的web套接字？

Answer 1

这是worked for me in an app I'm working on什么我在同一个快递服务器上使用webpack热重载+ socket.io。

添置您package.json：

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

在你的WebPack配置的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); 
}); 

我张贴了悬赏这个问题来帮助这个问题得到答案，虽然我有我为我自己的应用程序工作。