I have created an isomorphic React app using Express and React-Engine. Right now I am trying to connect socket.io. In the express setup I have
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
...
app.set('views', __dirname + '/public/views');
app.get('/', function(req, res) {
res.render(req.url, {
title: 'React Engine Express Sample App',
name: 'something'
});
});
...
var server = app.listen(3000);
io.on('connection', function (socket) {
socket.on('logIn', function (data) {
console.log(data);
});
});
On the front end I have a React component Layout
var React = require('react');
var socket;
module.exports = React.createClass({
componentDidMount: function () {
socket = io();
},
clicked: function () {
socket.emit('logIn', {name: "Dan"});
console.log("clicked");
},
render: function render() {
return (
<html>
<body>
{this.props.children}
<button onClick={this.clicked}>click me</button>
<script src="/socket.io/socket.io.js"></script>
<script src='/bundle.js'></script>
</body>
</html>
);
}
});
The project structure is
index.js(express app)
package.json
/public
bundle.js(generated by webpack)
index.js(front-end routing setup)
routes.jsx
/views
app.jsx
layout.jsx(where the front end really starts)
From everything I have seen that should work. The express app should host the socket.io files so that I can grab it on the front end. Despite that neither this nor localhost:3000/socket.io/socket.io.js have worked. I have even tried a few different relative paths. How can I find my client side socket.io files?