HTML5 WebSocket
WebSocket is a protocol that HTML5 began to provide for full duplete communication on 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. Between the two, data can be transmitted directly to each other.
The browser makes a request to the server via JavaScript to establish a WebSocket connection, which allows the client and server to exchange data directly over the TCP connection.
When you get a Web Socket connection, you can send data to the server via send() and receive the data returned by the server through the onmessage event.
The following API is used to create a WebSocket object.
var Socket = new WebSocket(url, [protocal] );
The first parameter in the code above, url, specifies the URL of the connection. The second parameter, protocol, is optional and specifies an acceptable sub-protocol.
WebSocket property
The following are the properties of the WebSocket object. Let's say we created the Socket object using the code above:
Property | Describe |
---|---|
Socket.readyState |
The read-only property readyState represents the connection state and can be the following value:
|
Socket.bufferedAmount |
The read-only property bufferedAmount() has been put into the queue waiting to be transferred, but the number of UTF-8 text bytes has not yet been emitted. |
WebSocket event
The following are related events for the WebSocket object. Let's say we created the Socket object using the code above:
Event | The event handler | Describe |
---|---|---|
open | Socket.onopen | Triggered when the connection is established |
message | Socket.onmessage | Triggered when the client receives service-side data |
error | Socket.onerror | Triggered when an error occurs in the communication |
close | Socket.onclose | Triggered when the connection is closed |
WebSocket method
Here's how the WebSocket object is related. Let's say we created the Socket object using the code above:
Method | Describe |
---|---|
Socket.send() |
Use a connection to send data |
Socket.close() |
Close the connection |
WebSocket instance
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, which, in different from the usual HTTP request, contains additional header information, where the additional header information "Upgrade: WebSocket" indicates that this is an HTTP request for protocol upgrade, and the server side parses this additional header information and then generates the answer information to be returned to the client, client, and server-side WebSocket The connection is established, and both parties can freely pass information through the connection channel, and the connection persists until the client or server side actively shuts down the connection.
HTML and JavaScript for the client
Most browsers currently support the WebSocket() interface, and you can try examples in the following browsers: Chrome, Mozilla, Opera, and Safari.
w3cschool_websocket.html contents of the file
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <script type="text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上,使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭..."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">运行 WebSocket</a> </div> </body> </html>
Install pywebsocket
Before we can execute the above program, we need to create a service that supports WebSocket. Download from pywebsocket mod_pywebsocket or use the git command to download:
git clone https://github.com/google/pywebsocket.git
mod_pywebsocket require python environment support
mod_pywebsocket is a Web Socket extension of Apache HTTP, and the installation steps are as follows:-
Unzim the downloaded file.
-
Go to the pywebsocket directory.
-
To execute a command:
$ python setup.py build $ sudo python setup.py install
-
View the documentation description:
$ pydoc mod_pywebsocket
Turn on the service
The following commands are executed in the pywebsocket/mod_pywebsocket directory:
$ sudo python standalone.py -p 9998 -w ../example/
The above command opens a service with port number 9998 and uses -w to set up the directory where the handler echo_wsh.py is located.
Now we can open the file we created earlier w3cschool_websocket.html Chrome. If your browser supports WebSocket(), click "Run WebSocket" and you'll see a pop-up window at each step of the entire process, a gif demo of the process:
When we stop the service, the "Connection is closed..." pops up.