跳到主要内容

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 字节。