socket.ioとwebpack-hot-middlewareの併用方法は？

Question

私はwebpack-dev-middlewareとホットパック（hot module）交換（HMR）を行うwebpack-hot-middlewareを使用しているので、ミドルウェアはWebSocketを使用してクライアントに変更をプッシュします。

しかし、私のアプリケーションコードも、クライアントとKoaサーバの間に独自のwebsocket接続が必要です。私はそれをどのように達成するか考えていませんか？ 2人が矛盾しているようです。私はそれらを並べてもらえますか？

私のサーバーコードは、この

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

そしてHMRソケットが正しく動作している

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

のように私のクライアントに何かのようになりますが、他の一つは GET /socket.io/?EIO=3&transport=polling&t=1446911862461-0、それらに話をしようとしています要求は失敗しています。

HMRソケットと衝突しないWebSocketを作成するにはどうすればよいですか？

Answer 1

ここにあるのは、同じエクスプレスサーバー上でwebpack hot reloading + socket.ioを使用しているworked for me in an app I'm working onです。あなたのpackage.jsonへ

追加：特急アプリ用

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

セットアップ：あなたのWebPACKの設定のpluginsセクションで

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

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

は私がのための報奨金を投稿しましたこの質問をするのに役立つこの質問は私が私自身のアプリのために働いています。