socket.io: Failed to load resource

2019-01-11 18:45发布

问题:

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..

回答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>




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


回答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>


回答4:

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.



回答5:

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



回答6:

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.