Node.js + ExpressにSocket.ioを導入したい！
なかなかうまく導入できない！
背景
expressアプリにを導入する段階でつまづいた。
/socket.io/socket.io.js 404エラーの解決方法を見つけるのに2時間も費やしたので備忘録も兼ねて記事を書く。
環境
windows10
node.js 8.11.3
express 4.16.0
準備
とりあえず、公式のドキュメントを参考にしつつ、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に処理を記述。
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の処理を記述。
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処理を記述すべきだったらしい。
記述位置は、下記コードの中段。コメントアウトで//追加としてある部分。
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!!!
他の解決策や指摘などありそうなので、何かあればコメントにお願いします…！