• 售前

  • 售后

热门帖子
入门百科

如何在CocosCreator中使用http和WebSocket

[复制链接]
Happysong 显示全部楼层 发表于 2021-10-26 13:13:33 |阅读模式 打印 上一主题 下一主题
目次


  • 一、HttpGET
  • 二、HTTPPOST
  • 三、WebSocket
  • 四、移植Egret的http和websocket到cocos
CocosCreator版本2.3.4

一、HttpGET

Get方式,客户端请求本机地点3000端口,并携带参数url和name,服务端收到后返回name参数。
cocos客户端:
  1. //访问地址
  2. let url = "http://127.0.0.1:3000/?url=123&name=321";
  3. //新建Http
  4. let xhr = new XMLHttpRequest();
  5. //接收数据
  6. xhr.onreadystatechange = function () {
  7.     if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
  8.         var response = xhr.responseText;
  9.         console.log(response);
  10.     }
  11. };
  12. //错误处理
  13. xhr.onerror = function(evt){
  14.     console.log(evt);
  15. }
  16. //初始化一个请求,GET方式,true异步请求
  17. xhr.open("GET", url, true);
  18. //发送请求
  19. xhr.send();
复制代码
为了方便测试,在本机用nodejs搭建一个简易服务器,在收到访问后,返回请求参数中的name值。
nodejs服务端:
  1. var app = require('express')();
  2. var http = require('http').Server(app);  
  3. app.get('/', function(req, res){
  4.     //设置允许跨域的域名,*代表允许任意域名跨域
  5.     res.header("Access-Control-Allow-Origin","*");
  6.     //允许的header类型
  7.     res.header("Access-Control-Allow-Headers","content-type");
  8.     //跨域允许的请求方式
  9.     res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  10.     res.send(req.query.name);
  11. });
  12.    
  13. http.listen(3000, function(){
  14.     console.log('listening on *:3000');
  15. });
复制代码
运行nodejs的服务器,并运行cocos代码,cocos中
  1. console.log(response);   //输出为321
复制代码
二、HTTPPOST

客户端请求服务器,携带参数name,服务端收到后返回name。
cocos客户端:
  1. let url = "http://127.0.0.1:3000/";
  2. let xhr = new XMLHttpRequest();
  3. xhr.onreadystatechange = function () {
  4.     if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
  5.         var response = xhr.responseText;
  6.         console.log(response);
  7.     }
  8. };
  9. xhr.onerror = function(evt){
  10.     console.log(evt);
  11. }
  12. xhr.open("POST", url, true);
  13. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  14. xhr.send("name=123");
复制代码
nodejs服务端:
  1. var app = require('express')();
  2. var http = require('http').Server(app);  
  3. var querystring = require('querystring');
  4. app.post('/', function(req, res){
  5.     //设置允许跨域的域名,*代表允许任意域名跨域
  6.     res.header("Access-Control-Allow-Origin","*");
  7.     //允许的header类型
  8.     res.header("Access-Control-Allow-Headers","content-type");
  9.     //跨域允许的请求方式
  10.     res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  11.      
  12.     var body = "";
  13.      
  14.     req.on('data', function (chunk) {
  15.         body += chunk;  //一定要使用+=,如果body=chunk,因为请求favicon.ico,body会等于{}
  16.         console.log("chunk:",chunk);
  17.     });
  18.      
  19.     req.on('end', function () {
  20.         body = querystring.parse(body);
  21.         console.log("body:",body);
  22.         res.send(body.name);
  23.     });
  24. });
  25.    
  26. http.listen(3000, function(){
  27.     console.log('listening on *:3000');
  28. });
复制代码
cocos输出
  1. console.log(response);  //输出123
复制代码
三、WebSocket

cocos客户端代码:
毗连本地服务器127.0.0.1:8001,毗连乐成后发送一段字符串,并将接收的字符串打印
  1. let ws = new WebSocket("ws://127.0.0.1:8001");
  2. ws.onopen = function (event) {
  3.     console.log("Send Text WS was opened.");
  4. };
  5. ws.onmessage = function (event) {
  6.     console.log("response text msg: " + event.data);
  7. };
  8. ws.onerror = function (event) {
  9.     console.log("Send Text fired an error");
  10. };
  11. ws.onclose = function (event) {
  12.     console.log("WebSocket instance closed.");
  13. };
  14. setTimeout(function () {
  15.     if (ws.readyState === WebSocket.OPEN) {
  16.         console.log("WebSocket start send message.");
  17.         ws.send("Hello WebSocket, I'm a text message.");
  18.     }
  19.     else {
  20.         console.log("WebSocket instance wasn't ready...");
  21.     }
  22. }, 3000);
复制代码
nodejs服务端:
接收字符串乐成后,打印接收的数据,并返回一段字符串。
  1. var ws = require("nodejs-websocket");
  2.   
  3. console.log("开始创建websocket");
  4. var server = ws.createServer(function(conn){
  5.     console.log("连接成功");
  6.     conn.on("text", function (obj) {
  7.        console.log("接收:",obj);
  8.         conn.send("message come from server");     
  9.          
  10.     })
  11.     conn.on("close", function (code, reason) {
  12.         console.log("关闭连接")
  13.     });
  14.     conn.on("error", function (code, reason) {
  15.         console.log("异常关闭")
  16.     });
  17. }).listen(8001)
  18. console.log("开始创建websocket完毕");
复制代码
测试效果,客户端欣赏器输出:

nodejs端输出:


四、移植Egret的http和websocket到cocos

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

以上就是Cocos Creator 的Http和WebSocke的详细内容,更多关于Cocos Creator的资料请关注草根技能分享其它相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作