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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3895閲覧

ローカルファイルでソケットを用いたイベントの送受信

toyopi_kouchan

総合スコア12

Socket.IO

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/20 07:27

編集2016/06/20 07:37

###前提・実現したいこと
CDNを利用せず、ダウンロードしたローカルファイルであるjquery.js,socket.io.jsを使用してソケットを用いたイベントの送受信を行いたい。

###発生している問題・エラーメッセージ

CDN利用して、ソケットを用いたイベントの送受信はできたのだが、
実現したいことはダウンロードしたローカルファイルを利用して、イベント送受信することなので、script srcにダウンロードしたファイルのパスを書き込み、サーバーを立ち上げて、htmlファイルを読んだのだが、jquery.js,socket.io.jsファイルを読み込まない。よって、ソケットを用いたイベントの送受信ができていない。

###該当のソースコード

client.html <!DOCTYPE html> <html> <head> <title>Socket.io実験</title> <script script type="text/javascript" src="/public/javascripts/jquery-1.10.2.min.js"></script> <script script type="text/javascript" src="/public/javascripts/socket.io.js"></script> <script> $(document).ready(function () { var socket= io.connect(); socket.on('greeting', function (data, fn) { console.log('jqueryつながったs'); var answer = confirm(data.message); fn(answer); }); }); </script> </head> <body> <h1>Socket.IO sample code 01</h1> </body> </html>
servar.js var fs = require('fs'); var http = require('http'); var server = http.createServer(); var io = require('socket.io').listen(server); server.on('request' , function (req, res) { fs.readFile('./public/client.html', function (err, data) { if (err) { res.writeHead(500); return res.end('Error loading client.html'); } res.writeHead(200, { 'Content-Type': 'text/html; charset=UTF-8' }); console.log('サーバー接続'); res.end(data); }); }).listen(5000); console.log("server running port 5000"); io.sockets.on('connection', function (socket) { console.log('つながった?socket'); socket.emit('greeting', {message: 'hello, '}, function (data) { console.log('result: ' + data); }); });

###補足情報(ファイルパス)

カレントディレクトリ:C:\Users\admin\Documents\Visual Studio 2015\Projects\socketio\socketio

フォルダ構成

cd
├─node_modules
│ ├─.bin
│ ├─express
| |
│ ├─jade
| |
│ └─socket.io

├─obj

├─public
│ ├─images
│ ├─javascripts
| | ├─jquery-1.10.2.min.js(jqueryファイル)
| | └─socket.io.js(socket.ioファイル)
| ├─client.html
│ └─stylesheets
├─routes
├─views
└─server.js(サーバー起動ファイル)

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

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

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

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

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

guest

回答2

0

ベストアンサー

Node.jsのhttpはApacheのドキュメントルートのように、勝手にURLからフォルダパスに変換してくれたりしないです。いまのコードだとどんなURLでアクセスしても必ずclient.htmlの内容が返ってきます。

requestのコールバックのreqに入っているurlで、出力するデータを変更しないといけません。
参考:
http://uraway.hatenablog.com/entry/2015/11/03/node.js%E3%81%A7web%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E7%AB%8B%E3%81%A6%E3%82%8B%E3%81%BE%E3%81%A7%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B

###追記
例えばあなたが今localhostでアクセスしているとしましょう。

http://localhost/
今あなたはこのURLでアクセスすると、public/client.htmlの内容が見えてますよね?

http://localhost/client.html
このURLだとどうですか?public/client.htmlの内容が見えていますよね?

http://localhost/javascripts/socket.io.js
このURLだとどうですか?本当ならsocket.io.jsの内容が見えるつもりでしょうが、client.htmlの内容が見えていますよね?

今のあなたのコードでは、どんなreqが来ても、必ずfs.readFileで読み込むファイルがpublic/client.htmlなので、同じ内容が返されます。
以下のように、reqのurlに合わせて、fs.readFileで読み込むファイルを切り替えてやらねばなりません。

Javascript

1 2 3var url = req.url; 4if(url == "/") { 5 // http://localhost/でアクセスしたときのため 6 url = "/client.html"; 7} 8 9var filePath = "./public" + url; 10 11fs.readFile(filePath, function (err, data) { 12 if (err) { 13 res.writeHead(500); 14 return res.end('Error loading ' + url); 15 16 } 17 18 var contentType = ""; 19 if(req.url.endsWith(".html")) { 20 contentType = "text/html"; 21 } 22 23 if(req.url.endsWith(".js")) { 24 contentType = "text/javascript"; 25 } 26 27 // 他コンテンツタイプは自分で対応してください。 28 29 res.writeHead(200, { 'Content-Type': contentType + '; charset=UTF-8' }); 30 console.log('サーバー接続'); 31 32 res.end(data); 33 34});

投稿2016/06/20 07:47

編集2016/06/20 08:34
masaya_ohashi

総合スコア9206

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

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

toyopi_kouchan

2016/06/20 08:12

回答ありがとうございます。 reqに入っているURLですが、変更はどれのことでしょうか? 知識が浅くて申し訳ございません。
toyopi_kouchan

2016/06/21 00:13 編集

なるほど、確かに私のコードはpublic/client.htmlしか読み込まないようですね。 URLで出力するデータを変更...参考になりました。 返信が遅れて申し訳ございません。回答ありがとうございます。無事できました。
guest

0

WEBサーバのドキュメントルートが既に"/public/"になっていて、余計なのではと思われますが、いかがでしょう。

html

1<script script type="text/javascript" src="javascripts/jquery-1.10.2.min.js"></script> 2<script script type="text/javascript" src="javascripts/socket.io.js"></script>

投稿2016/06/20 07:31

moonphase

総合スコア6621

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

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

toyopi_kouchan

2016/06/20 07:35

回答ありがとうございます。 それは試してみましたが、同じ結果でした。
moonphase

2016/06/20 07:42

client.htmlからの相対パスになるので、/public/は要らないと思います。 Javascriptを読めない原因はなんでしょうか? 404 Not Foundなのかそれ以外なのか。 Chromeをお使いであれば、デベロッパーツールで詳しく確認できたりしますが、 Webブラウザでclient.htmlを開いたアドレス欄に、 「client.html」を削って「javascripts/jquery-1.10.2.min.js」と入れてEnterを押すとどうなりますか?
toyopi_kouchan

2016/06/20 08:16 編集

jquery-1.10.2.min.jsの内容が出てきます。 Chromeブラウザのコンソールをみたらこのようなエラーが出ていました。 jquery-1.10.2.min.js:1 Uncaught SyntaxError: Unexpected token < socket.io.js:1 Uncaught SyntaxError: Unexpected token < localhost/:13 Uncaught ReferenceError: $ is not defined(anonymous function) @ localhost/:13
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問