web-dev-qa-db-ja.com

socket.ioをwebpack-hot-middlewareと一緒に使用する方法

ホットモジュール置換（HMR）を実行するwebpack-dev-middlewareおよびwebpack-hot-middlewareを使用するKoaサーバーがあるため、ミドルウェアは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!!') })

そして私のクライアントのようなもの

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ソケットは正常に動作していますが、もう1つはGET /socket.io/?EIO=3&transport=polling&t=1446911862461-0と通信しようとしており、それらの要求は失敗しています。

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

node.jsexpresssocket.iowebpackkoa
21
Thijs Koerselman

これは、私が取り組んでいるアプリ（-===-）で 機能したものです ここでは、同じExpressサーバーでwebpack hot reloading + 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(),
],

Expressアプリのセットアップ：

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

この質問に対する報奨金を投稿して、この質問への回答を得られるようにしましたが、自分のアプリでも機能します。

12
Kyle Kelley