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

# Firebase とは

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

## まずログイン

サインアップしてない人はサインアップ
![image](https://qiita-image-store.s3.amazonaws.com/0/60690/d1863f73-7879-28f2-e400-64d29977fcc2.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/60690/fdb8cf01-fcda-3dd0-7184-b62d8a14cd83.png)

## APP を追加する

![image](https://qiita-image-store.s3.amazonaws.com/0/60690/eec9b32f-f185-65a1-6256-b15f385f88b0.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/60690/995c9881-437a-4711-827e-389863368e78.png)


## 簡易チャットを作る

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

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

![firechattest.gif](https://qiita-image-store.s3.amazonaws.com/0/60690/f8da7005-1d22-0868-2ac4-075e9174cd9a.gif)

## HTMLコード

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

```html

<!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 のコード

```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);
  }
};



```

## コード(全部)

http://goo.gl/jErPlz

## ちょっと解説

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

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

```js

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()`

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