用野狗開發實時遊戲排行榜

建立wilddog應用

填寫應用名稱和應用ID就能夠建立了。應用ID須要全網惟一

建立成功以後就能夠在控制面板看到應用了.

1.引入SDK

<script  = "https://cdn.wilddog.com//client/current/wilddog.js" ></script>

2.建立引用

ref =  Wilddog("https://<appId>.wilddogio.com/")
//將<appId>替換成申請的應用ID
ref =  Wilddog("https://fullstack-top-demo.wilddogio.com/")

由於wilddog是以key-value的形式存儲數據，建立引用會定位到根節點。若要定位到子節點，只需在url後追加路徑便可，例如：

user_ref =  Wilddong('https://fullstack-top-demo.wilddogio.com/user/')

野狗也提供了child()方法來獲取子節點的引用。

ref =  Wilddog("https://fullstack-top-demo.wilddogio.com/")
user_ref = ref.child('user')

這兩種方法是同樣的效果

1.寫入數據。
建立 Wilddog 引用以後，就能夠經過set() 往節點中寫入任何合法的JSON數據

user_ref.set({
    name : 'lixiaohao',
    age  : ,
    blogurl : 'ghost.fullstack.top'
})

2.讀取數據
讀取數據是經過綁定回調函數來實現的。假設咱們按照上面的代碼寫入了數據，那麼就可使用on()函數來讀取user對象的值。

user_ref.on('value', function(datasnapshot) {
  console.dir(datasnapshot.val());   // 結果會在 console 中打印出剛剛set的對象
})

回調函數的參數是一個DataSnapshot對象類型，調用它的val()函數獲得數據對象。上邊這個例子中，value這個事件會在初次讀取到數據的時候被觸發一次，此後每當數據發生改變，都會被觸發。

若要只讀取一次，不在以後每次數據發生變化的時候觸發回掉函數，可使用once()函數替代on()函數。

3.用戶認證

**絕大多數應用都須要一套終端用戶帳號體系。對終端用戶進行惟一標識以後，才能對用戶進行個性化的用戶體驗，控制用戶對數據的訪問權限。提供終端用戶惟一標識的過程被稱爲終端用戶認證。WildDog爲開發者提供了多種用戶認證方式。
野狗提供了多種用戶登陸方式，具體可查看 官方文檔**

這裏要注意的一點就是，第三方登陸必定要設置OAuth跳轉域名白名單

當時由於這個沒有配置這個白名單折騰了一下午。不過在本地環境下用localhost 或127.0.0.1 訪問的話不會有影響。

好了，瞭解這3點就能夠開始作排行榜了。

遊戲排行榜

咱們能夠去網上找一個html5的小遊戲，稍微研究下代碼應該就能夠找到遊戲成績的結算方法，在遊戲結束時給咱們的refset()一個值就能夠啦。

這裏以我寫過的一個demo爲例

//建立根節點的引用
 wilddog =  Wilddog(https://<appId>.wilddogio.com/");
 var wilddogAuthData; //野狗用戶登陸信息
//監聽登陸狀態變化
wilddog.onAuth(function() {
    //若是已登陸則將用戶數據存儲到全局變量方便調用
    wilddogAuthData = data;
     (wilddogAuthData) {
        console.log(wilddogAuthData);
    }  {
        //未登陸則調用野狗登陸方法，這裏只是簡單的使用微博受權登陸，其餘登陸方法查看官方文檔。
        // 彈出新浪微博OAuth認證
        wilddog.authWithOAuthRedirect("weibo", authHandler);
    }
});
// 建立一個回調來處理終端用戶認證的結果，微博登陸成功後的回調方法
function authHandler(error, data) {
     (error) {
        console.log("Login Failed!", error);
    }  {
        console.log("Authenticated successfully with payload:", data);
    }
}

受權登陸成功後可得到用戶信息

獲取遊戲結果

在遊戲結束方法里加入

//打破本身的記錄才上傳，通常html5遊戲會將最佳成績存在localstorage中，根據實際狀況作修改便可
(score > bestScore){
    (!wilddogAuthData){alert('你沒有使用微博帳號登錄,沒法計入成績!');return false;}
     ts =  Date().getTime();
    wilddogRef.child('rank').child(wilddogAuthData.auth.uid).({
        //這裏的字段根據本身需求定義
        uid:    wilddogAuthData.auth.uid
        //爲了儘可能避免僞造數據這裏將score作加密處理並放在僞造的token字段裏混淆視聽，取出成績時再解密比較token與score字段便可,並不能從根本上防止做弊。
        token:  sjcl.encrypt(ts+,score+),
        score:  score,
        ts:     ts,
        rank:   t++(3000000000000-ts),
        UA:     navigator.userAgent
    });
}

rank字段用於orderByChild()方法，該方法對字符串按照字典順序來排的。這裏的t是在score前面補0到6位數方便排序 ，score=100 則 t=000100，這樣組合以後能夠肯定高分在前，分數相同則先達到該分數的用戶在前
獲取排行榜

//獲取數據，並按照對象中的 rank 字段排序返回結果集中的後10位
wilddogRef.child(k').orderByChild(k').limitToLast().on("value", function(users) {
     html = [];
    users.forEach(function (user) {
         item = user.();
        //比較score與加密的'score'，不匹配則忽略
        (sjcl.decrypt(item.ts+,item.token) == item.score) {
        // .orderByChild()方法是升序，因此這裏使用的是'unshift'方法
            html.unshift('<li><span class="ranknum"></span><i class="ran-1"></i>[站外圖片上傳中……()]<div class="info"><span class="name">'+ item.name +'</span></div><span class="score">'+ item.score +' 分</span></li>');
        }
    });
    document.getElementById('rank-list').innerHTML = html.join('');
});

完成了!

有興趣的同窗能夠玩一下，徹底實時的哦。簡單demo沒有作過多優化，打開頁面後會直接彈出微博受權頁。 遊戲傳送門
這是一篇轉載的文章。原做者是:李昊。點擊進入 李昊我的博客。

想研究源碼以後移植到本身的應用上的小夥伴,plz 戳這裏,李昊哥哥的github,歡迎star。