個人的に革新的だと感じたSocket.ioの負荷テスト方法。iframeとPhantomJSを使って複数同時アクセス状態を作る


よくある負荷テストは弊社ではJMeterを使ってやることが多いです。
通常のHTTPリクエストならば問題無いと思います。しかしWebSocketを利用する場合は少し面倒な感じがしました。


##Socket.ioの負荷テスト

[@nulltask](http://twitter.com/nulltask)さんにiframeで確認すると良いというアドバイスを受けました。全然思いつきませんでした。

Webサイトへのアクセス負荷とSocket.ioのアクセスを分けるためにサーバーを分けています。

##同時アクセスオンリーなテスト

### Amazon EC2

host: hogehoge-ec2.amazonaws.com
port: 5000

```load.js
console.log('接続数取得テスト');

var fs = require('fs');
var app = require('http').createServer(function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end(fs.readFileSync('load.html'));
  
}).listen(4000);

var io = require('socket.io').listen(app);

io.sockets.on('connection', function(socket) {

  io.sockets.emit('count', socket.client.conn.server.clientsCount);
  console.log('コネクション数',socket.client.conn.server.clientsCount);

  socket.on('disconnect', function(data) {
    console.log('コネクション数',socket.client.conn.server.clientsCount);
    io.sockets.emit('count', socket.client.conn.server.clientsCount);
  });
});
```

### Amazon S3

host: hogehoge.com

```load.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <p>接続数:<span id="count"></span></p>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>

  <script>
      var socket = io.connect('http://hogehoge-ec2.amazonaws.com:5000');
      var $count = $('#count');

      socket.on('count', function(data) {
          $count.text(data);
          console.log(data);
      });
  </script>
</body>
</html>

```

>io.connect({ forceNew: true}) しないとダメかもしれない(?)

## ローカルHTML

iframeの記述数は、100だとhtmlの読み込み自体が怪しかったので50くらいにしました。
(キリのいい数値にしたかったので)

```loadtest-client.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>
	<iframe src="http://hogehoge.com/load.html" frameborder="0"></iframe>	
	<!--
	・
	・省略
	・
	-->
</body>
</html>
```

これでこのローカルhtmlにアクセスするとコネクション数(同時アクセス)が50になります。

これを複数のタブで開いてみました。

↓こんな感じです笑

![](http://i.gyazo.com/d23d4f62f6d0511f6259ea7e5505f02a.png)

実際にサーバー側でコンソールを見てると同時アクセス数が増えて行くのが分かります。
![](http://i.gyazo.com/2b362beaa209bfc259af72c4a6f1e164.gif)


##メッセージ送信をしてみる
![](http://i.gyazo.com/d2c127e2e43b872c345d5eae2a8fbbe1.gif)

##PhantomJSからやるとめちゃ便利だった。
最後になりますが、iframeを使うのはかなり良い方法だと感じたのですが、タブをめちゃ開いていくのはめんどくさいので、PhantomJSを使って複数アクセスを実現してみます。

![](http://i.gyazo.com/37fddc9717f3c8394a6f34dc54b08944.png)

### PhantomJSでローカルHTMLに10回アクセスをエミュレート

```open.js
for(var i = 0; i < 10; i++){
	var page = require('webpage').create();
	page.open('http://localhost/loadtest/loadtest-client.html', function() {
	});
}
```

```
$ phantomjs open.js
```

![](http://i.gyazo.com/407b0abe38d9254abd13ece2e573099c.gif)


いちいちブラウザアクセスしなくて良いので便利ですね。

##最後に
アドバイスしてくださった。@nulltaskさんありがとうございました!