【HTML5 WebSocket】WebSocket对象特性和方法

《HTML5 WebSocket权威指南》学习笔记&3

WebSocket方法的对象特性

1. WebSocket方法

a. send方法

send方法用于在WebSocket连接建立后，客户端向服务端发送消息。可分为发送两种消息，一种是普通文本信息，一种是二进制数据。需注意的是，send方法必须在连接建立以后才能使用，也就是在onopen里使用才不会出错。

发送普通消息

这个比较简单，在上一篇学习WebSocket事件时就用到了，只需要send(message)即可。

发送二进制数据

在Web应用中，我们还需要发送图片、音频、视频等二进制数据，这就需要Blob类的配合，Blod是二进制大对象。

下面是一个综合示例：

   ws = WebSocket("ws://echo.websocket.org/echo",[]);

    /* open事件触发表明协议握手成功，WebSocket以及准备好接收和发送数据 */
    ws.onopen = function(e){
        console.log("start..");
        //发送文本消息
        ws.send("Hello World");
        //发送二进制对象
        var data = new Blob("blob object");
        ws.send(data);
    }

   /* message消息在客户端接收到消息时触发 */
    ws.onmessage = function(e){
        console.log("收到信息如下：");
        if(typeof e.data == "string"){
            console.log("文本消息：",e,e.data);
        }else{
            console.log("非文本消息：",e,e.data);
        }
        ws.close();
    }

b. close方法|

close方法用于关闭连接，它可以不带参数表示直接关闭，也可以带上两个参数(code,reason)向服务端提交关闭连接的原因：
    1.  ws.close()
    2.  ws.close(1000,"close normally")

2. 对象特性

在学习了WebSocket的方法后，接下来学习一下WebSocket提供的对象特性，这些特性提供了关于WebSocket对象的更多信息：readyState、bufferedCount
和protocol。英文稍好的话其实由字面就可知道这三个对象分别对应着WebSocket的什么特性。下面一一介绍一下：

a. readyState

WebSocket通过只读特性readyState报告其连接状态，连接状态共有四个，使用者可以根据这个特性判断此时的连接状态，然后再进行下一步行动。下面是四个连接状态列表：

特性常量	取值	状态
WebSocket.CONNECTING	0	连接正在进行中，但还未建立
WebSocket.OPEN	1	连接已建立，消息可以开始传递
WebSocket.CLOSING	2	连接正在进行关闭
WebSocket.CLOSED	3	连接已关闭

<br>

下面是示例：

    var ws = new WebSocket("ws://echo.websocket.org/echo",[]);
    if(ws.readyState == WebSocket.CONNECTING){
        console.log("连接正在建立");
    }
    ws.onopen = function(e){
        if(ws.readyState == WebSocket.OPEN){
            console.log("连接已打开！");
        }
    }

b. bufferedAmount

当客户端向服务端发送大量数据时，浏览器会先将数据缓存到浏览器的发送队列里，然后逐段地向服务器发送，bufferedAmount这个特性就是告诉客户端现在队列里还有多少已经缓存了但没发送的数据。示例如下：

var limit = 10240;
var ws = new WebSocket("ws://echo.websocket.org",[]);

/* open事件触发表明协议握手成功，WebSocket以及准备好接收和发送数据 */
ws.onopen = function(e){
    console.log("start..");
    setInterval(function(){
        if(ws.bufferedAmount < limit){
            var a = []
            for(var i=0;i<1000;i++){
                a.push(1);
            }
            ws.send(a);
        }
    },10);
    setInterval(function(){
        console.log(ws.bufferedAmount);
    },500)
}

c. protocol

protocol特性包含在打开握手期间WebSocket服务器选择的协议名，换句话说，protocol特性告诉你特定WebSocket上使用的协议。