CODEWITHSUNDEEP
javascriptnode.jsexpresssocket.io
EasilyBaffled
EasilyBaffled

Reputation: 3882

Where is my client side socket.io?

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?

Upvotes: 0

Views: 589

Answers (1)

jfriend00
jfriend00

Reputation: 707158

The sequence I am using that works is this:

var express = require('express');
var app = express();
var server = app.listen(8081);
var io = require('socket.io').listen(server);

I'm not sure exactly which aspect of yours might be causing the problem, but it's different than this, particularly in how you set up the server (you assign two different values to your server variable which does not seem right) and how you initialize socket.io.

Also, I've seen some people with the client version of socket.io installed server-side, not the server version which obviously won't give you the ability to serve the /socket.io/socket.io.js file so that's worth checking.

Upvotes: 1

Related Questions