WebSocket is a protocol that HTML5 began to offer for full-duplex communication over a single TCP connection.
In the WebSocket API, the browser and the server only need to do a handshake, and then a fast channel is formed between the browser and the server. Data can be transferred directly between the two.
When you get a Web Socket connection, you can send data to the server via the send() method and receive the data returned by the server via the onmessage event.
The following APIs are 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 an acceptable sub-protocol.
The following are the properties of a WebSocket object. Suppose we created the Socket object using the above code:
| Attributes|| Description|
The read-only property readyState represents the connection state and can be the following values:
0 - indicates that the connection has not been established.
1 - Indicates that the connection has been established and communication is possible.
2 - Indicates that the connection is closing.
3 - Indicates that the connection has been closed or the connection cannot be opened.
|The read-only property bufferedAmount has been put into the queue waiting for transmission in send(), but the number of UTF-8 text bytes has not yet been issued.|
The following are related events for WebSocket objects. Suppose we created the Socket object using the above code:
| Event||Event handler|| Description|
| Open||Socket.onopen||Triggered when the connection is established|
| Message||Socket.onmessage||Triggered when the client receives server data|
| Error||Socket.onerror||Triggered when communication error occurs|
| Close||Socket.onclose||Triggered when the connection is closed|
The following are related methods for WebSocket objects. Suppose we created the Socket object using the above code:
| Method|| Description|
| Socket.send()||Send data using a connection|
| Socket.close()||Close the connection|
The WebSocket protocol is essentially a TCP-based protocol.
In order to establish a WebSocket connection, the client browser first initiates an HTTP request to the server. This request is different from the usual HTTP request and contains some additional header information. The additional header "Upgrade: WebSocket" indicates that this is an application protocol. The upgraded HTTP request, the server side parses the additional header information and then generates a response message to return to the client. The client and server side WebSocket connection is established, and the two parties can freely transmit information through the connection channel, and the connection will be It persists until one of the client or server side actively closes the connection.
Most browsers currently support the WebSocket() interface, and you can try out instances in the following browsers: Chrome, Mozilla, Opera, and Safari.
Php_websocket.html file content
Before executing the above program, we need to create a service that supports WebSocket. Download mod_pywebsocket from pywebsocket or download it using the git command:
Git clone https://github.com/google/pywebsocket.git
Mod_pywebsocket requires python environment support
Mod_pywebsocket is a Web Socket extension for Apache HTTP. The installation steps are as follows:
Unzip the downloaded file.
Go to the pywebsocket directory.
Excuting an order:
$ python setup.py build
$ sudo python setup.py install
View the documentation description:
$ pydoc mod_pywebsocket
Execute the following command in the pywebsocket/mod_pywebsocket directory:
$ sudo python standalone.py -p 9998 -w ../example/
The above command will open a service with port number 9998 and -w to set the directory where the handler echo_wsh.py is located.
Now we can open the php_websocket.html file created earlier in the Chrome browser. If your browser supports WebSocket(), click on "Run WebSocket" and you will see the pop-up window for each step of the process. The process Gif demonstrates: