Q&A
「/socket.io/socket.io.js」はファイルとして置いておくわけではなく、Socket.ioサーバが応答して返すものです。
もっとも、Webpackなどで開発する場合は、「socket.io-client」をnpm経由で埋め込んでしまったほうが正解だとは思います。
node.jsを用いてサーバーを立ち上げ、htmlファイルとの双方向通信がしたいです。
例えば、htmlフォームに名前とidを打ち込んだら、サーバーターミナルに
{name:~ ,id:}と出力されるかつhtmlターミナルに「helloあなたのidは~です」。
と出力されるようにしたいです。
server.js内にコードを全て書いたらエラーなく実行出来たのですが、
server.jsとsocket.jsに分けて別ファイルにすると、 node server.jsで実行すると、htmlの方でエラーが起きます
js
1server.js 2 3var app = require("http").createServer(handler), 4fs = require("fs") ; 5var socket = require("./socket.js"); 6 7app.listen(3000) ; 8console.log("server start!"); 9 10function handler(req,res){ 11 12 fs.readFile(__dirname+"/index.html",function(err,data){ 13 if(err){ 14 res.writeHead(500); 15 return res.end("Error"); 16 } 17 18 res.writeHead(200); 19 res.write(data); 20 res.end(); 21 22 }) 23} 24module.exports=app ; 25
js
1socket.js 2 3var app = require("./server.js"); 4var socketIO = require('socket.io'); 5var io = socketIO.listen(app) ; 6 7 8io.sockets.on("connection",function(socket){ 9 10 socket.on("emit_data",function(data){ 11 console.log(data); 12 socket.emit("data_from_server","あなたの名前は「" + data.name + "」です。" + "あなたのpasswordは「" + data.password + "」です。") ; 13 }) ; 14}); 15
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>socket.io</title> 6</head> 7<body> 8 <form name="myid"> 9 <input type="text" name="name"> 10 <input type="number" name="id"> 11 <input type="submit" value="送信"> 12 13 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 14 </script> 15 <script src="/socket.io/socket.io.js"></script> 16 <script> 17 18 function act(){ 19 var socket = io.connect(); 20 $('form[name="myid"]').submit(function(e){ 21 socket.json.emit("emit_data",{ 22 name:$('input[name="name"]').val(), 23 password:$('input[name="id"]').val() 24 }); 25 e.preventDefault();//submitの実行を止める 26 }); 27 socket.on("data_from_server",function(data){ 28 console.log(data); 29 }); 30 }; 31 act() ; 32 33 34 35 </script> 36 37 </body> 38 </html> 39
これからsocket.jsで沢山コードを書いていくので分けて考えたいです。よろしくお願いします
回答2件
0
<script src="/socket.io/socket.io.js"></script>ですが、これはSocket.ioと同じポート番号で取りに行く必要があります。
今回はapp.listen(3000);ということですので、<script src="http://localhost:3000/socket.io/socket.io.js"></script>とするのが適切です。
投稿2018/09/10 07:05
編集2018/09/10 07:05総合スコア145183
0
ベストアンサー
結構根が深い問題ですね。
とりあえず駄目なのは2箇所
- Webサーバの作り方が駄目
- requireの循環参照が起こっている
JavaScript
1function handler(req,res){ 2 fs.readFile(__dirname+"/index.html",function(err,data){ 3 if(err){ 4 res.writeHead(500); 5 return res.end("Error"); 6 } 7 res.writeHead(200); 8 res.write(data); 9 res.end(); 10 }) 11}
これではアクセスが来たらindex.htmlを常に返せというWebサーバです。
Chrome等のブラウザでindex.htmlを受け取り、HTMLを解析し、
<script src="/socket.io/socket.io.js"></script>はなんだろう？とリクエストを送った後に帰ってくるのはindex.htmlでしょう。
これでは何のためのWebサーバかわかりません。
WebサーバソフトのApacheがファイルを設置するだけで勝手に配信してくれるのは、
ディレクトリとパスを紐付けるという思想を実現する為に開発されたソフトウェアだからです。
Apache等を利用せずにNode.jsでWebサーバを実装するなら自分でその辺を実装しなければいけません。
Node.jsデフォルトのhttp機能は非常に低機能なので、
Express.jsの静的ファイル配信機能を利用したほうが良いでしょう。
http://expressjs.com/ja/starter/static-files.html
server.jsとsocket.jsを見ましたが、
両者がrequire('xxx.js')という風に呼び合っています。
これは循環参照なので動きません。
一度2つとも関数で包んでしまって、
必要なものは全て関数の引数として注入する設計に作り変えて下さい。
なのでserver.jsとsocket.jsの他に、requireして使うだけのmain.jsみたいなファイルを新しく作って、
それ越しに実行する流れになるはずです。
投稿2018/09/10 07:36
総合スコア21158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/10 07:12
2018/09/10 07:15
2018/09/10 07:19
2018/09/10 07:22 編集
2018/09/10 07:28