2015年1月23日金曜日

PubNub使ってみた

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」をクリックします
top.png

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

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

今回は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 HereYour Subscribe Key Hereにキー情報を入力します
キー情報はダッシュボードで確認することができます
ダッシュボードにアクセスしPublish KeySubscribe Keyをそれぞれ入力します
key_info.png

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

とりあえずこの状態でHTMLファイルをブラウザで開いてFirebug等のコンソール機能を使ってみると通信している状況がわかります
GETの200が返ってきていれば設定したキーの情報が合っていることがわかります
firebug_console.png
ブラウザを開いていると定期的に通信を続けるので確認できたら閉じてしまってください

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側のブラウザでコンソールを開くとメッセージが送信されていることがわかると思います
message.png
上記のようになれば、ちゃんと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を提供しているのでいろんなクライアントで使えそうです

0 件のコメント:

コメントを投稿