SPIRE.IOのQuick Start #JavaScript

SPIRE.IOというチャットのサービスをクライアントサイドを記述するだけで実現できるというサービスを試してみたのでその内容をまとめておきます。

基本的にはQuick Startの内容になります。

下記のHTMLを用意します。ファイル名をindex.htmlとします。

index.html

<html>
  <head>
    <script type='text/javascript' lang='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' lang='javascript' src='./javascript/spire.io.bundle.min.js'></script>
    <script type='text/javascript' lang='javascript' src='./javascript/application.js'></script>
  </head>
  <body>
  </body>
</html>

必要なライブラリをダウンロードします。

$ curl https://raw.github.com/spire-io/spire.io.js/master/browser/spire.io.bundle.min.js > javascript/spire.io.bundle.min.js

javascript/application.jsを下記の内容にします。

application.js

$(document).ready(function() {
  var Spire = require('./spire.io.js');
  var spire = new Spire();
  spire.start("ACCOUNT_SECRET_GOES_HERE", function (error) {
    if (!error) {
      spire.subscribe(["test"], {min_timestamp:'now'}, function(messages) {
        $(messages).each(function(i,message) {
          $('body').append("<p>" + message.content + "</p>");
        });
      });
      spire.publish("test","Greetings Earthling!");
    }
  });
});

試すためにSPIRE.IOにサインアップが必要です。サインアップしたら[Account]から[API Screts]をコピーします。application.jsの[ACCOUNT_SECRET_GOES_HERE]にペーストとします。

index.htmlをブラウザで表示して、"Greetings Earthling!"という文字が表示されます。これはこの文字列をサーバに送信してその内容を受け取って表示している状態になります。