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

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

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

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

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

Q&A

解決済

1回答

5172閲覧

Uncaught SyntaxError: Unexpected token < client.js

退会済みユーザー

退会済みユーザー

総合スコア0

Node.js

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

Vagrant

Vagrantは、VirtualBox上の仮想マシンを コマンドラインから作成してくれるソフトウェアです。 ビルド環境など容易に構築が可能です。

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

0グッド

1クリップ

投稿2017/09/03 20:39

###外部のjsファイルを読み込みたい
Node.jsを使ってリアルタイム送信をするためにwebサーバーを作っています。
そこで、クライアント側のhtmlファイルに処理(socket.ioのemitなど)を書いていて、中身が長くなるかもしれないので外部ファイルにその処理を書こうと思い、<script src = "./js/client.js"></script>で外部ファイルであるclient.jsを読み込もうとしました。
そこで、以下のエラーメッセージが出ました。

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

Uncaught SyntaxError: Unexpected token < client.js

ブラウザーでこのclient.jsを見ると
###client.js(ブラウザーからみたclient.js)

html

1<!DOCTYPE html> 2<html lang = "ja"> 3<head> 4 <title>socket test</title> 5</head> 6<body> 7<h1>Hello world!!!</h1> 8<script type="text/javascript" src = "./js/client.js"></script> 9</body> 10</html>

おそらく、このclient.jsの1行目の'<'がUnexptected tokenのことではないかと思っています。

実際のファイルは以下です。
###server.js

javascript

1var http = require('http'), 2 server = http.createServer(handler), 3 fs = require('fs'); 4 5var port = 1337, 6 host = '192.168.33.10'; 7 8server.listen(port, host); 9console.log('server listening ...'); 10 11function handler(req, res){ 12 fs.readFile(__dirname + '/public/index.html', function(err, data){ 13 if(err){ 14 //HTTP 500: internal server error 15 res.writeHead(500, {'Content-Type': 'text/plain'}); 16 res.write('HTTP 500: INTERNAL SERVER ERROR'); 17 return res.end(); 18 } 19 20 //HTTP 200: successfully connected 21 res.writeHead(200, {'Content-Type': 'text/html'}); 22 res.write(data); 23 res.end(); 24 }); 25}

###index.html

html

1<!DOCTYPE html> 2<html lang = "ja"> 3<head> 4 <title>socket test</title> 5</head> 6<body> 7<h1>Hello world!!!</h1> 8<script type="text/javascript" src = "./js/client.js"></script> 9</body> 10</html>

###client.js

javascript

1$(function(){ 2 alert(1); 3});

###試したこと
この種のエラーが出るのは<scritp src=""></script>のsrcの部分のパスが間違っているのが多いらしいのですが、ファイルのパスを確認したのですが間違いを発見できませんでした。あと、絶対パスで(IPアドレス: 192.168.33.10, ポート番号: 1337)以下のようなものを試したのですがエラーは治りませんでした。
###試した絶対パス
-http://192.168.33.10:1337/home/vagrant/socket/public/js/client.js
-http://192.168.33.10:1337/public/js/client.js

構造としては以下のようになっています。
###/socket
-server.js
-public
###/public
-index.html
-js
###/js
-client.js

###補足情報(言語/FW/ツール等のバージョンなど)
環境はvirtual box, vagrantを使っています
バージョンは
virtual box: 5.1.26 r117224
vagrant: 1.9.8
Node.js: v8.4.0

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

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

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

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

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

guest

回答1

0

ベストアンサー

fs.readFileの引数が__dirname + '/public/index.html'となっているので、どんなリクエストに対してもindex.htmlを返す状態となっています。

request.urlの値を見て、出すファイルを切り分ける必要があります。

投稿2017/09/03 22:38

maisumakun

総合スコア145121

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

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

退会済みユーザー

退会済みユーザー

2017/09/04 00:23

ご指摘板出した通り、readFileの第一引数のパスを__dirname + req.urlにして、 拡張子によってMIMEを切り替えることで、ちゃんとファイルが読み込まれるようになりました!! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問