Node.jsでexpressとsocket.IO、ejsを使って
簡単な双方向通信をやろうとしたら
いきなりハマってしまったのでメモ。
■目標
サーバーを起動してクライアントが接続成功したら、
サーバー側に「connected」、クライアント側にアラート「hoge」が表示される。
その後サーバーからクライアントにメッセージ「ムッシュムラムラ」が送られ
クライアントにDOMで表示される。
■環境
node.jsはnvmでv0.10.18をインストール。
サーバーはファイアウォール無効化してるVirtual BoxのCentOS5.8で、
ブリッジ接続IP192.168.10.10、nodeの待ち受けポート8080。
クライアントは同じローカル内。
■手順
まずはnode.jsとexpressをインストールし、
express -s -e sockettest
でアプリケーション作成。
んでapp.jsを以下のように作成。
/**
* Module dependencies.
*/
var express = require(‘express’);
var routes = require(‘./routes’);
var user = require(‘./routes/user’);
var http = require(‘http’);
var path = require(‘path’);
var app = express();
// all environments
app.set(‘port’, process.env.PORT || 8080);
app.set(‘views’, __dirname + ‘/views’);
app.set(‘view engine’, ‘ejs’);
app.use(express.favicon());
app.use(express.logger(‘dev’));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser(‘your secret here’));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, ‘public’)));
// development only
if (‘development’ == app.get(‘env’)) {
app.use(express.errorHandler());
}
app.get(‘/’, routes.index);
app.get(‘/users’, user.list);
server = http.createServer(app);
server.listen(app.get(‘port’), function(){
console.log(‘Express server listening on port ‘ + app.get(‘port’));
});
var socketIO = require(‘socket.io’);
var io = socketIO.listen(server);
io.sockets.on(‘connection’, function(socket){
console.log(‘connected’);
io.sockets.emit(‘message’, {value: ‘ムッシュムラムラ’});
socket.on(‘disconnect’, function(){
console.log(‘disconnect’);
});
});
次にviews/index.ejsを次のように。
<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel=’stylesheet’ href=’/stylesheets/style.css’ />
<script src=”/socket.io/socket.io.js”></script>
<script type=”text/javascript”>
var socket = io.connect(‘http://192.168.10.10:8080’);
socket.on(‘connect’, function(msg) {
alert(‘hoge’);
});
socket.on(‘message’, function(msg) {
document.getElementById(“receiveMsg”).innerHTML = msg.value;
});
</script>
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
<div id=”receiveMsg”></div>
</body>
</html>
■結果
サーバー側に「connected」は表示されるがクライアントが反映しない。
ブラウザ変更しても同じ。ただしサーバー側でCtrl+cでプロセス終了させると
その瞬間クライアント側にhogeアラートだのが表示される。なにこれ（・ω・`
サーバー側のログはこんな感じ。
# node-dev app.js
info – socket.io started
Express server listening on port 8080
[INFO] 14:14:33 Restarting
info – socket.io started
Express server listening on port 8080
GET / 304 24ms
GET /stylesheets/style.css 304 8ms
debug – served static content /socket.io.js
debug – client authorized
info – handshake authorized vTwZuz_J7KYBlOx6ikmU
debug – setting request GET /socket.io/1/websocket/vTwZuz_J7KYBlOx6ikmU
debug – set heartbeat interval for client vTwZuz_J7KYBlOx6ikmU
debug – client authorized for
debug – websocket writing 1::
connected
debug – websocket writing 5:::{“name”:”message”,”args”:[{“value”:”ムッシュムラムラ”}]}
debug – setting request GET /socket.io/1/xhr-polling/vTwZuz_J7KYBlOx6ikmU?t=1380086059232
debug – setting poll timeout
debug – discarding transport
debug – cleared heartbeat interval for client vTwZuz_J7KYBlOx6ikmU
debug – setting request GET /socket.io/1/jsonp-polling/vTwZuz_J7KYBlOx6ikmU?t=1380086069233&i=0
debug – setting poll timeout
debug – discarding transport
debug – clearing poll timeout
debug – clearing poll timeout
debug – jsonppolling writing io.j[0](“8::”);
debug – set close timeout for client vTwZuz_J7KYBlOx6ikmU
debug – jsonppolling closed due to exceeded duration
debug – setting request GET /socket.io/1/jsonp-polling/vTwZuz_J7KYBlOx6ikmU?t=1380086089242&i=0
debug – setting poll timeout
debug – discarding transport
debug – cleared close timeout for client vTwZuz_J7KYBlOx6ikmU
debug – clearing poll timeout
debug – jsonppolling writing io.j[0](“8::”);
debug – set close timeout for client vTwZuz_J7KYBlOx6ikmU
debug – jsonppolling closed due to exceeded duration
debug – setting request GET /socket.io/1/jsonp-polling/vTwZuz_J7KYBlOx6ikmU?t=1380086109278&i=0
debug – setting poll timeout
以下同じような内容のdebugが繰り返し延々と続く
■対応
サーバー側はクライアントの接続を認識している模様。
つーことはemitがうまくいってないていうことか。
んで調べてみたら以下の記事発見。
Connection Failed from Client to Server in socket.io
この一番下に書いてある、
io.set(‘transports’,[‘xhr-polling’]);
を追加設定したらhogeアラートとムッシュムラムラが表示された。
なんでかは後で調べることにする。なんか疲れたお（´ω`）
松島 浩道
ソフトバンククリエイティブ
売り上げランキング: 79,933
