无法使用 socket.io 和 React 运行 webpack

Question

我是整个 React、webpack 和 express 框架的新手，但在我决定集成 socket.io 和 express for一些实时通知。这是我在 server.js:

中的服务器端代码

// Babel ES6/JSX Compiler
require('babel-register');
var React = require('react');
var ReactDOM = require('react-dom/server');
var Router = require('react-router');
var express = require('express');
var path = require('path');
var routes = require('./routes');
var bodyParser = require('body-parser');
var swig  = require('swig');
var webpack = require("webpack");
var webpackConfig = require('./webpack.config');
var compiler = webpack(webpackConfig);

var app = express();

app.use(express.static(path.join(__dirname)));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

const PORT = process.env.PORT || 8080;

var WebpackDevServer = require("webpack-dev-server");

var server = new WebpackDevServer(compiler, {
  contentBase: webpackConfig.output.path,
  hot: true,
  historyApiFallback: true,
  filename: path.resolve(webpackConfig.output.path, webpackConfig.output.filename),
  publicPath: webpackConfig.output.publicPath,
  headers: { "Access-Control-Allow-Origin": "*" },
  stats: { colors: true }
});


var server = require('http').createServer(app);
var io = require('socket.io')(server);

server.listen(PORT);

//Whenever someone connects this gets executed
io.on('connection', function(socket){
  console.log("Welcome to the Web Portal");

  socket.on('disconnect', function () {
    console.log('Goodbye');
  });

});

app.post("/notify", function(req, res) {
  var title = req.body.title;
  var description = req.body.description;
  io.emit('notification', title + '\n'+ description);
  res.send("Notification received");
});

这是我在 index.html 中的客户端代码：

<!DOCTYPE html>
<html class="background-grey">
  <head>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/solarized.min.css" />

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


  </head> 
  <body class="background-grey">
    <div class="container"></div>
    <script src="/bundle.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect();

      socket.on('notification', function(message) {
        alert(message);
      });
    </script>

  </body>
</html>

我基本上是通过 webpack-dev-server 渲染我的 React 组件，因为当我通过 react-middleware 以标准方式进行渲染时：

app.use(function(req, res) {
  Router.match({ routes: routes.default, location: req.url }, function(err, redirectLocation, renderProps) {
    if (err) {
      res.status(500).send(err.message)
    } else if (redirectLocation) {
      res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      var html = ReactDOM.renderToStaticMarkup(React.createElement(Router.RouterContext, renderProps));
      var page = swig.renderFile('index.html', { html: html});
      res.status(200).send(page);
    } else {
      res.status(404).send('Page Not Found')
    }
  });
});

当我试图直接转到 url 时，它给了我这个问题 Invariant Violation: Could not find "store" in either the context or props of "Connect(DashBoard)"。

此外，当我试图注释掉 var server = require('http').createServer(app); 以便 var io = require('socket.io')(server); 将从 WebpackDevServer 调用服务器时，它会抛出此错误：

  var listeners = server.listeners('request').slice(0);
                         ^

我几乎查看了所有在线帖子和文章，但无法在我的代码中实现它们。有人可以告诉我如何运行我的服务器并正确呈现所有 React 组件并集成 socket.io 吗？

Answer 1

我不太确定我之前做错了什么，但我重新开始并重建了我的项目结构。然后我在 server.js 中设置 socket.io 并按照文档在客户端获取 send/receive 数据，并且它运行良好。我的 React、Express 和 Webpack 样板项目可以在这里找到：React Express Webpack Boilerplate Project

无法使用 socket.io 和 React 运行 webpack

Unable to run webpack with socket.io and React

sockets

node.js

express

reactjs

webpack-dev-server