socket.io 和 webpack-hot-middleware 如何搭配使用？

Question

我有一个 Koa 服务器使用 webpack-dev-middleware 和 webpack-hot-middleware 进行热模块替换 (HMR)，因此中间件使用 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 套接字冲突的 websocket？

Answer 1

这是 worked for me in an app I'm working on 我在同一个 express 服务器上使用 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(),
],

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

我发布了这个问题的赏金来帮助这个问题得到回答，尽管我已经为我自己的应用程序工作了。

socket.io 和 webpack-hot-middleware 如何搭配使用？

How to use socket.io together with webpack-hot-middleware?

node.js

express

socket.io

koa

webpack