服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 如何在CocosCreator中使用http和WebSocket

如何在CocosCreator中使用http和WebSocket

2022-03-03 17:06gamedaybyday js教程

这篇文章主要介绍了在Cocos Creator中使用的Http和WebSocket,对websocket感兴趣的同学,一定要看下

CocosCreator版本2.3.4

一、HttpGET

Get方式,客户端请求本机地址3000端口,并携带参数url和name,服务端收到后返回name参数。

cocos客户端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//访问地址
let url = "http://127.0.0.1:3000/?url=123&name=321";
//新建Http
let xhr = new XMLHttpRequest();
//接收数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
        var response = xhr.responseText;
        console.log(response);
    }
};
//错误处理
xhr.onerror = function(evt){
    console.log(evt);
}
//初始化一个请求,GET方式,true异步请求
xhr.open("GET", url, true);
//发送请求
xhr.send();

为了方便测试,在本机用nodejs搭建一个简易服务器,在收到访问后,返回请求参数中的name值。

nodejs服务端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var app = require('express')();
var http = require('http').Server(app); 
 
 
app.get('/', function(req, res){
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    res.send(req.query.name);
});
   
http.listen(3000, function(){
    console.log('listening on *:3000');
});

运行nodejs的服务器,并运行cocos代码,cocos中

?
1
console.log(response);   //输出为321

二、HTTPPOST

客户端请求服务器,携带参数name,服务端收到后返回name。

cocos客户端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let url = "http://127.0.0.1:3000/";
let xhr = new XMLHttpRequest();
 
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
        var response = xhr.responseText;
        console.log(response);
    }
};
xhr.onerror = function(evt){
    console.log(evt);
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=123");

nodejs服务端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var app = require('express')();
var http = require('http').Server(app); 
var querystring = require('querystring');
 
 
app.post('/', function(req, res){
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
     
    var body = "";
     
    req.on('data', function (chunk) {
        body += chunk;  //一定要使用+=,如果body=chunk,因为请求favicon.ico,body会等于{}
        console.log("chunk:",chunk);
    });
     
    req.on('end', function () {
        body = querystring.parse(body);
        console.log("body:",body);
        res.send(body.name);
    });
});
   
http.listen(3000, function(){
    console.log('listening on *:3000');
});

cocos输出

?
1
console.log(response);  //输出123

三、WebSocket

cocos客户端代码:

连接本地服务器127.0.0.1:8001,连接成功后发送一段字符串,并将接收的字符串打印

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let ws = new WebSocket("ws://127.0.0.1:8001");
ws.onopen = function (event) {
    console.log("Send Text WS was opened.");
};
ws.onmessage = function (event) {
    console.log("response text msg: " + event.data);
};
ws.onerror = function (event) {
    console.log("Send Text fired an error");
};
ws.onclose = function (event) {
    console.log("WebSocket instance closed.");
};
 
setTimeout(function () {
    if (ws.readyState === WebSocket.OPEN) {
        console.log("WebSocket start send message.");
        ws.send("Hello WebSocket, I'm a text message.");
    }
    else {
        console.log("WebSocket instance wasn't ready...");
    }
}, 3000);

nodejs服务端:

接收字符串成功后,打印接收的数据,并返回一段字符串。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var ws = require("nodejs-websocket");
  
console.log("开始创建websocket");
var server = ws.createServer(function(conn){
    console.log("连接成功");
    conn.on("text", function (obj) {
       console.log("接收:",obj);
        conn.send("message come from server");    
          
    })
    conn.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    conn.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8001)
console.log("开始创建websocket完毕");

测试结果,客户端浏览器输出:

如何在CocosCreator中使用http和WebSocket

nodejs端输出:

如何在CocosCreator中使用http和WebSocket

四、移植Egret的http和websocket到cocos

因为cocos没有封装工具类,所以直接从Egret移植http和websocket到cocos中使用,还算方便。

如何在CocosCreator中使用http和WebSocket

以上就是Cocos Creator 的Http和WebSocke的详细内容,更多关于Cocos Creator的资料请关注服务器之家其它相关文章!

原文链接:https://www.cnblogs.com/gamedaybyday/p/13028559.html

延伸 · 阅读

精彩推荐
  • js教程如何在CocosCreator中使用http和WebSocket

    如何在CocosCreator中使用http和WebSocket

    这篇文章主要介绍了在Cocos Creator中使用的Http和WebSocket,对websocket感兴趣的同学,一定要看下...

    gamedaybyday6342022-03-03
  • js教程NestJs使用Mongoose对MongoDB操作的方法

    NestJs使用Mongoose对MongoDB操作的方法

    这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    ragga-time4112022-01-22
  • js教程微信小程序实现多行文字滚动效果

    微信小程序实现多行文字滚动效果

    这篇文章主要介绍了微信小程序实现多行文字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Archer_yy5362022-02-19
  • js教程详解javascript脚本何时会被执行

    详解javascript脚本何时会被执行

    这篇文章主要介绍了详解javascript脚本何时会被执行,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    皮卡丘和羊宝贝6792022-01-17
  • js教程JavaScript实现简易加法计算器

    JavaScript实现简易加法计算器

    这篇文章主要介绍了JavaScript实现简易加法计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小小小青台3642022-02-22
  • js教程JS实现判断对象是否为空对象的5种方法

    JS实现判断对象是否为空对象的5种方法

    这篇文章主要介绍了JS实现判断对象是否为空对象的5种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    Flavor_3802022-02-28
  • js教程通过几行JavaScript就可以读取电脑上的所有数据?

    通过几行JavaScript就可以读取电脑上的所有数据?

    通过几行 JavaScript ,就可以读取到电脑/手机上的所有数据,浏览器中的网页可以读取你所有的密码,知道其他程序在干什么,这甚至不需要你写出来的程序...

    code秘密花园4142022-03-01
  • js教程JavaScript实现筛选数组

    JavaScript实现筛选数组

    这篇文章主要为大家详细介绍了JavaScript实现筛选数组,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    崇志广勤7412022-01-25