WebSocket Full Duplex Communication Introductory tutorial

1. What is WebSocket
WebSocket protocol is HTML5 a new protocol. It implements the browser and server Full-duplex communication (Full-duplex). The first handshake needs to be done with an HTTP request.
1. Traditional way of web communication
1. Working mode: Client Request-service-side response
2. Applicable scenarios: Information changes are not particularly frequent occasions, such as Web page refresh
3. Not applicable scene: Online games, real-time monitoring
4. The question
Network bandwidth consumption: Each request and answer has a full HTTP header, which increases the amount of data per transmission.
Poor real time: polling is often used in Full-duplex communication.

2. Improved version of the Web communication mode
1. Polling

1. Based on polling (polling) technology: To maintain client and server synchronization in a frequent request mode
2. Problem: Frequent requests from clients, no change in server data, resulting in inefficient communication
2. Long polling

1. When there is no data update on the server, the connection will remain for a period of time to know the data or state changes or expire, in order to reduce the invalid client and server interaction
2. When the service-side data changes frequently, this mechanism and the timing polling no different
3. Flow Technology

1. The client page sends a long connection request to the server through a hidden window. The server responds to this request and keeps updating the link state to ensure that the client and server connections are not up to date.
2. Browser design compatibility and concurrent processing issues.
4. WebSocket
1. Concept: It is HTML5 to provide a Full-duplex communication protocol on a single TCP connection. The Websocket communication protocol and the 2011-Times IETF standard RFC 6455,websocket API are set as standard by the consortium.
2. The principle and TCP, just do a handshake action, you can form a fast path.

1. The client initiates the HTTP request, the additional header information is: "Upgrade Websocket"


2. Service-side parsing and return handshake information to establish a connection

3. Transfer data (bidirectional)

4. Disconnect the connection
3. Data transfer process
1. Transmit in frame form
1. Large Data slicing
2. Support edge to generate data to send you messages
2. Notes
1. Client to server data frames must be masked, server-side drag and drop received data frames not masked, must actively shut down the connection
2. Server to client data must not be masked, the client received a masked actual frame, you must actively close the connection
3. The one who found the error can send the close frame and turn off the connection.
4. Advantages
1. Data Transfer Volume
2. Stability
5. Support Browser
1. Firefox 4, Chrome 4, Opera 10.70 and Safari 5 browser support

2. WebSocket Case Description
1. Client
1. Create a WebSocket instance
WS = New WebSocket ("ws://127.0.0.1:10000/server_test.php");
1. Server ip:ws://127.0.0.1
2. Server Port: 10000
3. Service procedure: server_test.php
2. Establish the connection after the callback function
Ws.onopen = function (event) {}
3. callback function after receiving server message
Ws.onmessage = function (event) {}
4. callback function after closing connection
Ws.onclose = function (event) {}
5. callback function after connection error
Ws.onerror = function (event)
6. Send data
Ws.send (' Server, hello ');
7. View Current Connection Status
Alert (ws.readystate)

2. Service-side
1. Create service-side WebSocket objects, waiting for client access
$master = WebSocket ("localhost", 10000);
First create the WebSocket, then the service side listens for the corresponding port, waits for the client to connect
function WebSocket ($address, $port) {
$master =socket_create (Af_inet, Sock_stream, sol_tcp) or Die ("Socket_create () failed");
Socket_set_option ($master, Sol_socket, SO_REUSEADDR, 1) or Die ("Socket_option () failed");
Socket_bind ($master, $address, $port) or Die ("Socket_bind () failed");
Socket_listen ($master) or Die ("Socket_listen () failed");