如何将socket.io与webpack-hot-middleware一起使用？

问题描述

我有一个使用webpack-dev-middleware和webpack-hot-middleware进行热模块替换（HMR）的Koa服务器，所以中间件使用一个websocket来推动客户端的更改。

I have a Koa server using webpack-dev-middleware and webpack-hot-middleware doing hot module replacement (HMR), so the middleware uses a websocket to push changes to the client.

但是我的应用程序代码也需要客户端和Koa服务器之间自己的websocket连接。我不知道如何实现呢？看起来像两个都是冲突的。我可以把它们并排吗？

But my application code also needs its own websocket connection between the client and the Koa server. I have no idea how to achieve that? Seems like the two are conflicting. Can I have them side by side?

我的服务器代码看起来像这样

My server code looks something like this

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

HM R插座正常工作，但另一个正在尝试与
GET /socket.io/?EIO=3&transport=polling&t=1446911862461-0并且那些请求失败。

The HMR socket is working correctly, but the other one is trying to talk toGET /socket.io/?EIO=3&transport=polling&t=1446911862461-0 and those requests are failing.

如何创建一个不与HMR套接字冲突的websocket？

How do I create a websocket that doesn't clash with the HMR socket?

推荐答案

以下是，我在同一个快递服务器上使用webpack热重新加载+ socket.io。

Here's what worked for me in an app I'm working on where I'm using webpack hot reloading + socket.io on the same express server.

添加到您的 package.json ：

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

您的webpack配置中的插件部分：

In the plugins section of your webpack config:

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

我发布了一个这个问题的赏金，以帮助这个问题得到回答，虽然我已经工作对于我自己的应用程序。

I posted a bounty for this question to help this question get answered, though I've got it working for my own app.

这篇关于如何将socket.io与webpack-hot-middleware一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！