HTML5 WebSocket
WebSocket is a protocol for full-duplex communication on a single TCP connection that HTML5 began to provide.
In the WebSocket API, the browser and the server only need to perform a handshake action, and then a fast channel is formed between the browser and the server. Data can be transmitted directly between the two.
The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and the server can directly exchange data through the TCP connection.
After you obtain the Web Socket connection, you can send data to the server through thesend()method, and receive the data returned by the server through theonmessageevent.
The following API is used to create WebSocket objects.
var Socket = new WebSocket(url, [protocal] );
The first parameter url in the above code specifies the URL of the connection. The second parameter protocol is optional and specifies acceptable subprotocols.
WebSocket Properties
The following are the properties of the WebSocket object. Suppose we use the above code to create a Socket object:
| Properties | Description |
|---|---|
| Socket.readyState | Read-only attributereadyStateIndicates the connection status, which can be the following values:
|
| Socket.bufferedAmount | Read-only propertybufferedAmounthas been put in by send() The number of bytes of UTF-8 text that are queued for transmission but have not yet been sent. |
WebSocket Events
The following are related events of the WebSocket object. Suppose we use the above code to create a Socket object:
| Event | Event handler | Description |
|---|---|---|
| open | Socket.onopen | Triggered when connection is established |
| Socket.onmessage | Triggered when the client receives server data | |
| Socket.onerror | Triggered when a communication error occurs | |
| Socket.onclose | Triggered when the connection is closed |
The following are the relevant methods of the WebSocket object. Suppose we use the above code to create a Socket object:
WebSocket Example
The WebSocket protocol is essentially a TCP-based protocol.
In order to establish a WebSocket connection, the client browser must first initiate an HTTP request to the server. This request is different from the usual HTTP request and contains some additional header information, including the additional header information "Upgrade: WebSocket" Indicates that this is an HTTP request to apply for a protocol upgrade. The server parses these additional header information and then generates response information and returns it to the client. The WebSocket connection between the client and the server is established, and both parties can communicate freely through this connection channel. information, and this connection will continue to exist until either the client or the server actively closes the connection.
Client-side HTML and JavaScript
Currently, most browsers support the WebSocket() interface. You can try examples in the following browsers: Chrome, Mozilla, Opera and Safari.
php_websocket.html File content
php中文网(php.cn)
Installation pywebsocket
Before executing the above program, we need to create a service that supports WebSocket. Download mod_pywebsocket frompywebsocket, or use the git command to download:
git clone https://github.com/google/pywebsocket.git
mod_pywebsocket requires python environment support
Unzip the downloaded file.
Enter thepywebsocketdirectory.
Execute command:
$ python setup.py build $ sudo python setup.py install
View document description:
$ pydoc mod_pywebsocket
Start service
Execute the following command in thepywebsocket/mod_pywebsocketdirectory:
$ sudo python standalone.py -p 9998 -w ../example/
The above command will open a service with port number 9998, use -w to set the handler echo_wsh.py Table of contents.
Now we can open the php_websocket.html file created earlier in the Chrome browser.
| Description | |
|---|---|
| Use the connection to send data | |
| Close the connection |