cocos2d-js 中封装HTML5和Native的Http请求

最新推荐文章于 2021-02-21 05:02:39 发布

快快猪搞技术

最新推荐文章于 2021-02-21 05:02:39 发布

阅读量2.2k

点赞数

分类专栏：游戏开发 cocos2dx javascript

本文链接：https://blog.csdn.net/rapig/article/details/36185621

版权

游戏开发同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

cocos2dx

2 篇文章 0 订阅

订阅专栏

cocos2d-js是一个好引擎，目前版本是3.0beta。我们的游戏网络交互基于HTTP。需要一套代码实现HTML5和Native互通，其他大部分问题引擎本身就已经解决了。不过网络这块需要自己做一些处理。

在Native中，我们使用MinXmlHttpRequest,在JS中使用方法如下：

var http = new XMLHttpRequest();
http.setRequestHeader("Accept-Encoding", "gzip,deflate");
http.open(type, url, true);
http.send(data);

// http.timeout = timeout;
http.onreadystatechange = function() {
    var status = http.status;
    SSD.log(status);
    switch (status) {
        case 200:
            SSD.log("200!");
            if(http.responseText == null || http.responseText == 'undefined' || http.responseText.length <= 0) {
                onError(status);
            } else {
                SSD.log("status:" + http.status + ",ret:" + http.responseText);
                if(responseType == "json") {
                    var json = JSON.parse(http.responseText);
                    if(json == null) {
                        onError(status);
                    } else {
                        onSuccess(json);
                    }
                } else if(responseType == "text") {
                    onSuccess(http.responseText);
                }
            }
            break;
        default:
            SSD.log("hq:network error");
            onError(status);
            break;
    }
};

而在HTML5中，我们就使用jquery强大的ajax功能了，具体代码如下：

var reqid = Network.seq();
var obj = {
    type : type.toLowerCase(),
    async : true,
    url : url,
    dataType : "jsonp",
    jsonp : "jcb",
    jsonpCallback : "jcb_" + reqid,
    success : function(result) {
        SSD.log(JSON.stringify(result));
        SSD.log(result.code);
        onSuccess(result);
    },
    error : function() {
        SSD.log("hq:network error");
        onError();
    },
    timeout : timeout
}
if(data != null) {
    obj.data = data;
}
try {
    var retid = $.ajax(obj);

    return retid;
} catch (e) {
    SSD.log("_______");
    return null;
}

整合也很简单，判断是否是native，根据具体情况选用相关的调用接口即可

整合后的代码如下：

/**
 * http请求
 */
var Network = {
    urlGame : function(url) {
        return HH.cfg.URL_API + url + "?sso=" + HH.data.sso.get() + "&src=" + HH.cfg.CHANNEL_ID + "&ts=" + Date.now();
    },
    urlWithTick : function(url) {
        return HH.cfg.URL_API + url + "?ts=" + Date.now();
    },
    _seq : 0,
    seq : function() {
        Network._seq = Network._seq + 1;
        return Network._seq;
    },
    /**
     * HTTP请求
     * @param param {type,url,data,onSuccess,onError}
     */
    http : function(param) {
        var type = param.type || "POST";
        var url = param.url;
        var data = param.data || "";

        data = data + "&ts=" + Date.now();

        SSD.log(cc.sys.isNative);
        SSD.log("url:" + url);
        SSD.log("data:" + data);

        var onSuccess = param.onSuccess;
        var onError = param.onError || Network.onError;
        var responseType = param.responseType || "json";
        var timeout = param.timeout || 10000;

        if(!cc.sys.isNative) {
            var reqid = Network.seq();
            var obj = {
                type : type.toLowerCase(),
                async : true,
                url : url,
                dataType : "jsonp",
                jsonp : "jcb",
                jsonpCallback : "jcb_" + reqid,
                success : function(result) {
                    SSD.log(JSON.stringify(result));
                    SSD.log(result.code);
                    onSuccess(result);
                },
                error : function() {
                    SSD.log("hq:network error");
                    onError();
                },
                timeout : timeout
            }
            if(data != null) {
                obj.data = data;
            }
            try {
                var retid = $.ajax(obj);

                return retid;
            } catch (e) {
                SSD.log("_______");
                return null;
            }
        } else {
            var http = new XMLHttpRequest();
            http.setRequestHeader("Accept-Encoding", "gzip,deflate");
            http.open(type, url, true);
            http.send(data);

            // http.timeout = timeout;
            http.onreadystatechange = function() {
                var status = http.status;
                SSD.log(status);
                switch (status) {
                    case 200:
                        SSD.log("200!");
                        if(http.responseText == null || http.responseText == 'undefined' || http.responseText.length <= 0) {
                            onError(status);
                        } else {
                            SSD.log("status:" + http.status + ",ret:" + http.responseText);
                            if(responseType == "json") {
                                var json = JSON.parse(http.responseText);
                                if(json == null) {
                                    onError(status);
                                } else {
                                    onSuccess(json);
                                }
                            } else if(responseType == "text") {
                                onSuccess(http.responseText);
                            }
                        }
                        break;
                    default:
                        SSD.log("hq:network error");
                        onError(status);
                        break;
                }
            };
            return http;
        }
    },
    onError : function(status) {
    }
};

这样整合后，使用网络就很容易了，看下面的使用例子：

Network.http({
    url : Network.urlGame("api/login.do"),
    data : "",
    onSuccess : function(result) {
        SSD.log("success");
    },
    onError : function() {
        SSD.log("error");
    }
});