वेबपैक-हॉट-मिडलवेयर के साथ socket.io का उपयोग कैसे करें?

Question

मेरे पास वेबपैक-डीवी-मिडलवेयर और वेबपैक-हॉट-मिडलवेयर का उपयोग कर कोआ सर्वर है जो गर्म मॉड्यूल प्रतिस्थापन (एचएमआर) कर रहा है, इसलिए क्लाइंट में परिवर्तन को धक्का देने के लिए मिडलवेयर वेबसाईट का उपयोग करता है।

लेकिन मेरे एप्लिकेशन कोड को क्लाइंट और कोआ सर्वर के बीच अपने स्वयं के वेबस्केट कनेक्शन की भी आवश्यकता है। मुझे नहीं पता कि इसे कैसे प्राप्त किया जाए? ऐसा लगता है कि दोनों विरोधाभासी हैं। क्या मैं उन्हें एक तरफ रख सकता हूं?

मेरे सर्वर कोड इस

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 और उन से बात करने की कोशिश कर रहा है अनुरोध विफल रहे हैं।

मैं एक वेबस्केट कैसे बना सकता हूं जो एचएमआर सॉकेट से टकराव नहीं करता है?

Answer 1

यहां worked for me in an app I'm working on है जहां मैं उसी एक्सप्रेस सर्वर पर वेबपैक हॉट रीलोडिंग + सॉकेट.io का उपयोग कर रहा हूं।

अपने package.json को परिवर्धन:

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

अपने webpack config की 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); 
}); 

मैं के लिए एक इनाम तैनात इस प्रश्न को उत्तर देने में मदद करने के लिए यह सवाल है, हालांकि मुझे मिल गया है मेरे अपने ऐप के लिए काम नहीं कर रहा हूँ।