HTML5 WebSocket

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.

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

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.

WebSocket property

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.

WebSocket event

The following are related events for WebSocket objects. Suppose we created the Socket object using the above code:
    EventEvent handler    Description
    OpenSocket.onopenTriggered when the connection is established
    MessageSocket.onmessageTriggered when the client receives server data
    ErrorSocket.onerrorTriggered when communication error occurs
    CloseSocket.oncloseTriggered when the connection is closed


WebSocket method

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

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. 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.

Client HTML and JavaScript

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

Install pywebsocket

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

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 build 
$ sudo python install

View the documentation description:
$ pydoc mod_pywebsocket

Open service
Execute the following command in the pywebsocket/mod_pywebsocket directory:

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

The above command will open a service with port number 9998 and -w to set the directory where the handler 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:

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :