HTML5 WebSocket

WebSocket is a protocol that HTML5 began to provide for full-duplex communication on a single TCP connection.

WebSocket makes the data exchange between the client and the server easier, allowing the server to actively push data to the client. In the WebSocket API, the browser and the server only need to complete a handshake, and a persistent connection can be created directly between the two, and two-way data transmission can be carried out.

In the WebSocket API, the browser and the server only need to do a handshake action, and then a fast channel is formed between the browser and the server. Data can be transferred directly between the two.

Nowadays, in order to implement push technology, many websites use Ajax polling. Polling is at a specific time interval (such as every 1 second), the browser sends an HTTP request to the server, and then the server returns the latest data to the client's browser. This traditional mode brings obvious shortcomings, that is, the browser needs to continuously send requests to the server, but the HTTP request may contain a long header, and the really valid data may be only a small part, which is obviously wasteful. A lot of bandwidth and other resources.

The WebSocket protocol defined by HTML5 can better save server resources and bandwidth, and can communicate in more real-time.


The browser sends a request to establish a WebSocket connection to the server through JavaScript. After the connection is established, the client and server can directly exchange data through the TCP connection.

After you get the Web Socket connection, you can send data to the server through the send() method, and receive the data returned by the server through the onmessage event.

The following API is used to create WebSocket objects.

var Socket = new WebSocket(url, [protocol]);

The first parameter url in the above code specifies the URL of the connection. The second parameter protocol is optional and specifies acceptable sub-protocols.

WebSocket Properties

The following are the properties of the WebSocket object. Suppose we used the above code to create a Socket object:


The read-only attribute readyState represents the connection state, which can be the following values:

  • 0: Indicates that the connection has not been established yet.

  • 1: Indicates that the connection has been established and communication is possible.

  • 2: Indicates that the connection is being closed.

  • 3: Indicates that the connection has been closed or the connection cannot be opened.


The read-only attribute bufferedAmount has been put into the queue waiting for transmission by send(), but the number of UTF-8 text bytes that have not been sent.

WebSocket Events

The following are related events of the WebSocket object. Suppose we used the above code to create a Socket object:

eventEvent handlerdescribe
openSocket.onopenTriggered when the connection is established
messageSocket.onmessageTriggered when the client receives server data
errorSocket.onerrorTriggered when a communication error occurs
closeSocket.oncloseTriggered when the connection is closed

WebSocket Methods

The following are the relevant methods of the WebSocket object. Suppose we used the above code to create a Socket object:


Use connection to send data


Close the connection

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 a normal HTTP request and contains some additional header information. The additional header information "Upgrade: WebSocket" indicates that this is an application protocol. For upgraded HTTP requests, the server parses these additional headers and then generates a response message to return to the client. The WebSocket connection between the client and the server is established, and both parties can freely transmit information through this connection channel, and the connection will be Continue to exist until either the client or the server actively closes the connection.

HTML and JavaScript on The Client Side

Most browsers currently support the WebSocket() interface. You can try examples in the following browsers: Chrome, Mozilla, Opera and Safari.

tutorialfish_websocket.html file content

   <meta charset="utf-8">
   <title>Tutorial Fish (</title>
      <script type="text/javascript">
         function WebSocketTest()
            if ("WebSocket" in window)
               alert("Your browser supports WebSocket!");
               // Open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
               ws.onopen = function()
                  // Web Socket is connected, use send() method to send data
                  ws.send("Send data");
                  alert("Data sending...");
               ws.onmessage = function (evt)
                  var received_msg =;
                  alert("Data has been received...");
               ws.onclose = function()
                  // Close websocket
                  alert("The connection is closed...");
               // The browser does not support WebSocket
               alert("Your browser does not support WebSocket!");
      <div id="sse">
         <a href="javascript:WebSocketTest()">Run WebSocket</a>

Install pywebsocket

Before executing the above procedure, we need to create a service that supports WebSocket. Download mod_pywebsocket from pywebsocket , or use the git command to download:

git clone

mod_pywebsocket requires python environment support

mod_pywebsocket is an Apache HTTP Web Socket extension. The installation steps are as follows:

  • Unzip the downloaded file.

  • Enter the pywebsocket directory

  • Executing an order´╝Ü

$ python build

$ sudo python install

  • View documentation description:

    $ pydoc mod_pywebsocket
  • Open service

    Execute the following commands in the pywebsocket/mod_pywebsocket directory:

    $ sudo python standalone . py - p 9998 - w ../ example /

    The above command will start a service with port number 9998, use -w to set the directory where the handler is located.

    Now we can open the tutorialfish_websocket.html file created earlier in the Chrome browser. If your browser supports WebSocket(), click "Run WebSocket", you can see the pop-up window of each step of the whole process.

    After we stop the service, it will pop up "connection closed...".