socket.io: Failed to load resource

Question

I'm trying to getting started with socket.io and node.js.

Following the first example on the socket.io's site I'm getting the following error in the browser's console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3001/socket.io/socket.io.js
Uncaught ReferenceError: io is not defined

This is my server.js

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

app.listen(3001);

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

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

And this is my index.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>
  </body>
</html>

I've already installed socket.io..

Looks like it's not finding socket.io.js on your server. Is it there in the path you defined? — joshp, Jul 25 '12 at 15:38
This file should be hosted by node itself when requesting the path: /socket.io/socket.io.js. — gaggina, Jul 25 '12 at 15:43
I never used socket.io.js, but based on the server code you posted I don't see how the file is getting downloaded. Usually with node/express you would either include the express.static to serve that file or define a route for it. If serving static resources is there by default then I would look to the path. — joshp, Jul 25 '12 at 16:25
it's actually not an issue with socket.io really, 'localhost' behaves weirdly and doesn't like to act like a real url sometimes with node. — Michael Zaporozhets, Jul 26 '12 at 08:02
I had the same problem, solution for me: check the version of socket-io and socket-io.client and check network. — Dmitry, May 14 '16 at 21:39

score 26 · Answer 1 · answered Jul 26 '12 at 07:54

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>

Any idea why this setup would only work for one user and not others? — gjw80, Nov 25 '13 at 15:20

score 7 · Answer 2 · answered Feb 06 '13 at 19:28

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

score 3 · Answer 3 · edited Jun 20 '20 at 09:12

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>

score 1 · Answer 4 · answered Oct 03 '22 at 19:58

change;

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

to;

<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>

and drop between to head tags.

And Try it!

score 0 · Answer 5 · answered Feb 05 '14 at 12:46

If you're trying to make this run on a different computer and you are getting this error, you may find this useful.

var host = window.location.hostname; 
var socket = io.connect('http://' + host);

If you're using https, then obviously you need to change the protocol as well. In my case I needed to create a server that would run on several local computers, so putting here a fixed address would not work, as the socket would need to connect to a different address depending on what server you are loading the page from. Adding this here as it may help someone else too.

score 0 · Answer 6 · answered Feb 05 '14 at 13:00

0

Try this

var app = express()
,http = require('http');

var server = http.createServer(app);
server.listen(3001);
io = require('socket.io').listen(server);
io.set('log level', 1);

Hope it helps

answered Feb 05 '14 at 13:00

Abdul Hamid

3,222
3
24
31

score 0 · Answer 7 · answered Mar 04 '21 at 17:18

0

The following changes finally worked for me

const app = express(); const http = require('http'); const server = http.createServer(app); const io = require('socket.io')(server)

answered Mar 04 '21 at 17:18

Sourabh

207
2
2

score -3 · Answer 8 · answered May 09 '13 at 00:50

I know this is very very late, but I found a solution for those who might have previously set node.js up. My machine needed get hardware replaced, when it came back, I noticed quite a few settings were back to factory default. I was also getting the error discussed above.

Running

sudo apachectl start

from the terminal fixed up my issue.

socket.io: Failed to load resource

8 Answers8

The Issues

What to change:

Getting started with Socket.io

Installation

Implementation with Express 3/4

Linked

Related