Soket.io webpack-hot-middleware ile birlikte nasıl kullanılır?

Question

Sıcak modül değişimi (HMR) yapan webpack-dev-middleware ve webpack-hot-middleware kullanarak bir Koa sunucum var, böylece middleware istemciye değişiklikleri itmek için bir websocket kullanıyor.

Ancak, uygulama kodumun istemci ve Koa sunucusu arasında kendi web bağlantısına da ihtiyacı var. Bunu nasıl başaracağımı bilemez miyim? İkisi çatışıyor gibi görünüyor. Onları yan yana alabilir miyim?

Benim sunucu kodu bu

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

Ve HMR soket düzgün çalıştığını

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

gibi müvekkilim şey gibi görünür, ama diğeri GET /socket.io/?EIO=3&transport=polling&t=1446911862461-0 ve bu konuşmaya çalışıyor istekleri başarısız oluyor.

HMR soketiyle çakışmayan bir web parçasını nasıl oluştururum?

Answer 1

Burada, aynı Express sunucusunda webpack hot reloading + socket.io kullandığım worked for me in an app I'm working on. senin package.json için

İlaveler: ekspres uygulama için

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

Kurulum: senin webpack config plugins bölümünde

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

Ben bir ödül yayınlanmıştır Bu soruya cevap bulmak için Kendi uyguladığım için çalışıyorum.