socket.io: Failed to load resource

Solution 1:

The Issues

  • First of all you need to be looking at the server port that the server is bound on (app.listen(3001);) on the client side in order to reach the server at all.

  • As for socket.io, adding http://localhost:3001 before the rest of the source in the link tag solves this problem. This is apparently due to the way the network binds ports to localhost, however I will try to find some more information on the cause;

What to change:


The port binding for the server:

var socket = io.connect('http://localhost');

should be change to

var socket = io.connect('http://localhost:3001');



Making socket.io behave:

<script src="/socket.io/socket.io.js"></script>

should be change to

<script src="http://localhost:3001/socket.io/socket.io.js"></script>


Solution 2:

If you are using express version 3.x there are Socket.IO compatibility issues that require a bit of fine tuning to migrate:

Socket.IO's .listen() method takes an http.Server instance as an argument.
As of 3.x, the return value of express() is not an http.Server instance. To get Socket.IO working with Express 3.x, make sure you manually create and pass your http.Server instance to Socket.IO's .listen() method.

Here is a quick example:

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

server.listen(3000);

Solution 3:

Firstly, the Socket.io "How To Use" documentation is vague (perhaps misleading); especially when documenting code for the Socket.io client.

Secondly the answers you've been given here on StackOverflow are too specific. You shouldn't have to manually hardcode the protocol, hostname, and port number for the Socket.io client; that's not a scalable solution. Javascript can handle this for you with the location object - window.location.origin.

Getting started with Socket.io

Installation

Socket.io requires the installation of a server and client.

To install the server
npm install socket.io

To use the client, add this script to your document (index.html)
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

Implementation with Express 3/4

Create the following files:

Server (app.js)

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

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Client (index.html)

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  // origin = http(s)://(hostname):(port)
  // The Socket.io client needs an origin
  // with an http(s) protocol for the initial handshake.
  // Web sockets don't run over the http(s) protocol,
  // so you don't need to provide URL pathnames.
  var origin = window.location.origin;
  var socket = io.connect(origin);
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>