/socket.io/socket.io.jsが作成されない

node.jsとsocket.ioを用いて，サーバとブラウザでソケット通信を行いたいと考えています．

サイト（https://ics.media/entry/4320）を参考にしながらサーバ側とクライアント側のコードを書いて
Chromeからアクセスしたのですが，

GET file:///socket.io/socket.io.js net::ERR_FILE_NOT_FOUND

上記のようなエラーがブラウザ側で発生しています．
また実際にディレクトリを見たところ，/socket.io/socket.io.jsはありませんでした．

ググったところ，サーバ側で
var io = socketIO.listen(server);
をすることにより，
/socket.io/socket.io.js
は自動生成されるとのことだったのですが，サーバ側のプログラムを起動しても
対象ファイルは作成されませんでした．

また，サーバプログラムのserver.jsと，クライアント側のjsコードを書いたindex.htmlと
node_moduleフォルダは全て同じディレクトリに並列に存在しています．

何が問題なのかわかりません．お助けください．

バージョンは
node：v8.6.0
npm：5.4.2
socket.io：2.0.4
です．

以下にコードを記載します．

サーバー側

JavaScript
1// サーバー構築
2var http = require("http");
3// fsモジュールの読み込み
4var fs = require("fs");
5// pathモジュールの読み込み
6var path = require("path");
7// httpサーバーを立てる
8var server = http.createServer(requestListener);
9// socket.ioの読み込み
10var socketIO = require("socket.io");
11// サーバーでSocket.IOを使える状態にする
12var io = socketIO.listen(server);
13// httpサーバーを起動する。
14server.listen((process.env.PORT || 3008), function() {
15    console.log((process.env.PORT || 3008) + "でサーバーが起動しました");
16});
17/**
18 * サーバーにリクエストがあった際に実行される関数
19//  */
20function requestListener(request, response) {
21    response.writeHead(200, {
22        "Content-Type": "text/plain"
23    });
24    response.write("Hello World");
25    response.end();
26}
27// サーバーへのアクセスを監視。クライアントからのアクセスがあったらコールバックが実行
28io.sockets.on("connection", function(socket) {
29    var roomID;
30
31    socket.on("from_client", function(msg){
32            console.log("receive: " + msg);
33    });
34});
35// 接続エラー
36io.sockets.on("connect_error", function(socket) {
37    console.log("connect_error");
38});
39// 接続終了
40io.sockets.on("disconnect", function(socket) {
41    socket.emit("disconnectEvent");
42    console.log("disconnecth");
43});

クライアント側

html
1<!DOCTYPE html>
2
3<html>
4  <head>
5    <title>canvas</title>
6    <style>
7      #canvas {
8        background: #666;
9      }
10    </style>
11    <script src="/socket.io/socket.io.js"></script>
12  </head>
13  <input type="button" name="reset" value="reset" onClick="reset()">
14  <body>
15    <canvas id="canvas" width="144" height="192"></canvas>
16    <script>
17
18      // サーバーに接続
19      var socket = io.connect(location.origin);
20      // サーバーへデータを送信
21      socket.emit("dataName2", { fuga : "piyo" });
22      // サーバーからのデータを受信
23      socket.on("dataName1", function(dataFromServer) {
24          // 「1」という数値がブラウザのコンソールに出力される。
25          console.log(dataFromServer.hoge);
26      });
27
28    </script>
29  </body>
30</html>
31
32
33
34

行動規範の内容に同意します

回答1件

ベストアンサー

/socket.io/socket.io.jsは、ファイルとして生成するわけではなく、Node.jsサーバの実行結果として返ってくるだけのものです。

file://ではNode.jsのサーバにつながりませんので、「HTMLをNode.jsから配信する」「/socket.io/socket.io.jsにサーバ名を指定する」などして、正しくNode.jsサーバを指すようにしましょう。

投稿2017/11/02 10:57

maisumakun

総合スコア145183

raaacho

2017/11/02 13:43

ありがとうございます！ HTMLからの呼び出しを <script src="(サーバ名):(ポート番号)/socket.io/socket.io.js"></script> にしたところ， GET file:///socket.io/socket.io.js net::ERR_FILE_NOT_FOUND のエラーは消えたのですが，クライアント側のvar socket = io.connect(location.origin);の部分で下記のエラーは未だに出てしまいます． Uncaught ReferenceError: io is not defined どうすれば良いでしょうか？

行動規範の内容に同意します