深化了解运用egret.WebSocket-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝30
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:367回复:0

  深化了解运用egret.WebSocket

楼主#
更多 发布于:2016-06-04 16:04

概念

本教程不解说TCP/IP协议,Socket归于那层,详细怎样规划等等,主讲运用环境与办法。

egret.WebSocket 运用示例 与 protobuf 运用示例

在运用websocket之前需求简略评论一下旧有通讯办法。

HTTP

网站中常见的一种传输协议,用于拜访页面或资本时,向页面地点的效劳器发送一个 HTTP

恳求。效劳器识别恳求,返回呼应数据并封闭衔接。这进程中客户端不恳求,效劳器不能自动推送音讯到客户端。早些的游戏经过轮训以及 AJAX

完结了不需求手动改写程序内部轮训恳求的伪的长衔接。这显然是一个十分不明智的办法。能够幻想一下聊天室或人物移动场景中,假如咱们运用 HTTP

会是一种什么情况。大量的恳求与呼应报头额定的数据、推迟不断发生、传输带宽压力不断添加,这关于ARPG等类型游戏是丧命的。

Socket

端游中常见的一种传输协议,套衔接。需求了解Socket的同学baidu一下,它是一个长衔接的协议,在完结握手后,效劳器能自动的推送音讯到客户端,音讯格局能够是进制流以及自界说格局等。后期因为FLASH的鼓起,页游中绝大多数都在运用。能够幻想一下聊天室或人物移动场景中,咱们运用socket会是一种什么情况。没有额定的数据、自动的音讯推送、低推迟等等。

WebScoket

前期 HTML 中没有供给 socket 的支撑,大型页游项目依托于 Flash 供给的

Socket API 。跟着 html5 的拟定与完善,WebSocket 被各大浏览器厂商所支撑。

WebScoket 与 Socket

的差异在于前者供给了完善的API以及握手的机制,而后者是抽象出来的一种概念,详细的完结关于各种言语都可能不一样,例如:咱们需求自界说协议体,操控缓存区等。而在

WebSocket 中,每个音讯的传输标准都是界说好的,如音讯以 0x00 字节最初,以 0xff 结束,中心数据选用 UTF-8

编码格局,首次握手有必要运用ws://xxx 或wss://xxx 进行,在握手成功后将协议晋级为 WebSocket 协议,进行双工的通讯。首次恳求走的是

HTTP 恳求。因为各种标准的界说与完结,旧有的效劳器 Socket 握手进程并不适用于 WebSocket 。

实践上,很多言语、结构和效劳器都供给了 WebSocket 支撑,例如:

根据 C 的 libwebsocket.org

根据 Node.js 的 Socket.io

根据 python 的 ws4py

根据 C++ 的 WebSocket++

Apache 对 WebSocket 的支撑: Apache Module

mod_proxy_wstunnel

Nginx 对 WebSockets 的支撑: NGINX as a WebSockets

Proxy 、 NGINX Announces Support for WebSocket Protocol 、 WebSocket proxying

lighttpd 对 WebSocket 的支撑: mod_websocket

egret.WebSocket 运用示例

前期参加或制造游戏项目,对下面这张图必定不陌生,界说音讯长度位、音讯号以及音讯读取标准等:

HML5 的 WebSocket 传输中,并没有界说进制流的传送读取。

egret.WebSocket 中对 HTML5 中 WebSocket 进行封装,完结了关于进制流的传输。

egret.WebSocket 默许的是字符串办法承受,创立一个 egret.WebSocket

十分简略,因为 egret 对字节流传输的完结,效劳器与客户端旧有的协议十分便利移植。以下示例演示了创立 egret.WebSocket :

1.修正 egretProperties.json 中的 modules ,添加 {"name":

"socket"}

2.在项目地点目录执行一次编译引擎 egret build -e

this.socket = new egret.WebSocket();

//设置数据格局为二进制,默许为字符串

this.socket.type =

egret.WebSocket.TYPE_BINARY;

//添加收到数据侦听,收到数据会调用此办法

this.socket.addEventListener(egret.ProgressEvent.SOCKET_DATA,

this.onReceiveMessage, this);

//添加衔接打开侦听,衔接成功会调用此办法

this.socket.addEventListener(egret.Event.CONNECT,

this.onSocketOpen, this);

//添加衔接封闭侦听,手动封闭或许效劳器封闭衔接会调用此办法

this.socket.addEventListener(egret.Event.CLOSE,

this.onSocketClose, this);

//添加反常侦听,出现反常会调用此办法

this.socket.addEventListener(egret.IOErrorEvent.IO_ERROR,

this.onSocketError, this);

//衔接效劳器

this.socket.connect("echo.websocket.org", 80);

当触发 egret.Event.CONNECT 侦听办法 onSocketOpen

时衔接效劳器成功,能够进行数据发送接纳。咱们创立一个字节数组,经过writeType写入字符串类型,布尔类型,整形,设置指针为开始0,调用

this.socket.writeBytes 进行数据发送:

var byte:egret.ByteArray = new

egret.ByteArray();

byte.writeUTF("Hello Egret WebSocket");

byte.writeBoolean(false);

byte.writeInt(123);

byte.position = 0;

this.socket.writeBytes(byte, 0,

byte.bytesAvailable);

this.socket.flush();

当触发 egret.ProgressEvent.SOCKET_DATA 侦听办法

onReceiveMessage 时数据接纳成功,创立一个字节数组并将 socket 中当时数据读入其间,与发送办法类似,接纳运用 readType 。

var byte:egret.ByteArray = new

egret.ByteArray();

this.socket.readBytes(byte);

var msg:string = byte.readUTF();

var boo:boolean = byte.readBoolean();

var num:number = byte.readInt();

protobuf 运用示例

baidu百科 protocolbuffer

介绍,protocolbuffer(以下简称PB)是谷歌 的一种数据交换的格局,它独立于言语,独立于渠道。谷歌 供给了三种言语的完结:java、c++ 和

python,每一种完结都包含了相应言语的编译器以及库文件。因为它是一种二进制的格局,比运用 xml

进行数据交换快很多。能够把它用于分布式运用之间的数据通讯或许异构环境下的数据交换。作为一种功率和兼容性都很优异的二进制数据传输格局,能够用于比如网络传输、装备文件、数据存储等许多范畴。

protobuf

被适用于十分多的出产环境中,也出现了各种言语的版别,便利了数据的移植与可维护性。它在有些言语项目中有必定缺点,如跟着项目的不断迭代会发生较多的机器码添加项目体积。

这儿以第三库的办法参加对 protobufjs 的支撑。想了解第三方集成的同学点击:

集成第三方javascript库

示例下载见教程尾部:

1.复制示例项目 libs 目录下 protobuf 目录到新项目地点 libs 目录。

2.复制 libsrc 目录下 protobuf 目录到新项目地点 protobuf 目录。

3.项目 egretProperties.json 中添加相关内容。

egretProperties.json:

{

"document_class": "Main",

"modules": [

{

"name": "core"

},

{

"name": "version"

},

{

"name": "res"

},

{

"name": "socket"

},

{

"name": "protobuf",

"path": "libsrc/protobuf"

}

],

"egret_version": "2.0.2"

}

编译引擎,完结对protobuf装备。

在 resource\assets\proto下 ,新建一个数据文件命名为 common.proto

。在其间界说咱们需求传输的类目标。这个文件在实践出产环境中是效劳端客户端共用的,并且经过东西出产对应言语的拜访类,如name.ts,并引进项目中,经过 new

或别的办法创立实例。不过可惜的是现在还没有egret言语所运用的生成东西。

首先在 common.proto 内界说结构体,了解语法点击这儿

。咱们界说一个简略结构,如:

message Common {

required uint32 id = 1;

required string text = 2;

}

在 resource.js 中咱们引进 common.proto

文件,为了便利,在初始化进行加载。也能够运用 RESDepot 东西进行导入。

当文件被加载后,进行数据设置之前需求四步:

1.获取资本数据文件。

2.解码并创立目标结构器。

3.创立需求的数据结构类。

4.实例化数据结构类。

设置与读取示例,如下代码:

var proto: string =

RES.getRes("common_proto");

var builder:any =

dcodeIO.ProtoBuf.loadProto(proto);

var clazz:any = builder.build("Common");

var data:any = new clazz();

data.set("id",1);//能够运用data.id=1;

data.set("text","oops");//能够运用data.text=oops;

console.log("id=" + data.get("id"));

console.log("oops=" + data.get("text"));

我想我写这到这儿,不只是为了创立一个文件,序列化数据,反序列化数据,然后创立个实例吧。

好吧,咱们持续往下讲,下面即是咱们详细运用 egret.WebSocket 发送数据。 这是咱们运用它的要害。

在运用上例中 builder.build("Common") 得到目标结构器中供给了序列化的办法

toArrayBuffer() 经过 egret.ByteArray

写入序列化进行传输,在实践的环境中,还需求触及到一些长度位,校验,音讯号等这儿不做评论。发送示例,如下代码:

var arraybuffer: ArrayBuffer =

data.toArrayBuffer();

var len: number = arraybuffer.byteLength;

var btyearray:egret.ByteArray=new

egret.ByteArray(arraybuffer);

if(len > 0)

{

this.socket.writeBytes(btyearray);

this.socket.flush();

}

接纳数据, 咱们代码中一向出现 ArrayBuffer

这是JS中一种用于二进制数据存储的类型,与咱们的 ByteAarray 类似 经过 DataView 供给的接口,转换为咱们能够运用的 ByteAarray

数据,如下代码:

var msgBuff: ArrayBuffer;

var btyearray: egret.ByteArray = new

egret.ByteArray();

this.socket.readBytes(btyearray);

var len = btyearray.buffer.byteLength;

var dataView = new DataView(btyearray.buffer);

var pbView = new DataView(new

ArrayBuffer(len));

for(var i = 0;i < len;i++) {

pbView.setInt8(i,dataView.getInt8(i));

}

msgBuff = pbView.buffer;

var proto: string =

RES.getRes("common_proto");

var builder:any =

dcodeIO.ProtoBuf.loadProto(proto);

var clazz:any = builder.build("Common");

var data: any = clazz.decode(msgBuff);

console.log("decodeData id=" +

data.get("id"));

console.log("decodeData oops=" +

data.get("text"));

优质IT资源分享社区为你提供此文。

本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

WEB前端开发教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客