一晴圾，開發(fā)環(huán)境及前言

本示例開發(fā)環(huán)境如下：

• macOS High Sierra 版本10.13.4

• nodejs v10.6.0

• Cocos Creator V2.0

• Code V1.25.1

JavaScript最初只能用于網(wǎng)頁的前端開發(fā)穷劈，Node.js推出之后夸浅，JavaScript可以進(jìn)行后端開發(fā)了趁桃，cocos2d-js辽话、Cocos Creator、微信小程序使得JavaScript能夠直接進(jìn)行游戲開發(fā)卫病，Electron可以方便的把JavaScript開發(fā)的應(yīng)用發(fā)布成跨平臺(tái)的桌面應(yīng)用油啤，開源庫(kù)TensorFlow.js更是將JS擴(kuò)展到熱門的機(jī)器學(xué)習(xí)領(lǐng)域。
JavaScript的引用領(lǐng)域原來越廣泛了蟀苛，大有一統(tǒng)江湖之勢(shì)：

• 網(wǎng)頁開發(fā)
• 服務(wù)器開發(fā)
• 手游開發(fā)
• 桌面應(yīng)用
• 機(jī)器學(xué)習(xí)領(lǐng)域

在功能機(jī)時(shí)代益咬，缺少游戲引擎的支持，UI使用硬編碼方式進(jìn)行部署帜平，在產(chǎn)品改變UI幽告、調(diào)整數(shù)值時(shí)都要重新編碼梅鹦，只有打包放到手機(jī)上才能看到產(chǎn)品效果。這些工作都需要程序員來操作冗锁。Cocos Creator是以內(nèi)容創(chuàng)作為核心的游戲開發(fā)工具齐唆，其包含游戲引擎、資源管理冻河、場(chǎng)景編輯箍邮、游戲預(yù)覽和發(fā)布等游戲開發(fā)所需的全套功能，并且將所有的功能和工具鏈都整合于一體芋绸，為美術(shù)和策劃人員提供前所未有的內(nèi)容創(chuàng)作生產(chǎn)和即時(shí)預(yù)覽測(cè)試環(huán)境媒殉。以工作流為核心的開發(fā)理念，讓不同職能的開發(fā)者能夠快速找到最大化自己作用的工作切入點(diǎn)摔敛，并能夠默契流暢的和團(tuán)隊(duì)其他成員配合廷蓉。

二，使用node.js創(chuàng)建http服務(wù)

node.js使用Code工具開發(fā)马昙，新建一個(gè)文件夾：Server桃犬，導(dǎo)入到Code開發(fā)環(huán)境中。
在Server工程目錄下新建httpServer.js行楞，寫入以下代碼：

const http = require('http');
http.createServer(function(req, res) {
        var response = 'Hello World';
        res.write(response);
        res.end();
}).listen(8181);

第一行代碼引入需要的模塊攒暇，第三代碼使用http模塊提供的接口建立一個(gè)監(jiān)聽8181端口的http服務(wù)。
從命令行啟動(dòng)服務(wù)：
node httpServer.js
在瀏覽器中輸入http://127.0.0.1:8181子房，我們就可以看到這個(gè)畫面了：

01.png

三形用，手機(jī)端http訪問實(shí)現(xiàn)

使用Cocos Creator新建一個(gè)項(xiàng)目，組織目錄結(jié)構(gòu)证杭，示例如下：

02.png

Cocos Creator支持Web平臺(tái)上最廣泛使用的標(biāo)準(zhǔn)網(wǎng)絡(luò)接口：

• XMLHttpRequest：用于短連接
• WebSocket：用于長(zhǎng)連接
  我們使用XMLHttpRequest實(shí)現(xiàn)手機(jī)端的http服務(wù)請(qǐng)求田度，在http.js文件中寫下如下代碼：

module.exports = {
    request: function(obj) {
        var httpRequest = new XMLHttpRequest();
        var time = 5*1000;
        var timeout = false;

        // 超時(shí)設(shè)置
        var timer = setTimeout(function(){
            timeout = true;
            httpRequest.abort();
        }, time);

        var url = obj.url;

        // 組織請(qǐng)求參數(shù)
        if (typeof obj.data == 'object') {
            console.info('obj.data=' + JSON.stringify(obj.data));
            var kvs = []
            for (var k in obj.data) {
               kvs.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj.data[k]));
            }
            url += '?';
            url += kvs.join('&');
        }

        httpRequest.open(obj.method?obj.method:'GET', url, true);
        
        httpRequest.onreadystatechange = function () {
            var response = httpRequest.responseText;
            console.info('http url cb:' +  url + ' readyState:' + httpRequest.readyState + ' status:' + httpRequest.status);
            clearTimeout(timer);

            if (httpRequest.readyState == 4) {
                console.info('http success:' + url + ' resp:' + response);
                if (typeof obj.success == 'function') {
                    obj.success(response);
                }
            } else {
                console.info('http fail:' + url);
                if (typeof obj.fail == 'function') {
                    obj.fail(response);
                }
            }
        };
        httpRequest.send();
    }
}

參數(shù)說明：obj為一個(gè)JSON結(jié)構(gòu)體，需要包含url鍵解愤，data做為可選鍵镇饺，data的值需要為一個(gè)字典。

http請(qǐng)求接口的調(diào)用
在HelloWorld.js文件首行添加：
var http = require('http');
實(shí)現(xiàn)如下函數(shù)：

httpRequest: function() {
    var obj = {
        'url' : 'http://127.0.0.1:8181/'
    }
    http.request(obj);
}

在onLoad中調(diào)用函數(shù)：
this.httpRequest();
此時(shí)可以看到控制臺(tái)中的輸出：

03.png

四送讲，前后端數(shù)據(jù)交換格式

本示例中使用JSON作為前后端數(shù)據(jù)交換格式奸笤，JSON是一種采用完全獨(dú)立于編程語言的文本格式來存儲(chǔ)和表示數(shù)據(jù)的輕量級(jí)的數(shù)據(jù)交換格式。
前端在請(qǐng)求時(shí)已經(jīng)采用JSON格式哼鬓，接下來把后端傳遞回來的數(shù)據(jù)修改成JSON格式：
將httpServer.js中的數(shù)據(jù)響應(yīng)：

var response = 'Hello World';
res.write(response);

修改為：

var response = {
    'info' : 'Hello world'
};
res.write(JSON.stringify(response));

將Cocos Creator中的http.js中的數(shù)據(jù)解析：

if (httpRequest.readyState == 4) {
    console.info('http success:' + url + ' resp:' + response);
    if (typeof obj.success == 'function') {
        obj.success(response);
    }
}

修改為：

if (httpRequest.readyState == 4) {
    console.info('http success:' + url + ' resp:' + response);
    var resJson = JSON.parse(response);
    if (typeof obj.success == 'function') {
        obj.success(resJson);
    }
}

再次啟動(dòng)服務(wù)监右，前端發(fā)起請(qǐng)求，獲取到的數(shù)據(jù)如下：

04.png

五异希，頁面上顯示接收到的數(shù)據(jù)

接下來我們把從后端接收到的數(shù)據(jù)顯示到HelloWorld場(chǎng)景上秸侣。
在場(chǎng)景上添加：

• 一個(gè)發(fā)送請(qǐng)求的按鈕，點(diǎn)擊此按鈕調(diào)用httpRequest方法，同事將httpRequest的調(diào)用從onLoad函數(shù)去除味榛。

• 創(chuàng)建一個(gè)lable用以顯示后端獲取的數(shù)據(jù)，將其和代碼關(guān)聯(lián)予跌；
  如圖：

  
  
  05.png
  
  

  修改HelloWorld.js中的代碼：

var obj = {
    'url' : 'http://127.0.0.1:8181/'
}

修改為：

var obj = {
    'url' : 'http://127.0.0.1:8181/',
    'success' : function(jsonData) {
        this.responstData.string = jsonData['info'];
    }.bind(this)
}

其中this.responstData指向上一步創(chuàng)建的顯示獲取后端數(shù)據(jù)的標(biāo)簽的變量搏色。
運(yùn)行，點(diǎn)擊“發(fā)送請(qǐng)求”按鈕券册，可以得到如下畫面：

06.png

至此我們完成了http服務(wù)的請(qǐng)求和回應(yīng)功能频轿。

代碼在這兒

參考
http://docs.cocos.com/creator/manual/zh/getting-started/introduction.html
http://nodejs.cn/api/http.html#http_http_createserver_options_requestlistener

下一篇 node.js操作redis