这篇我们主要讲客服端与服务器的交互，通俗点讲就是客服端发送请求给服务器，服务器收到请求后下发对应的数据。
这里我就不搭建服务器了，可以参考我的另一篇文章：搭建简单Node.js Express框架服务器 - 简书
Cocos Creator TypeScript入门教程：Cocos Creator + TypeScript 入门教程 - 简书
首先我们打开我们的服务器代码，添加请求接口，比如我们要发送请求获取用户的信息。我们可以在接口进入业务逻辑的处理和数据库的相关操作，通过res.send()函数返回数据给客服端。
服务器操作
我们启动服务器测试下，输入网址：http://127.0.0.1:3000/userInfo，我们会获取到服务器下发的信息。
好了我们的服务器的操作就完成了，下面上代码
var express = require('express');
var app = express();
//监听端口
//主站http://127.0.0.1:3000
app.listen(3000);
//注册请求
app.get('/', function(req, res){
res.send('欢迎使用express');
});
//注册用户信息请求
app.get('/userInfo', function(req, res){
//输出json格式
let response = {
id:1,
name:"阿狸",
age:18
};
res.send(JSON.stringify(response));
});
客服端操作
接下来就是客服端的操作了，我们创建一个空白项目，搭建一个简单的界面。点击层级管理器Canvas节点右键创建lable组件和button组件，通俗点说就是显示文字的文本和按钮。
我需要改变一下这两个组件的属性，点击创建的lable，我们可以在右侧修改它的属性，不知道英文是什么的意思的，可以把鼠标指针停留在上面会有对应的提示。
个人习惯我把lable和button重新命名了，并修改了Canvas的大小，改成手机竖屏720*1280
好了接下来是写代码了，新建一个index的ts脚本，在里面声明我们需要的一些属性类型和点击按钮触发的函数。
那我们怎么在客服端发送请求呢？需要我们写一个http的模块，回到我们的creator新建http.ts,这个类不要我们继承引擎的组件类。
const url = "http://127.0.0.1:3000";
export default class http {
/**
* 请求协议的方法
* @param path 请求接口的路径
* @param params 参数
* @param callBack 回调函数
*/
static get(path,params,callBack){
var requestUrl = url + path;
var xhr = cc.loader.getXMLHttpRequest();
// var data=self.paramData(params);
var data = params;
let param ='?';
for(var key in data){
var paramStr = key+"="+data[key];
if(param == ""){
param += paramStr;
}else {
param += "&"+paramStr;
}
}
xhr.open("GET", requestUrl + param);
xhr.timeout = 5000;//
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status == 200 ) {
var respone = xhr.responseText;
console.log('响应参数')
console.log(respone)
callBack(JSON.parse(respone));
}
};
xhr.send();
}
}
然后我们在index.ts引入http模块，因为get方法是静态的我们可以直接用类名调用。
好了，我们现在返回界面，把脚本挂载在Canvas节点上。把lable拖到我们声明的属性中，并为按钮添加点击方法。
为按钮添加点击事件，点击button组件，找到ClickEvents属性把0该成1，然后把Canvas拖到node上
保存，我们打开浏览器运行，按f12可以打开调试模式，点击按钮后发现报错了，这是什么问题呢？原来是我们没有设置跨域。我们回到服务器设置就可以了。
设置跨域，然后重启我们的服务器
我们在运行我们的项目，点击按钮后发现没有报错，并且服务器有数据返回，我们需要把数据显示在我们的文本。
给文本赋值
好了，我们现在就完成了客服端和服务端的简单通信，下面附上完整代码
myserver.js
var express = require('express');
var app = express();
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
//监听端口
//主站http://127.0.0.1:3000
app.listen(3000);
//注册请求
app.get('/', function(req, res){
res.send('欢迎使用express');
});
//注册用户信息请求
app.get('/userInfo', function(req, res){
//输出json格式
let response = {
id:1,
name:"阿狸",
age:18
};
res.send(JSON.stringify(response));
});
index.ts
import http from "./http"; //引入模块
const {ccclass, property} = cc._decorator;
@ccclass
export default class index extends cc.Component {
@property(cc.Label)
lable:cc.Label = null; //显示用户信息的文本
onLoad () {
}
start () {
}
// update (dt) {}
//登录按钮点击事件
OnLoginClick(){
//我们需要在点击按钮后发送请求
let _http = new http();
_http.get("/userInfo",{},(res)=>{
console.log("res",res);
this.lable.string = "id："+ res.id + "，名字：" + res.name + "，年龄：" + res.age;
});
}
}
http.ts
const url = "http://127.0.0.1:3000"; //服务器地址
export default class http {
/**
* 请求协议的方法
* @param path 请求接口的路径
* @param params 参数
* @param callBack 回调函数
*/
get(path,params,callBack){
var requestUrl = url + path;
var xhr = cc.loader.getXMLHttpRequest();
// var data=self.paramData(params);
var data = params;
let param ='?';
for(var key in data){
var paramStr = key+"="+data[key];
if(param == ""){
param += paramStr;
}else {
param += "&"+paramStr;
}
}
xhr.open("GET", requestUrl + param);
xhr.timeout = 5000;//
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status == 200 ) {
var respone = xhr.responseText;
console.log('响应参数')
console.log(respone)
callBack(JSON.parse(respone));
}
};
xhr.send();
}
}
