pubnub

概要

PubNubとは「メッセージングAs a Service」と呼ばれる分野のサービスでメッセージングするための中央サーバ（ブローカー）をホスティングしてくれるサービスです
よくpub/subやMQTTといったコンテキストで登場するサービスかと思います
今回は簡単なJavaScriptのサンプルが動作するまでの使い方を紹介したいと思います

環境

Mac OS X 10.8.5
Firefox 35.0（JavaScript + HTML）
PubNub 2015/1/22時点

使ってみた

アカウントの作成

利用するにはアカウントの登録が必要です
サイトにアクセスして「GET STARTED」をクリックします

必要な情報（ユーザ名、パスワード、会社名、電話番号、メールアドレス）が結構多いですが必須なので入力して「CREATE FREE ACCOUNT」をクリックします

アカウントが作成できるとダッシュボード的なものに遷移します

今回はQuick Start Guideを実施してみたいと思います

Get Started

サンプルコードはJavaScript+HTMLで書いて動作確認はブラウザ（Firefox）を使います

PubNubクライアント(SDK)のインストール

インストールと言っても公開されているJavaScriptをHTMLから読み込むだけです
以下、インストールしている部分のサンプルのコードです

test_pubnub.html

<html>
<head>
<title>test pubnub</title>
</head>
<body>
<h3>Welcome PubNub Test</h3>
<!-- Include the PubNub Library -->
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>

<!-- Instantiate PubNub -->
<script type="text/javascript">
var PUBNUB_demo = PUBNUB.init({
  publish_key: 'Your Publish Key Here',
  subscribe_key: 'Your Subscribe Key Here'
});
</script>
</body>
</html>

Your Publish Key HereとYour Subscribe Key Hereにキー情報を入力します
キー情報はダッシュボードで確認することができます
ダッシュボードにアクセスしPublish KeyとSubscribe Keyをそれぞれ入力します

今回はpublisherとsubscriberの2つのコードを作成します
2つのコードはこれを元に作成していきたいと思います

とりあえずこの状態でHTMLファイルをブラウザで開いてFirebug等のコンソール機能を使ってみると通信している状況がわかります
GETの200が返ってきていれば設定したキーの情報が合っていることがわかります

ブラウザを開いていると定期的に通信を続けるので確認できたら閉じてしまってください

Subscriberの作成

Subscriberを作成します
Subscriberはメッセージを受信する側のことです

先ほどのインストール時に作成したHTMLファイルをベースにSubscribeするためのコードを追記します
追記した全体のコードは以下の通りです

test_pubnub_sub.html

<html>
<head>
<title>test pubnub</title>
</head>
<body>
<h3>Welcome PubNub Test</h3>
<!-- Include the PubNub Library -->
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>

<!-- Instantiate PubNub -->
<script type="text/javascript">
var PUBNUB_demo = PUBNUB.init({
  publish_key: 'Your Publish Key Here',
  subscribe_key: 'Your Subscribe Key Here'
});

//Subscribe to the demo_tutorial channel
PUBNUB_demo.subscribe({
  channel: 'demo_tutorial',
  message: function(m){console.log(m)}
});
</script>
</body>
</html>

こいつを使ってメッセージを受信します

Publiserの作成

Publisherを作成します
Publisherはメッセージを送信する側のことです

こちらもベースのコードに追記するだけです
全体のコードは以下です

test_pubnub_pub.html

<html>
<head>
<title>test pubnub</title>
</head>
<body>
<h3>Welcome PubNub Test</h3>
<!-- Include the PubNub Library -->
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>

<!-- Instantiate PubNub -->
<script type="text/javascript">
var PUBNUB_demo = PUBNUB.init({
  publish_key: 'Your Publish Key Here',
  subscribe_key: 'Your Subscribe Key Here'
});

// Publish a simple message to the demo_tutorial channel
PUBNUB_demo.publish({
  channel: 'demo_tutorial',
  message: {"color":"blue"}
});
</script>
</body>
</html>

Subscriberとほぼ変わりませんがPublisherもこれでOKです

動かしてみる

作成したSubscriberとPublisherを動かしてみます

まずはSubscriberを動かします
test_pubnub_sub.htmlをブラウザで開きましょう
特に何も起きませんがまずはこれでOKです
一応firebugのコンソールで通信状況を確認して「200 OK」になっていることを確認してください

次にtest_pubnub_pub.htmlを動かします
もう1つブラウザを開くかタブを作成してファイルを開いてください
ファイルを開いた瞬間メッセージが送信されます
送信されるメッセージは「{color=”blue”}」という簡単なJSON情報です

メッセージが送信された瞬間Subscriber側のブラウザでコンソールを開くとメッセージが送信されていることがわかると思います

上記のようになれば、ちゃんとSubscriber側でメッセージを受信できていることになります

いちいちコンソールをみるのが面倒という場合にはsubscribeメソッドを以下のように書き換えればHTMLとしてブラウザ上に表示されます

//Subscribe to the demo_tutorial channel
PUBNUB_demo.subscribe({
  channel: 'demo_tutorial',
  message: function(m){
    console.log(m)
    target = document.getElementById("output");                                                                  
    target.innerHTML = m.color;
  }
});

今回の紹介は以上です

送信しているメッセージのサイズが小さいということもありましたが、あまりネットワークのレイテンシーを感じることはありませんでした
今回、紹介したのは簡単なpub/subメッセージングのサンプルでしたが、他にも

溜めたメッセージを解析するサービスや
iOSやAndroidのメッセージをプッシュ送信できるサービス

といった様々なバックエンドサービスを提供してみたいなので興味があれば触ってみるといいと思います
SDKもJavaScript以外にたくさんのSDKを提供しているのでいろんなクライアントで使えそうです

kakakikikekeのブログ

2015年1月23日金曜日

PubNub使ってみた

概要

環境