一，开发环境及前言
本示例开发环境如下：
-
macOS High Sierra 版本10.13.4
-
nodejs v10.6.0
-
Cocos Creator V2.0
-
Code V1.25.1
JavaScript最初只能用于网页的前端开发，Node.js推出之后，JavaScript可以进行后端开发了，cocos2d-js、Cocos Creator、微信小程序使得JavaScript能够直接进行游戏开发，Electron可以方便的把JavaScript开发的应用发布成跨平台的桌面应用，开源库TensorFlow.js更是将JS扩展到热门的机器学习领域。
JavaScript的引用领域原来越广泛了，大有一统江湖之势：
- 网页开发
- 服务器开发
- 手游开发
- 桌面应用
- 机器学习领域
在功能机时代，缺少游戏引擎的支持，UI使用硬编码方式进行部署，在产品改变UI、调整数值时都要重新编码，只有打包放到手机上才能看到产品效果。这些工作都需要程序员来操作。Cocos Creator是以内容创作为核心的游戏开发工具，其包含游戏引擎、资源管理、场景编辑、游戏预览和发布等游戏开发所需的全套功能，并且将所有的功能和工具链都整合于一体，为美术和策划人员提供前所未有的内容创作生产和即时预览测试环境。以工作流为核心的开发理念，让不同职能的开发者能够快速找到最大化自己作用的工作切入点，并能够默契流畅的和团队其他成员配合。
二，使用node.js创建http服务
node.js使用Code工具开发，新建一个文件夹：Server，导入到Code开发环境中。
在Server工程目录下新建httpServer.js，写入以下代码：
const http = require('http');
http.createServer(function(req, res) {
var response = 'Hello World';
res.write(response);
res.end();
}).listen(8181);
第一行代码引入需要的模块，第三代码使用http模块提供的接口建立一个监听8181端口的http服务。
从命令行启动服务：
node httpServer.js
在浏览器中输入http://127.0.0.1:8181，我们就可以看到这个画面了：
01.png
三，手机端http访问实现
使用Cocos Creator新建一个项目，组织目录结构，示例如下：
02.png
http请求接口的实现
Cocos Creator支持Web平台上最广泛使用的标准网络接口：
- XMLHttpRequest：用于短连接
- WebSocket：用于长连接
我们使用XMLHttpRequest实现手机端的http服务请求，在http.js文件中写下如下代码：
module.exports = {
request: function(obj) {
var httpRequest = new XMLHttpRequest();
var time = 5*1000;
var timeout = false;
// 超时设置
var timer = setTimeout(function(){
timeout = true;
httpRequest.abort();
}, time);
var url = obj.url;
// 组织请求参数
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();
}
}
参数说明：obj为一个JSON结构体，需要包含url键，data做为可选键，data的值需要为一个字典。
http请求接口的调用
在HelloWorld.js文件首行添加：
var http = require('http');
实现如下函数：
httpRequest: function() {
var obj = {
'url' : 'http://127.0.0.1:8181/'
}
http.request(obj);
}
在onLoad中调用函数：
this.httpRequest();
此时可以看到控制台中的输出：
03.png
四，前后端数据交换格式
本示例中使用JSON作为前后端数据交换格式，JSON是一种采用完全独立于编程语言的文本格式来存储和表示数据的轻量级的数据交换格式。
前端在请求时已经采用JSON格式，接下来把后端传递回来的数据修改成JSON格式：
将httpServer.js中的数据响应：
var response = 'Hello World';
res.write(response);
修改为：
var response = {
'info' : 'Hello world'
};
res.write(JSON.stringify(response));
将Cocos Creator中的http.js中的数据解析：
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);
}
}
再次启动服务，前端发起请求，获取到的数据如下：
04.png
五，页面上显示接收到的数据
接下来我们把从后端接收到的数据显示到HelloWorld场景上。
在场景上添加：
- 一个发送请求的按钮，点击此按钮调用httpRequest方法，同事将httpRequest的调用从onLoad函数去除。
-
创建一个lable用以显示后端获取的数据，将其和代码关联；
如图：
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指向上一步创建的显示获取后端数据的标签的变量。
运行，点击“发送请求”按钮，可以得到如下画面：
06.png
至此我们完成了http服务的请求和回应功能。
Cocos Creator源码地址
https://gitee.com/woodlouse/Client_Course/tree/01_http
参考
http://docs.cocos.com/creator/manual/zh/getting-started/introduction.html
http://nodejs.cn/api/http.html#http_http_createserver_options_requestlistener
网友评论