【Cocos2d-Js基礎教學(6)網絡層(弱聯網)的封裝及使用】


到聯網,在游戲中也是非常核心的模塊,在官方Js-test中我們可以找到聯網部分

的NetworkTest文件下有兩個類

SocketIOTest.js(Socket 類)

WebSocketTest.js(WebSocket 類)

以上都是強聯網類型的使用方法,官方已經封裝的非常好用了,大家可以細讀研究;

那么做一個聯網交互游戲,也是並不復雜的;

那么下面我們來重點說下一弱聯網的使用;

在Js-test中的弱聯網的例子是:

XHRTest.js

這個類中包含了對弱聯網的使用的基本方法,還包含了一個Buffer處理的方法,那么我們就對這個類開始進行封裝

src目錄下新建一個NetWork文件夾;

再新建一個HttpHelper.js(弱聯網 類)

HttpHelper.js:

/**
 * Created by yangshengjiepro on 15/4/23.
 */

function  Http(){
    var _succCallback = function(){};
    var _errCallback = function(){};

}
Http.prototype.getJSON = function(url,data,callBack,errorCallBack ){
    if(typeof (callBack) == "function"){
        this._succCallback = callBack;
    }else{
        this._succCallback = function(){}
    }
    if(typeof (errorCallBack) == "function"){
        this. _errorCallBack = errorCallBack;
    }
    var xmlHttp = new XMLHttpRequest();

    var params = "";
    if(typeof(data)=="object"){
        for(key in data){
            params+=(key+"="+data[key]+"&");
        }
    }else{
        params = data;
    }

    xmlHttp.open("POST",url);
    xmlHttp.send(params);

    var me=this;
    //===================  ajax回調
    xmlHttp.onreadystatechange = function(){

        cc.log(url+" "+ JSON.stringify(params) +xmlHttp.responseText);
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                MLog.l("data :",xmlHttp.responseText);
                var strData = "";
                if(xmlHttp.responseText.length>0){ //當內容為空時會有"[]"
                    strData=xmlHttp.responseText;
                    me._succCallback(strData);

                }else{
                    MLog.l("什么都沒有,請檢查網絡");
                    return;
                }
            }
            else{
                //網絡錯誤處理
                if(me._errorCallBack) {
                    JSON.stringify(me._errorCallBack);
                    me._errorCallBack();
                }
            }
        }else{
            //網絡錯誤處理
            if(me._errorCallBack) {
                me._errorCallBack();
            }
        }
    }
}
View Code
Http.prototype.getJSON = function(url,data,callBack,errorCallBack )

定義了一個主要的方法Http.prototype.getJSON。

里面需要傳入url地址,data數據,成功回調,錯誤回調;

在方法中,還申明了var xmlHttp = new XMLHttpRequest();

xmlHttp來處理網絡的發送,和回調;

xmlHttp.open("POST",url);
xmlHttp.send(params);

 我們選擇Post方式來進行網絡的數據提交;
最后通過 xmlHttp.onreadystatechange來進行數據回調
 
     if(typeof (callBack) == "function"){
        this._succCallback = callBack;
    }else{
        this._succCallback = function(){}
    }
    if(typeof (errorCallBack) == "function"){
        this. _errorCallBack = errorCallBack;
    }

定義callBack和errorCallBack來進行消息訪問的成功和失敗的回調執行方法!通知我們
失敗或成功后,繼續進行什么操作?

那么網絡層的基本簡單封裝(組合,其實在Js中大部分都是組合)就完成了,我們就可以利用這個方法進行網絡訪問了,但是我們還得再把這個
方法,再精簡一下,再拓展一下,方便我們以后更方便的使用,我們再新建一個 NetManager.js這個類
 
NetManager.js:
//服務器接口地址
var serverAddr = "http://xxx/xxx/xxx";//正式線上

//具體方法實現方法
var NetManager = {

    /**
     * 通用獲取數據方法getMessage
     * @param successCallBack 成功后回調函數
     * @param errorCallBack  失敗后回調函數(默認不填)
     */
    getMessage: function(data,successCallBack) {
        var http = new Http();
        var sendData = data;
        http.getJSON(serverAddr, sendData, successCallBack, null);
    }

};


我們定義一個NetManager.getMessage的通用方法來獲取我們的網絡請求訪問!參數主要填2個,

一個data,post需要傳入的數據,和成功后回調方法!

那么下面我們具體來使用調用一下我們這個弱聯網使用類:

我定義了一個獲取服務器時間的方法,需要傳遞一個APIId的Post數據10000的值就可以拿到服務器時間

 //發送Post數據
var senddata = {
APIId:10000
}
//調用網絡連接方法,獲取data
NetManager.getMessage(senddata,function(data){
Mlog.c("data >>",data);
});

 
直接調用我們的getMessage就可以實現我們的網絡訪問了!!!看一下我們調用的輸出!
 
 

本節知識點源碼:

源碼下載(百度盤)

 自己創建新工程,解壓下載的文件,將所有文件拷貝到你新工程的目錄下全部覆蓋既可以運行!

 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM