HTML5 - WebSockets Tutorial
Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessageevent handler.
Following is the API which creates a new WebSocket object.
var Socket = new WebSocket(url, [protocal] );
Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.
Following are the attribute of WebSocket object. Assuming we created Socket object as mentioned above:
The readonly attribute readyState represents the state of the connection. It can have the following values:
The readonly attribute bufferedAmount represents the number of bytes of UTF-8 text that have been queued using send() method.
Following are the events associated with WebSocket object. Assuming we created Socket object as mentioned above:
|open||Socket.onopen||This event occurs when socket connection is established.|
|message||Socket.onmessage||This event occurs when client receives data from server.|
|error||Socket.onerror||This event occurs when there is any error in communication.|
|close||Socket.onclose||This event occurs when connection is closed.|
Following are the methods associated with WebSocket object. Assuming we created Socket object as mentioned above:
The send(data) method transmits data using the connection.
The close() method would be used to terminate any existing connection.
A WebSocket is a standard bidirectional TCP socket between the client and the server. The socket starts out as a HTTP connection and then "Upgrades" to a TCP socket after a HTTP handshake. After the handshake, either side can send data.
At the time of writing this tutorial, there are only few web browsers supporting WebSocket() interface. You can try following example with latest version of Chrome, Mozilla, Opera and Safari.
Before you test above client program, you need a server which supports WebSocket. Download mod_pywebsocket-x.x.x.tar.gz from pywebsocket which aims to provide a Web Socket extension for Apache HTTP Server ans install it following these steps.
- Unzip and untar the downloaded file.
- Go inside pywebsocket-x.x.x/src/ directory.
- $python setup.py build
- $sudo python setup.py install
- Then read document by:
- $pydoc mod_pywebsocket
This will install it into your python environment.
Start the Server
Go to the pywebsocket-x.x.x/src/mod_pywebsocket folder and run the following command:
$sudo python standalone.py -p 9998 -w ../example/
This will start the server listening at port 9998 and use the handlers directory specified by the -w option where our echo_wsh.py resides.
Now using Chrome browser open the html file your created in the beginning. If your browser supports WebSocket(), then you would get alert indicating that your browser supports WebSocket and finally when you click on "Run WebSocket" you would get Goodbye message sent by the server script.