"HTML5 WebSocket" WebSocket object properties and methods

"HTML5 websocket authoritative Guide" study notes &3

The object attribute of the WebSocket method is 1. WebSocket method A. Send method

The Send method is used when the WebSocket connection is established and the client sends a message to the server. Can be divided into sending two kinds of messages, one is the ordinary text information, one is binary data. It should be noted that the Send method must be used after the connection is established, that is, used in OnOpen.

Send a normal message

This is relatively simple, in the previous study of the WebSocket event is used, only need to send (message).

Send binary data

In the Web application, we also need to send the image, audio, video and other binary data, which requires BLOB class mates, Blod is a binary large object.

Here is a comprehensive example:

WS = WebSocket ("Ws://echo.websocket.org/echo",[]);/ * Open Event trigger indicates successful protocol handshake, WebSocket and ready to receive and send data */Ws.onopen = function(e){Console.log ("Start ...");//Send text messageWs.send ("Hello World");//Send binary Object        vardata =NewBlob ("Blob Object");    Ws.send (data); }/ * Message messages are triggered when the client receives a message * /Ws.onmessage = function(e){Console.log ("The information received is as follows:");if(typeofE.data = ="string") {Console.log ("text message:", E,e.data); }Else{Console.log ("Non-text message:", E,e.data);    } ws.close (); }

B. Close Method |

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

2. Object Properties

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

A. ReadyState

WebSocket reports its connection status through the read-only feature readystate, with a total of four connection states, which the user can use to determine the connection status at this point and then proceed to the next step. The following is a list of four connection states:

Attribute Constants	Take value	Status
Websocket.connecting	0	Connection is in progress, but not yet established
Websocket.open	1	Connection established, message can begin delivery
Websocket.closing	2	The connection is shutting down
Websocket.closed	3	Connection is closed

<br>

Here's an example:

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

B. Bufferedamount

When the client sends a large amount of data to the server, the browser caches the data in the browser's send queue and then sends it to the servers piecemeal, Bufferedamount This feature tells the client how much of the data in the queue is now cached but not sent. Examples are as follows:

varLimit =10240;varWS =NewWebSocket ("ws://echo.websocket.org",[]);/*open Event trigger indicates successful protocol handshake, WebSocket and ready to receive and send data */Ws.onopen = function(e){Console.log ("Start ..."); SetInterval ( function(){        if(Ws.bufferedamount < limit) {varA = [] for(varI=0;i< +; i++) {A.push (1);        } ws.send (a); }    },Ten); SetInterval ( function(){Console.log (Ws.bufferedamount); }, -)}

C. Protocol

The Protocol attribute contains the protocol name selected by the WebSocket server during the open handshake, in other words, the Protocol feature tells you the protocol used on a particular websocket.

"HTML5 WebSocket" WebSocket object properties and methods