Edited at

【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


準備

とりあえず、公式のドキュメントを参考にしつつ、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!!!

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


参考