[HTML5 WebSocket] features and methods of WebSocket objects, html5websocket
Study Notes in HTML5 WebSocket authoritative guide & 3
Object Features of WebSocket method 1. WebSocket method a. send Method
The send method is used to send messages to the server after a WebSocket connection is established. Messages can be divided into two types: common text information and binary data. Note that the send method can only be used after the connection is established, that is, it can be used in onopen to avoid errors.
Send common messages
This is relatively simple. It is used in the previous study of WebSocket events. You only need to send (message.
Send binary data
In Web applications, we also need to send binary data such as images, audios, and videos. This requires the combination of Blob classes. Blod is a large binary object.
The following is a comprehensive example:
Ws = WebSocket ("ws: // echo.websocket.org/echo", []);/* triggering of an open event indicates that the protocol handshake is successful, WebSocket, and prepare to receive and send data */ws. onopen = function (e) {console. log ("start .. "); // send the text message ws. send ("Hello World"); // send binary object var data = new Blob ("blob object"); ws. send (data);}/* The message is triggered when the client receives the message */ws. onmessage = function (e) {console. log ("received information:"); if (typeof e. data = "string") {console. log ("text message:", e, e. data);} else {console. log ("non-text message:", e, e. data);} ws. close ();}
B. close method |
The close method is used to close the connection. It can be closed directly without parameters, or two parameters (code, reason) can be included to submit the reason for closing the connection to the server: 1. ws. close () 2. ws. close (1000, "close normally ")
2. Object Features
After learning the WebSocket method, next we will take a look at the object features provided by WebSocket. These features provide more information about WebSocket objects: readyState, bufferedCount, and protocol. If the English language is better, the three objects correspond to the characteristics of WebSocket. Here we will introduce them one by one:
A. readyState
WebSocket uses the read-only readyState feature to report its connection status. There are four connection statuses. You can determine the connection status based on this feature before proceeding to the next step. The following is a list of four connection statuses:
Feature constant |
Value |
Status |
WebSocket. CONNECTING |
0 |
Connection in progress, but not yet established |
WebSocket. OPEN |
1 |
The connection has been established and the message can be passed |
WebSocket. CLOSING |
2 |
Closing connection in progress |
WebSocket. CLOSED |
3 |
Connection closed |
<br>
The following is an example:
Var ws = new WebSocket ("ws: // echo.websocket.org/echo", []); if (ws. readyState = WebSocket. CONNECTING) {console. log ("connection is being established");} ws. onopen = function (e) {if (ws. readyState = WebSocket. OPEN) {console. log ("connection enabled! ");}}
B. bufferedAmount
When the client sends a large amount of data to the server, the browser first caches the data to the sending queue of the browser, and then sends the data to the server segment by segment, bufferedAmount is used to tell the client how much data has been cached but not sent in the queue. Example:
Var limit = 10240; var ws = new WebSocket ("ws: // echo.websocket.org", []);/* triggering of an open event indicates that the protocol handshake is successful, webSocket and prepare to receive and send data */ws. onopen = function (e) {console. log ("start .. "); setInterval (function () {if (ws. bufferedAmount <limit) {var a = [] for (var I = 0; I <1000; I ++) {. push (1);} ws. send (a) ;}}, 10); setInterval (function () {console. log (ws. bufferedAmount);}, 500 )}
C. protocol
The protocol feature includes the protocol name selected by the WebSocket server during the handshake. In other words, the protocol feature tells you the protocol used on a specific WebSocket.