Question

我是整个React，webpack和express框架的新手，但我能够让我的React和webpack组件运行正常，直到我决定集成socket.io并表达一些实时通知。这是我在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组件，因为当我以反应中间件的标准方式完成它时：

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

当我试图直接访问网址时，它正在给我这个问题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并按照文档在客户端发送/接收数据，并且它工作得很好。我可以在此处找到React，Express和Webpack的样板项目：React Express Webpack Boilerplate Project

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

1 个答案: