質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

6654閲覧

socket.ioが上手く読み込みされない

kishi_kun

総合スコア26

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2017/06/04 09:04

###前提・実現したいこと
Node.jsとsocket.ioを用いて双方向通信を行いたいと考えています。
その中で以下を参考にチュートリアルをしています。
ドットインストール:socket.io入門

###発生している問題・エラーメッセージ
下記問題が発生していますが、原因と対処方法が調べてもわからないです。

1./socket.io/socket.io.jsが生成されないが、読み込みなどされているのでしょうか。
・様々な参考を見るとsocketioを読み込んだ場合上記jsファイルが自動生成されると
ありましたが、生成されません。
また、参考動画ではapp.jsを起動すると

info -socket.io started

が出力されていましたが、この文字列も出力されません。
なぜ上手く読み込まないのかがわかりません、どのようにすれば読み込み成功するのでしょうか。

2.上記index.htmlを実行すると下記エラーが出力される。
chromeのコンソールに下記メッセージが出力されますが理由がわかりません。
下記参考を見てもxmlの同時実行などしてないはずなのにも関わらずなぜ出力されるのでしょうか。
参考1
参考2

Deprecation] Synchronous XMLHttpRequest on the ctouch_bootstrap.js:22 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check
GET filesystem:chrome-extension://iemofinbkpbpamdjl ctouch_bootstrap.js:23 GET filesystem:chrome-extension://iemofinbkpbpamdjljafoheiaamajgdn/persistent/ctouch_filesystem.json
Uncaught DOMException: Failed to execute 'send' on ctouch_bootstrap.js:23 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'filesystem:chrome-extension://iemofinbkpbpamdjljafoheiaamajgdn/persistent/ctouch_filesystem.json'. at getFile (chrome-extension://iemofinbkpbpamdjljafoheiaamajgdn/ctouch_bootstrap.js:23:7) at chrome-extension://iemofinbkpbpamdjljafoheiaamajgdn/ctouch_bootstrap.js:26:30 at chrome-extension://iemofinbkpbpamdjljafoheiaamajgdn/ctouch_bootstrap.js:384:3

###該当のソースコード
app.js

javascript

1var app = require('http').createServer(handler), 2 io = require('socket.io').listen(app), 3 fs = require('fs'); 4app.listen(1337); 5function handler (req,res){ 6 fs.readFile(__dirname+'/index.html',function(err,data){ 7 if(err){ 8 res.writeHead(500); 9 return res.end('Error'); 10 } 11 res.writeHead(200); 12 res.write(data); 13 res.end(); 14 }) 15}

index.html

html

1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>socketio練習</title> 6</head> 7<body> 8<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9<script src = "/socket.io/socket.io.js"></script> 10<script> 11</script> 12</body> 13</html> 14
KSwordOfHaste👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

1./socket.io/socket.io.jsが生成されない

教材では「サーバーを動かすとこのファイルが自動生成される」と説明されてますが、GitHub: socket.io-clientをみるとこう書かれています。

A standalone build of socket.io-client is exposed automatically by the socket.io server as /socket.io/socket.io.js. Alternatively you can serve the file socket.io.js found in the dist folder.

exposed automaticallyと書かれているので「自動生成される」のではなくsocket.ioサーバーがこのURLが要求されたとき自動的にJSファイルが見えるようにしてくれているという意味だと思います。一々そういうファイルがサーバー上の"/socket.io/socket.io.js"なる場所へ生成されるわけではありません。実際にindex.htmlをロードするとこのJSファイルはちゃんと読めています。

info -socket.io startedが表示されない

おそらくはsocket.ioのバージョンが違うせいではないでしょうか。教材のトップページに記されている前提バージョンは Node.js 0.10.24 / npm 1.3.21 / Socket.IO 0.9.16 を使用しています。 自分もUbuntuで Node.js v7.9.0 / npm 4.2.0 / Socket.IO 2.0.2 でやってみましたがこのメッセージは出ませんでした。しかしサーバーは正常に起動しています。

2.上記index.htmlを実行すると下記エラーが出力される。

質問者さんは"file:///..../index.html"のようにローカルファイルシステム上のファイルとして直接開いたのではないでしょうか?そういう開き方をすると/socket.io/socket.io.jsというURLの意味が変わってしまうのでロードできないです。実際にUbuntu上でやってみると似たようなエラーが出ました。

node app.jsとしてからhttp://localhost:1337のようなURLで開くと正常に読めると思います。(サーバー上で直接ブラウザーを開いて確認する場合の例です)


追記1: http://localhost:1337/index.htmlでアクセスしてもエラーとのことなので以下を確認してみてはいかがでしょうか?(それが原因だったときご質問にあるエラーになるかどうか怪しいところもありますが)

  • サーバー上のnpm, node, socket.ioのバージョンを確認してみる

nodeが古すぎないかなどの確認です。v6やv7であれば問題ない気がします。どのバージョンまでなら問題ないかまではわかりませんが・・・

  • サーバー上のnode app.jsは正常に起動できているか
  • サーバー上でapp.jsがあるディレクトリーでnpm install socket.ioは成功しているのか

app.jsを少し変更してデバッグログを出すようにすると少しは状況がわかりやすくなると思います。

javascript

1// app.js 2var app = require('http').createServer(handler), 3 io = require('socket.io').listen(app), 4 fs = require('fs'); 5app.listen(1337); 6function handler (req, res){ 7 console.log('request:' + req.method + ': url=' + req.url); // <================追加 8 fs.readFile(__dirname+'/index.html', function(err,data){ 9 if(err){ 10 res.writeHead(500); 11 return res.end('Error'); 12 } 13 res.writeHead(200); 14 res.write(data); 15 res.end(); 16 }) 17} 18console.log('server start'); // <=============追加

この状態でサーバー上でChromeを起動し、"http://localhost:1337"へアクセスした際のnode app.jsを実行したコンソール上表示は以下のようになるのが期待です。

bash

1$ node app.js 2server start # app.jsを起動したら出るはず 3request:GET: url=/ # Chromeからアクセスしたらこれ以降の2行が出るはず 4request:GET: url=/fabicon.ico # この行はFirefoxだとでないみたい

投稿2017/06/04 12:59

編集2017/06/05 02:29
KSwordOfHaste

総合スコア18392

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KSwordOfHaste

2017/06/05 01:56

> ファイルを読みに行ってるのが問題なんでしょうか。 ファイルを読むこと自体は応答を得るために必要です。「ファイルがうまく読めていない」可能性はあるかも知れませんが、その場合は応答が500になるのでブラウザー上にはErrorと表示されるはずです。 原因になりそうな点を思いついたので追記します。
kishi_kun

2017/06/05 12:38

回答ありがとうございます。 クロームの拡張機能が悪さをしていたことが原因でした。 色々ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問