ActionScript
TypeScript
JavaScript

WebScoket通信实例讲解

发布时间:2017-01-11

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。使用ws或wss协议,可用于任意的客户端和服务器程序。LayaAir对它进行了封装,对应的类为laya.net.Socket


建立 WebSocket

        建立WebSocket很简单 只需实例化一个Socket类下面通过例子来实现这个功能。

为了能看到效果,我们可以通过搭建一个简单的服务器来进行联调。


(1)服务器搭建。

这里我们通过nodejs的服务器来创建一个服务器。首先安装nodejs,这个可以去nodejs的官网去下载,https://nodejs.org/en/。下载稳定版本就可以。

打开命令行 cmd 输入node -v。如果能看到版本号,那么说明nodejs安装成功。

然后在命令行输入 npm install ws 等待ws模块下载完成。更加详细的用法可以前往GitHub查看。网址为https://github.com/websockets/ws

首先新建一个js文件名字随意 我这里叫main.js

服务器端的代码如下:

blob.png


然后用node运行这段代码 一个简单的WebSocket就建立起来了。


(2)前端代码逻辑。

新建LayaAir空项目,选择AS语言。完整代码如下:

blob.png


发送数据

LayaAir的Socket中发送数据可以是文本和二进制。

(1)发送文本数据:

发送文本数据相对简单,直接调用Socket的send方法就可以。

socket.send("hello world");

(2)发送二进制数据:

blob.png


 数据读取

 Socket的读取是通过注册监听Event.MESSAGE事件接受。

(1)文本数据的接收

blob.png

这里接受的参数message就是服务器发送的文本内容。直接处理自己的逻辑即可。

(2)二进制数据的接收。

这里我们需要简单改下服务器 让他发送一段二进制数据。

代码改成如下:

blob.png

然后重启启动服务器。此时的服务器发送的就是二进制数据

然后我们改下客户端的代码:

blob.png

这段代码相比刚才声明了一个字节数组messageByte 用来读取接受到的服务器的二进制数据。然后通过操作这个messageByte来读取相应的数据。此时接受到的message你可以断点调试看下是一个ArrayBuffer。当然你也可以直接操作ArrayBuffer。