WebSocket 前端使用

h5提供了WebSocket网络协议，可以实现浏览器与服务器的双向数据传输

构造函数

WebSocket(url,protocol)
url:WebSocket API URL,URL之前需要添加ws://或者wss://（类似http://、https://）
protocol:与服务端定义的协议名称相同，协议的参数例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定义协议。

  var ws = new WebSocket('ws://url', 'myprotocol');
  var ws = new WebSocket('ws://url', ['myprotocol','myprotovol2']);

方法

send(message) 通过已建立的websocket连接发送数据
close(code（numerical），reason（string）) 关闭打开的websocket连接

事件

-WebSocket API是纯事件驱动，建立连接之后，可自动发送状态改变的数据和通知
onopen 当建立websocket连接时触发，只触发一次
onerror 当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件。
onmessage 当服务端发送数据时触发，可多次触发，页面数据展示处理模块-实现轮询
onclose 当websocket连接关闭时触发，只触发一次

属性

readyState: WebSocket连接状态
0 正在与服务端建立WebSocket连接，还没有连接成功
1 连接成功并打开，可以发送消息
2 进行关闭连接的操作，且尚未关闭
3 连接已关闭或不能打开

bufferedAmount：检查传输数据的大小，当客户端传输大量数据时使用避免网络饱和

protocol：在构造函数中使用，protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称，可以为空

完整案例

使用公开的“echo.websocket.org/echo” websocket接口服务写一个完整的案例

    var ws = new WebSocket('ws://echo.websocket.org/echo');
    console.log('ws连接状态：' + ws.readyState);
    //监听是否连接成功
    ws.onopen = function () {
        console.log('ws连接状态：' + ws.readyState);
        //连接成功则发送一个数据
        ws.send('test1');
    }
    //接听服务器发回的信息并处理展示
    ws.onmessage = function (data) {
        console.log('接收到来自服务器的消息：');
        console.log(data);
        //完成通信后关闭WebSocket连接
        ws.close();
    }
    //监听连接关闭事件
    ws.onclose = function () {
        //监听整个过程中websocket的状态
        console.log('ws连接状态：' + ws.readyState);
    }
    //监听并处理error事件
    ws.onerror = function (error) {
        console.log(error);
    }

`