【Node.js + Express + Socket.io】ファイルが見つからないエラー（/socket.io/socket.io.js 404）の対処

# Node.js + ExpressにSocket.ioを導入したい！
なかなかうまく導入できない！

## 背景
expressアプリにを導入する段階でつまづいた。
``/socket.io/socket.io.js 404``エラーの解決方法を見つけるのに2時間も費やしたので備忘録も兼ねて記事を書く。

## 環境
windows10
node.js 8.11.3
express 4.16.0


## 準備
とりあえず、[公式のドキュメント](https://socket.io/)を参考にしつつ、Expressアプリにsocket.ioを導入してみる。

### Expressアプリ``sampleapp``を作成
htmlファイルを``ejs``形式で記述したくない人は``express sampleapp``とすればよい。
``-e``をつけないと``jade``形式になる。

```
$express -e sampleapp
$cd sampleapp
$npm install
```

### ``socket.io``をインストール

```
$npm install socket.io
```

### クライアント側の記述
socketを使いたいページ``index.ejs``に処理を記述。

```html:index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />

    <!-- 以下追加 -->
    <script src="/socket.io/socket.io.js"></script>
    <!-- 以上追加 -->

  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <!-- 以下追加 -->
    <script>
      var socket = io();
    </script>
    <!-- 以上追加 -->

  </body>
</html>
```

## サーバ側の記述（間違い）
``index.js``にサーバ側の処理を記述すればいけるのでは？、と考えてsocketの処理を記述。

```js:index.js
var express = require('express');
var router = express.Router();

/* 以下追加 */
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
/* 以上追加 */

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

/* 以下追加 */
io.on('connection', function(socket) {
  console.log('connected!!!');
});
/* 以上追加 */

module.exports = router;
```

## エラー
とりあえず、完成した（完成してない）ので動かしてみたところ…

```
GET / 200 47.606 ms - 417
GET /socket.io/socket.io.js 404 7.297 ms - 1103
GET /stylesheets/style.css 200 12.068 ms - 111
GET /favicon.ico 404 2.501 ms - 1103
```
怒られた。
とくに、``/socket.io/socket.io.js 404``が問題。

## 解決策

``index.js``ファイルではなく、``www``ファイルにサーバ側のsocket処理を記述すべきだったらしい。
記述位置は、下記コードの中段。コメントアウトで``//追加``としてある部分。

```js:www
#!/usr/bin/env node
/**
 * Module dependencies.
 */
var app = require('../app');
var debug = require('debug')('p-socket:server');
var http = require('http');
/**
 * Get port from environment and store in Express.
 */
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
 * Create HTTP server.
 */
var server = http.createServer(app);


//追加
var io = require('socket.io')(server);
io.on('connection', function(socket){
  console.log('connected!!!');
});


/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
 * Normalize a port into a number, string, or false.
 */
function normalizePort(val) {
  var port = parseInt(val, 10);
  if (isNaN(port)) {
    // named pipe
    return val;
  }
  if (port >= 0) {
    // port number
    return port;
  }
  return false;
}
/**
 * Event listener for HTTP server "error" event.
 */
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }
  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;
  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}
/**
 * Event listener for HTTP server "listening" event.
 */
function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}
```

## 結果
動いた！！

```
GET / 304 35.737 ms - -
GET /stylesheets/style.css 304 9.564 ms - -
connected!!!
```

他の解決策や指摘などありそうなので、何かあればコメントにお願いします…！

## 参考
* https://socket.io/
* https://www.pospome.work/entry/20150314/1426357192