WebSocket (2)-Client

Original http://www.oseye.net/user/kevin/blog/79

I plan to explore WebSocket in the following blog posts:

1. WebSocket simple use (1)-Concept
2. WebSocket (2)-Client
3. WebSocket (3)-Server
4. WebSocket simple use (4)-complete instance
5. WebSocket simple use (5)-simulate the keyboard connection Function

Background:

A few days ago, the boss suddenly found a function of link keyboard. I thought it might be implemented using WebSocket. In addition, the recent HTML5 call is getting higher and higher, and I think it is necessary to study HTML5.

For example, in the handshake protocol described in the concept article, the client provides APIs by the browser, so you only need to use JavaScript For simple calls, and the server must implement it by yourself, the server will talk about it in the next blog.

WebSocket JavaScript interface definition:

1. [Constructor (inDOMString url, optional inDOMString protocol)]
2. InterfaceWebSocket {
3. Readonly attribute DOMString URL;
4. // Ready state
5. Constunsignedshort CONNECTING = 0;
6. Constunsignedshort OPEN = 1;
7. Constunsignedshort CLOSED = 2;
8. Readonly attribute unsignedshort readyState;
9. Readonly attribute unsignedlong bufferedAmount;
10.  
11. // Networking
12. Attribute Function onopen;
13. Attribute Function onmessage;
14. Attribute Function onclose;
15. Boolean send (inDOMString data );
16. Void close ();
17. };
18. WebSocketimplementsEventTarget;

A Brief Introduction to interface methods and attributes:

• ReadyState indicates that the connection has four states:
  CONNECTING (0): indicates that no connection has been established;
  OPEN (1): A connection has been established for communication;
  CLOSING (2): closes the connection by CLOSING the handshake;
  CLOSED (3): the connection is CLOSED or cannot be opened;
• The url represents the network address of the WebSocket server. The protocol is generally "ws" or "wss (encrypted communication)". The send method is to send data to the server;
• The close method is to close the connection;
• The onopen connection is established, that is, the event triggered by the handshake;
• Event triggered when onmessage receives a message from the server;
• Event triggered by an onerror exception;
• Onclose: The event triggered by closing the connection;

An example of using JavaScript to call a browser interface is as follows:

1. Var wsServer = 'ws: // localhost: 8888/demo'; // server address
2. Var websocket = newWebSocket (wsServer); // create a WebSocket object
3. Websocket. send ("hello"); // send a message to the server
4. Alert (websocket. readyState); // view the current status of websocket
5. Websocket. onopen = function (evt ){
6. // A connection has been established.
7. };
8. Websocket. onclose = function (evt ){
9. // The connection has been closed
10. };
11. Websocket. onmessage = function (evt ){
12. // Receives the Server Message and extracts it using evt. data.
13. };
14. Websocket. onerror = function (evt ){
15. // Exception
16. };