web-dev-qa-db-ja.com

socket.io:リソースの読み込みに失敗しました

私はsocket.ioとnode.jsを使い始めようとしています。

Socket.ioのサイトで最初の例を実行すると、ブラウザのコンソールに次のエラーが表示されます。

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 

これは私の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);
  });
});

そして、これは私の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>

私はすでにsocket.ioをインストールしています。

19
gaggina

問題

  • まず最初に、サーバーに到達するには、サーバーがバインドされているサーバーポート(app.listen(3001);)をクライアント側で確認する必要があります。

  • Socket.ioについては、リンクタグの残りのソースの前に_http://localhost:3001_を追加すると、この問題が解決します。これは、ネットワークがポートをlocalhostにバインドする方法が原因であると思われますが、原因についてさらに情報を探します。

変更するもの:


サーバーのポートバインディング:

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

に変更する必要があります

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



socket.ioを動作させる:

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

に変更する必要があります

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


24

expressバージョン3.xを使用している場合 移行するには少し微調整が必​​要なSocket.IO互換性の問題

Socket.IOの.listen()メソッドは、_http.Server_インスタンスを引数として受け取ります。
3.x以降、express()の戻り値は_http.Server_インスタンスではありません。 Socket.IOをExpress 3.xで動作させるには、_http.Server_インスタンスを手動で作成してSocket.IOの.listen()メソッドに渡してください。

ここに簡単な例があります:

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

server.listen(3000);
_
6
Marius Butuc

まず、Socket.io " How To Use "のドキュメントはあいまいです(おそらく誤解を招く可能性があります)。特にSocket.ioクライアントのコードを文書化する場合。

次に、ここでStackOverflowに対して与えた答えは具体的すぎます。 Socket.ioクライアントのプロトコル、ホスト名、ポート番号を手動でハードコードする必要はありません。それはスケーラブルなソリューションではありません。 JavaScriptはロケーションオブジェクト-window.location.Origin

Socket.ioの概要

Installation

Socket.ioには、サーバーとクライアントのインストールが必要です。

サーバーをインストールするには
npm install socket.io

クライアントを使用するには、このスクリプトをドキュメント(index.html)に追加します
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

Express 3/4による実装

次のファイルを作成します。

サーバー(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);
  });
});

クライアント(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>
1
tfmontague

これを試して

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

それが役に立てば幸い

0
Abdul Hamid

これを別のコンピューターで実行しようとしていて、このエラーが発生している場合は、これが役立つことがあります。

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

Httpsを使用している場合は、明らかにプロトコルも変更する必要があります。私の場合、複数のローカルコンピューターで実行するサーバーを作成する必要がありました。そのため、ページを読み込むサーバーに応じてソケットが別のアドレスに接続する必要があるため、固定アドレスをここに入力しても機能しません。他の人にも役立つ可能性があるため、ここに追加します。

0
Laky