返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何在CocosCreator中使用http和WebSocket
  • 372
分享到

如何在CocosCreator中使用http和WebSocket

2024-04-02 19:04:59 372人浏览 安东尼
摘要

目录一、HttpGET二、HTTPPOST三、websocket四、移植Egret的http和WEBSocket到cocosCocosCreator版本2.3.4 一、HttpGET

CocosCreator版本2.3.4

一、HttpGET

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

cocos客户端:


//访问地址
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服务端:


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中


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

二、HTTPPOST

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

cocos客户端:


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服务端:


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输出


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

三、WebSocket

cocos客户端代码:

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


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服务端:

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


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完毕");

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

nodejs端输出:

四、移植Egret的http和websocket到cocos

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

以上就是Cocos Creator 的Http和WebSocke的详细内容,更多关于Cocos Creator的资料请关注编程网其它相关文章!

--结束END--

本文标题: 如何在CocosCreator中使用http和WebSocket

本文链接: https://lsjlt.com/news/123745.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何在CocosCreator中使用http和WebSocket
    目录一、HttpGET二、HTTPPOST三、WebSocket四、移植Egret的http和websocket到cocosCocosCreator版本2.3.4 一、HttpGET...
    99+
    2024-04-02
  • 怎么在CocosCreator中使用http和WebSocket
    这篇文章主要介绍了怎么在CocosCreator中使用http和WebSocket,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。CocosCreator版本2.3.4一、Ht...
    99+
    2023-06-14
  • 如何在CocosCreator中使用JSZip压缩
    CocosCreator版本:2.4.2 jszip的实际项目应用 游戏中有大量配置的情况下,文件会变得非常大,所以有些游戏会采用zip包压缩解压 例如如下游戏,将游戏配置confi...
    99+
    2024-04-02
  • 如何在CocosCreator中使用游戏手柄
    这篇文章主要介绍了如何在CocosCreator中使用游戏手柄,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1.场景布置2. 添加手柄监听器1.监听事件的变化由原先的mous...
    99+
    2023-06-14
  • 如何在HTML5中使用WebSocket
    本篇文章给大家分享的是有关如何在HTML5中使用WebSocket,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。客户端代码:<html><head>&l...
    99+
    2023-06-09
  • websocket在vue2中如何封装使用
    这篇文章主要讲解了“websocket在vue2中如何封装使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“websocket在vue2中如何封装使用”吧!websocket在vue2中的封...
    99+
    2023-07-05
  • 如何在CocosCreator中做一个List
    CocosCreator版本:2.3.4 cocos没有List组件,所以要自己写。从cocos的example项目中找到assets/case/02_ui/05_listView的...
    99+
    2024-04-02
  • 如何使用CocosCreator对象池
    目录前言:具体操作第一步:准备好 Prefab第二步:初始化对象池第三步:从对象池请求对象第四步:将对象返回对象池第五步:使用组件来处理回收和复用的事件第六步:清除对象池前言: 在运...
    99+
    2024-04-02
  • 在Java中使用WebSocket
    如果您觉得本博客的内容对您有所帮助或启发,请关注我的博客,以便第一时间获取最新技术文章和教程。同时,也欢迎您在评论区留言,分享想法和建议。谢谢支持! 一、  简介 1.1 什么是WebSocket WebSocket是一种协议,用于...
    99+
    2023-09-02
    java websocket 网络协议
  • 怎样在CocosCreator中使用游戏手柄
    目录一.场景布置二. 添加手柄监听器1.监听事件的变化2.坐标设定3. 将手柄限制在托盘内三. 添加小车的控制1. 小车的旋转2. 小车的移动一.场景布置 二. 添加手柄监听器 ...
    99+
    2024-04-02
  • 在安卓中使用WebSocket
    一、简介 WebSocket是一种在Web浏览器和服务器之间进行实时双向通信的协议。与传统的HTTP请求-响应模型不同,WebSocket允许服务器主动向客户端推送数据,而不需要客户端发起请求。当然,发展到如今,WebSocket已经不再局...
    99+
    2023-09-03
    websocket 网络 android
  • 如何在golang中使用Websocket来转发数据
    近年来,随着互联网技术的飞速发展,Websocket技术日益受到人们的关注和重视。Websocket是一种基于TCP协议的全双工通信协议,在Web应用程序和服务器之间实现了双向通信。使用Websocket技术,可以建立关键的实时连接,同时减...
    99+
    2023-05-14
  • 如何在Go中使用HTTP打包NumPy?
    在Go语言中使用HTTP打包NumPy是一个非常常见的需求,本文将为大家介绍如何使用Go语言中的HTTP库来实现这个功能。 首先,我们需要了解NumPy是什么。NumPy是Python语言中用于科学计算的一个扩展库,它提供了高效的多维数组对...
    99+
    2023-09-17
    http 打包 numpy
  • 如何在 ASP 中使用 http shell 对象?
    ASP(Active Server Pages)是一种服务器端脚本语言,它可以用来构建动态网站。在 ASP 中,我们可以使用 HTTP Shell 对象来执行外部程序或脚本文件,这为我们提供了很多方便。 本文将介绍如何在 ASP 中使用 H...
    99+
    2023-06-02
    http shell 对象
  • WebSocket使用以及在vue如何使用问题
    目录WebSocketWebSocket 实例socket.io 简介客户端 api总结WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进...
    99+
    2023-05-20
    WebSocket使用 vue使用WebSocket WebSocket在vue如何使用
  • numpy 和 http:如何在 ASP 中应用它们?
    在ASP开发中,我们经常需要处理数据和与Web服务器进行通信。为了实现这些功能,我们可以使用许多不同的库和工具,其中包括NumPy和HTTP。 NumPy是一个用于Python编程语言的开源数学库。它提供了许多数学和科学计算功能,如矩阵操作...
    99+
    2023-08-29
    学习笔记 numpy http
  • vue项目中如何使用websocket
    这篇文章将为大家详细讲解有关vue项目中如何使用websocket,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是websocket?“WebSocket 是 HTML5 开始提供的一种在单个 TCP...
    99+
    2023-06-29
  • 如何在golang中使用WebSocket进行文件传输
    如何在golang中使用WebSocket进行文件传输WebSocket是一种支持双向通信的网络协议,能够在浏览器和服务器之间建立持久的连接。在golang中,我们可以使用第三方库gorilla/websocket来实现WebSocket功...
    99+
    2023-12-18
    Golang websocket 文件传输
  • 如何在golang中使用WebSocket进行远程控制
    如何在Go语言中使用WebSocket进行远程控制简介:WebSocket是一种在Web应用程序中实现实时双向通信的技术。在Go语言中,我们可以使用标准库中的net/http和github.com/gorilla/websocket包来实现...
    99+
    2023-12-17
    Golang websocket 远程控制
  • 在Asp.netcore项目中使用WebSocket
    今天小试了一下在Asp.net core中使用websocket,这里记录一下: 在 Startup 类的 Configure 方法中添加 WebSocket 中间件。 app.Us...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作