Milkcocoaでらくらくリアルタイム通信

Milkcocoa をつかってリアルタイム通信のモックをつくってみました。
灰色の部分をクリックすると「HELLO」と表示されるシンプルなモックですが、ページ観覧車全員が同じ画面を見ることができます。（最大20人まで接続できるらしいです）

なので自分がクリックしていなくても、そのページを見ている他のユーザーがクリックするとページには「HELLO」と表示されます。

DEMO

f:id:kimizuka:20141121080714g:plain
http://jsrun.it/kimmy/fj9W

スマートフォンなど他の端末でも同時に開いて見てみてください。

HTML

<script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
<div class="box">
    <p id="msg" class="txt">HELLO</p>
</div>

JavaScript

(function(win, doc) {
    
    "use strict";
    
    var milkcocoa = new MilkCocoa("https://io-si2pjnh3h.mlkcca.com"),
        ds = milkcocoa.dataStore("message"),
        box = doc.querySelector(".box"),
        txt = doc.querySelector("#msg"),
        timer;
    
    box.addEventListener("click", function() {
        ds.push({});
    }, false);
    
    ds.on("push", function(evt) {
        txt.style.opacity = 1;
        timer = setTimeout(function() {
            txt.style.opacity = 0;
        }, 1000);
    });
})(this, document);