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

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

WebSocket方法的对象特性

1. WebSocket方法

---

a. send方法

send方法用于在WebSocket连接建立后，client向服务端发送消息。

可分为发送两种消息，一种是普通文本信息，一种是二进制数据。

需注意的是，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消息在client接收到消息时触发
    */
    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

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

示比例如以下：

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特性包括在打开握手期间WebSocketserver选择的协议名，换句话说，protocol特性告诉你特定WebSocket上使用的协议。