跳到主要内容

WebSocket

概述

WebSocket 是采用 HTML5 规范的 用于实时发送和接受数据的 API。

目前 Chrome、Firefox、Opera、Safari 等主流版本均支持,Internet Explorer从10开始支持。 WebSocket 标准在很大程度上简化了复杂的双向网络沟通和连接管理。

下图显示了一个基于 WebSocket 的基本结构,在这种结构中,浏览器使用全双工的WebSocket连接,直接与远程主机通信:

Egret 的 WebSocket 即为 H5 的 WebSocket 封装。

用WebSocket进行通讯的基本过程

确保项目支持WebSocket

Egret 以官方扩展模块的形式支持 WebSocket。在现有的 Egret 项目中,修改 egretProperties.json 中的 modules 字段,在字段的最后添加 socket 模块:


{

"name": "socket"

}


在项目所在目录内执行一次引擎编译:

egret clean


本步骤已经完成,现在项目中既可以使用 WebSocket 相关的API了。

WebSocket对象

所有的通讯都是基于一个WebSocket实例,首先创建WebSocket对象:

const socket =  new  egret.WebSocket();


侦听事件

WebSocket对象主要有两个事件,一个是连接服务器成功,另一个是收到服务器数据:


webSocket.addEventListener(egret.ProgressEvent.SOCKET_DATA, onReceiveMessage, this);

webSocket.addEventListener(egret.Event.CONNECT, onSocketOpen, this);


连接服务器

加入侦听事件后,即可连接服务器。注意像所有的通讯协议一样,服务器需要支持WebSocket协议,为便于测试,WebSocket官方提供了一个专用于测试的服务器echo.websocket.org,连接其80端口即可测试:


webSocket.connect("echo.websocket.org", 80);


发送消息

连接成功后,即可发送消息,在前述的onSocketOpen处理函数中加入发送消息代码:


const cmd = '{"cmd":"uzwan_login","gameId":"0","from":"guzwan","userId":"3565526"}';

webSocket.writeUTF(cmd);


消息的具体格式都是根据情况自己定义的,通常是json格式,便于解析。当然可以自定义其他的字符串格式。

接收消息

服务器根据约定的格式返回消息,则会触发SOCKET_DATA事件,在其事件处理函数onReceiveMessage中即可读取消息:

const msg = webSocket.readUTF();


读取到字符串后,即可根据约定的格式解析。

使用示例

将上一节所述的各部分用法连接起来:

webSocket: egret.WebSocket;

private function createGameScene(): void {

this.webSocket = new egret.WebSocket();

this.webSocket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);

this.webSocket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);

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

}

private function onSocketOpen(): void {

const cmd = "Hello Egret WebSocket";

console.log("连接成功,发送数据:" + cmd);

this.webSocket.writeUTF(cmd);

}

private function onReceiveMessage(e: egret.Event): void {

const msg = this.webSocket.readUTF();

console.log("收到数据:" + msg);

}


访问 这里 查看演示示例

注意事项

在 Native 下 websocket 单次消息长度不能超过 128*1024 字节。