Firebase とは

リアルタイム通信ができたりするものらしいです。
この文章を書いてる段階では、まだ使っていません。
https://www.firebase.com/

まずログイン

サインアップしてない人はサインアップ

ログインしたら、Dashboardが自動で表示されました。

APP を追加する

追加こんな感じになります

簡易チャットを作る

http://lite.runstant.com/
runstant 等のブラウザ上でJSを編集してすぐに実行できるサービスを使います。
今回はrunstantを使用します。

完成形はこんな感じです。

HTMLコード

<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
でFirebaseのライブラリを読み込むだけで準備完了です。


<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>${title}</title>
    <meta name="description" content="${description}" />

    <style>${style}</style>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script>${script}</script>
  </head>
  <body>
    name:<input type="text" name="name" id="name" value="" />
    message:<input type="text" name="message" id="message" value="" />
    <button type="button" id="send">send</button>
    <div id="log"></div>
  </body>
</html>

js のコード



window.onload = function() {
  var fb = new Firebase("https://<自分で追加したAPPのURL部分>.firebaseio.com/");

  var chatStore = fb.child('chat');

  chatStore.on('child_added', function(dss) {
    addMessage(dss.val());
  });

  var inputName = document.getElementById('name');
  var inputMessage = document.getElementById('message');
  var sendButton= document.getElementById('send');

  function send (){
    chatStore.push({
      name:inputName.value,
      message:inputMessage.value,
    });
  }

  sendButton.onclick = send;

  inputName.onkeydown = function(e){
    if(e.keyCode === 13){
      inputMessage.focus();
    }
  };

  inputMessage.onkeydown = function(e){
    if(e.keyCode === 13){
      send();
    }
  };

  var logArea = document.getElementById('log');
  function addMessage(value){
    var div= document.createElement('div');
    div.textContent = value.name + ': ' + value.message;
    logArea.appendChild(div);
  }
};

コード(全部)

ちょっと解説

var nanika = fb.child('なにか')
これは、JS的に解釈すると
var nanika = {};
という感じです。
JSのオブジェクト的な構造のデータストアがFirebase上に作られています。

nanika.push(value)
これは、pushした時点で適当なkeyが割り振られ、そのkeyに紐付けてvalueが追加されます。
nanika[適当なkey] = value という感じに追加されます。
nanikaの構造は


nanika = {
  適当なkey: value,
}

となり、
valueがオブジェクトなら、さらに深い階層のデータストアが作れます。

nanika.on('child_added', function(datasnapshot){});

onはイベントを追加します。
child_addedイベントはnanikaにデータが追加されたときに発生し、コールバック関数の引数には、 datasnapshot(追加されたデータを持ったオブジェクト)が渡されます。
また、fb.child('nanika')でnanikaに接続した時も、今までに追加されているデータがあれば、追加した順にchild_addedイベントが発生します。

dss = datasnapshot からkeyや追加されたデータを受け取るには以下のようにします。

keyを得る
dss.key()

値を得る
dss.val()

このぐらい覚えれば、とりあえず程度のチャットが作れました!

Firebaseを使ってとりあえずチャットを作ってみる