0
私は、React、webpack、expressフレームワーク全体には新しいですが、socket.ioを統合して表現するまで、Reactとwebpackコンポーネントはうまく動作しています。いくつかのリアルタイム通知があります。ここに私のサーバー側のコードがserver.jsである：socket.ioとReactでwebpackを実行することができません
// 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-を通じて私のリアクトコンポーネントをレンダリングしています私が反応し、ミドルウェアを通じて標準的な方法それをやったとき以来の、サーバー：私は直接のURLに移動しようとしたとき
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 io = require('socket.io')(server);がWebpackDevServerからサーバーを呼び出すことになるようvar server = require('http').createServer(app);をコメントアウトしようとしたが、それは私にこのエラーがスローした場合：ほぼすべての記事の私が見てきた
var listeners = server.listeners('request').slice(0);
^
をオンラインで記事を書くことはできましたが、自分のコードで実装することができませんでした。誰かが私のサーバを実行してReactコンポーネントを正しくレンダリングし、socket.ioを統合する方法について教えてください。