share facebook facebook twitter menu hatena pocket slack

WebSocketってなんじゃ?(Node編2 Socket.IOでプッシュ通信)

三浦 悟

WRITTEN BY 三浦 悟

前回WebSocketってなんじゃ?(Node編1 node.jsのインストール)で、スタンドアローンのHTTPサーバーを作成し、HTTP通信を行った内容を紹介しました。

今回は、WebSocketを使用した通信を試してみます。
WebSocketとは、ブラウザとサーバーの双方向通信のプロトコル規格で、現在標準化団体が仕様を策定中の技術です。
ChromeやSafariなど、いくつかのモダンブラウザがサポートしており、この技術が一般的に使用されるようになると、これまでのサーバーアプリケーションの作り方が大きく変わる可能性がある注目の技術です。

使用するのは、Socket.IO というnode.jsのモジュールです。
node.jsはモジュールという単位でライブラリを管理しており、npmというモジュール管理ツールで様々なモジュールを簡単に追加削除することができます。
これはrubyのgemにあたるようなものです。
Socket.IOは、node.jsでWebSocketを実装しているだけではなく、モダンブラウザ以外のWebSocketを利用できないブラウザでも、AjaxやFlashなど他の代替手段があるかどうかを自動的に検知し、通信方式を自動で選択するので、ブラウザ対応にあまり注意しなくてもよくなっています。
また、Socket.IOは WebSocketとその代替手段において、クロスドメイン通信を可能にしています。

早速、実際に試してみます。
まずはじめにnpmをインストールします。

$ curl http://npmjs.org/install.sh | sh
$ npm install -g socket.io

socket.ioのインストールでエラーが出る場合がありますが、その場合はtarが古いので、tarを最新にしておきます。

$ cd /usr/local/src
$ wget http://ftp.gnu.org/gnu/tar/tar-1.26.tar.gz
$ tar xzvf tar-1.26.tar.gz
$ cd tar-1.26
$ ./configure
$ make
# make install

socket.ioをインストールします。

$ curl http://npmjs.org/install.sh | sh
$ npm install -g socket.io

以上で実装の準備が整いました。
今回は、メッセージを送信したら見ている全員にメッセージを表示させるという、簡単なチャットの仕組みを作ってみます。

サーバー側

/opt/memorycraft/node/socketsample.js

require.paths.push('/usr/local/lib/node_modules');

var server = require('http').createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('server connected');
});
server.listen(1337);

var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {
  socket.emit('info', { msg: 'welcome' });
  socket.on('msg', function (msg) {
    io.sockets.emit('msg', {msg: msg});
  });
  socket.on('disconnect', function(){
    socket.emit('info', {msg: 'bye'});
  });
});

サーバー側では、任意のポート(今回は1337)を開放したhttpサーバーにsocket.ioを繋げてリスン状態にします。
通信の確立(connection)や切断(disconnect)などのビルトインイベントや、自分のアプリケーションで使用したいオリジナルのイベント(今回はmsgイベント)のイベントハンドラを定義します。
上記のコードでは、接続した際にwelcome、切断したときにbyeをそのユーザーに、あるユーザーからmsgというイベントが送られた場合、全員にmsgというイベントを、それぞれプッシュ送信しています。

クライアント側

/var/html/www/test/node/index.html

nodetest

クライアント側からはサーバー側の1337ポートに接続しますが、サーバー側は実際にファイルを自分で配置せずともSocket.IOが自動でクライアント側のライブラリを/socket.io/socket.io.jsとして配信してくれます。
そのファイルをscriptファイルでロードするようにし、あとは接続部分とサーバーからのイベントのハンドラを定義します。
また、ボタンをクリックしたらテキストをサーバー側に送信するように記述します。

それでは、サーバー側のコードを実行してみます。

$ node /opt/memorycraft/node/socketsample.js
   info  - socket.io started

ブラウザでhtmlを表示します。

サーバー側からのwelcomeメッセージが表示されていることがわかります。
また、メッセージを入力して送信すると、

メッセージ欄にサーバーからメッセージが送られているのがわかります。

別のブラウザでも開いておき、そちらからメッセージを送信するともう一方のブラウザにメッセージが表示されることがわかります。

このように、socket.ioを用いることで多くのブラウザで簡単にWebSocketを実現することが可能です。
WebSocketは通信内容が少なく、コネクションやリソースの消費が少ないので、ゲームやソーシャルサイトなどのマルチユーザーアプリや、クライアントのログ集計など、様々な分野での利用が期待できます。

こちらの記事はなかの人(memorycraft)監修のもと掲載しています。
元記事は、こちら

三浦 悟

三浦 悟

高円寺在住のなんじゃ系男子 またの名をmemorycraftといいます。 炭水化物大好き 日々の「なんじゃ?」を記事にしてます。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。