node.js socket.io

Question

https://socket.io/get-started/chat/

このサイトに従ってローカルでソケット通信できたんですけど、うまく理解ができないです

まずindex.htmlで

<script src="/socket.io/socket.io.js"></script>

これでsocket.io.jsを呼べるのがよくわからないです
socket.ioなんてディレクトリないのに

あとindex.htmlでindex.jsを呼んでないのにindex.htmlとindex.jsが関係できる意味もよくわからないです

index.jsはソケットサーバー？になってて
"node index.js"で
ターミナルから起動してるのでしょうか

そうすることで

<script src="/socket.io/socket.io.js"></script>

ができるんでしょうか
何がなんだか分からないです

Answer 1

まずindex.htmlで

<script src="/socket.io/socket.io.js"></script>

これでsocket.io.jsを呼べるのがよくわからないです

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

３行目でhttpサーバーをsocket.ioでラップしています。これにより、クライアント側から/socket.io/socket.io.jsというリソースに対してリクエストがあった場合、socket.ioがそのリクエストを横取りしてクライアント用socket.ioライブラリを自動で返してくれる仕組みです。

あとindex.htmlでindex.jsを呼んでないのにindex.htmlとindex.jsが関係できる意味もよくわからないです

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

index.htmlとindex.jsを関連付けているというよりは、/というルートパスとindex.htmlをindex.js内で関連づけているかたちになります。

app.get('/contact', function(req, res){
  res.sendFile(__dirname + '/contact.html');
});

contact.htmlというファイルが別に存在している場合、このようにindex.jsに記述しておけば、ユーザーが/contact/にアクセスした際に、contact.htmlがクライアント側に送られてくるというかたちになります。

Comments

[退会済みユーザー]

ありがとうございます
なるほどです
ただ、index.jsの各関数はなぜ実行できるのでしょうか
よくあるのは、例えばhtml側でjsファイルを呼び出してから
onclick="function"みたいな感じだと思うのですがそういったことが一切されてないので

node index.js

というコマンドで実行してるのでしょうか

[HayatoKamono]

> node index.jsというコマンドで実行してるのでしょうか
はい、そうです。それによってリンク先コード内の以下の部分でサーバーが指定のポート番号でリクエストを待ち受けるようになるので、'/'へのリクエストもindex.jsで引き続き処理されます。

http.listen(3000, function(){
console.log('listening on *:3000');
});

参考
https://nodejs.org/api/http.html#http_server_listen

[退会済みユーザー]

なるほどです
ありがとうございます

今ターミナルを消してからブラウザでhttp://localhost:3000/に繋いだのですが、繋がりませんでした

node index.js

は「index.jsの実行」兼「サーバーの起動」なのでしょうか

[HayatoKamono]

node index.js を再度実行しましたか？

[退会済みユーザー]

はい!
node index.jsを実行すると http://localhost:3000 でindex.htmlが見れました

[HayatoKamono]

では、問題ないですね。
質問を閉じて解決としてください。