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:

  • 0 - indicates that the connection has not been established.

  • 1 - indicates that the connection is established and can be communicated.

  • 2 - Indicates that the connection is being closed.

  • 3 - Indicates that the connection is closed or cannot be opened.

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:

HTML5 WebSocket

When we stop the service, the "Connection is closed..." pops up.