HTML5のWebsocketを使って同時接続数をサーバから送信する

HTML5のWebsocketを使って同時接続数をサーバから送信する

Posted at January 11,2012 2:22 AM
Tag:[HTML5, WebSocket]

HTML5のWebsocket(Node.js+Socket.IO)を使って、現在の同時接続数をサーバから送信するサンプルを作ってみました。

環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。

1.サンプル動画

2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、そのページの同時接続数を各ブラウザに表示します。接続数の増減によって、ページに接続しているコネクションすべてに、サーバから情報を送信します。操作をしていないブラウザにも即時に接続数が反映されます。

非常にシンプルなものですが動いたときはちょっと感動しました。

2.サンプルコード

Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。

色々ネットを探しましたが(探しきれてないかもしれません)、Node.js+Socket.IOで動作するコードがみつからなかったので自作しました。Node.jsやSocket.IOに精通されている方にとっては当たり前のような実装かと思います。冗長な部分等ありましたらご指摘ください。

app.js(サーバ側のソース)

var app = require('express').createServer()
  , io = require('socket.io').listen(app);
 
// カウンタ初期化
var count = 0;
app.listen(8124);
 
app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});
 
io.sockets.on('connection', function (socket) {
 
    // 接続時にカウンタのインクリメント
    count++;
 
    // ブロードキャストで送信
    io.sockets.emit('user connected',count);
 
    // 切断
    socket.on('disconnect', function () {
 
        // カウンタのデクリメント
        count--;
 
        // ブロードキャストで送信
        io.sockets.emit('user disconnected',count);
    });
});

index.html(クライアント側のソース)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
jQuery(function(){
  var socket = io.connect('http://localhost');
 
  // 接続時の動作
  socket.on('user connected', function (data) {
      jQuery('span').html(data);
  });
 
  // 切断時の動作
  socket.on('user disconnected', function (data) {
      jQuery('span').html(data);
  });
});
</script>
<div>このページにアクセスしているのは<span></span>人です。</div>

サンプルコードの配置や起動方法については、Windows限定ですが「Windows+Node.js+Socket.IO」を参照してください。

また、このコードを実行する前に、上記記事の最後に掲載している「npm install socket.io express」を実行してください。

3.クライアントへの送信方法

サーバからブロードキャストで送信するには次のように記述するようです。赤色はイベント名で、任意の文字列を記述します。

io.sockets.emit('user connected', count);

受け取るクライアントでは、サーバ側のemit()の第1引数(赤色のイベント名)を必ず指定します。ここが一致していないと受信できません。第2引数のデータは引数として扱えます。

socket.on('user connected', function (data) {
    // ...
});

サンプルコードはブロードキャストで行ってますが、次のように記述すれば送信先を変更できるようです。

// 自分以外の全員に送る
socket.broadcast.emit('user connected',count);
// 自分だけに送る
socket.emit('user connected', count);

4.参考サイト

参考サイトは下記です。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)