Hello, world!

HTML 5 WebSockets HTML

WebSockets is one of the new features of HTML5. In the HTML tutorial you will be able to learn about the webSocket attributes, methods, events, installing pywebsocket, client side HTML & JavaScript code and how to start the server.



HTML5 – WebSockets

The WebSocket was introduced with bi-directional web communication and connection management.
It was developed through the HTML5 program, the WebSocket JavaScript interface.
It controls a single socket connection over which messages can be sent between client and server by calling a send() scheme and receive data between server to client by an onmessage event handler.
 
This is an example of API which builds a new WebSocket object.
var Socket = new WebSocket(url, [protocal] );
 
The first argument here, url, specifies the URL or web address to which to connect.
The second element, protocol is not required, but if present, it indicates a sub-protocol that the server must support to achieve a successful connection.

WebSocket Attributes

These are the attribute of WebSocket object. Supposing we built Socket object as stated above:
Socket.readyState- The readonly attribute readyState corresponds to the condition of the connection. It can have the subsequent values:
0 - This value specifies that the connection has not yet been secured.
1 - This value specifies that the connection is secured and communication can be established.
2 - This value specifies that the connection is at work toward the closing handshake.
3 - This value specifies that the connection has been ended or could not be opened.
Socket.bufferedAmount - The readonly attribute bufferedAmount corresponds to the amount of bytes of UTF-8 text that have been filed by means of send() method.

WebSocket Methods

These are the methods related with WebSocket object. Assuming we created Socket object as mentioned above −
Socket.send() - The send(data) method transmits data using the connection.
Socket.close() - The close() method would be used to terminate any existing connection.

WebSocket Events

These are the events associated with WebSocket object. Supposing we built Socket object as stated above:
open (Event handler: Socket.onopen) - When socket connection is secured, this event takes place.
message (Event handler: Socket.onmessage) - When client acquires data from server, this event takes place.
error (Event handler: Socket.onerror) - When there is some error in communication, this event takes place.
close (Event handler: Socket.onclose) - When connection has ended, this event takes place.

WebSocket Example

The WebSocket is a bidirectional TCP socket among the client and the server.
The socket sets out as a HTTP connection and once a HTTP handshake occurs, it will "Upgrades" to a TCP socket. Both sides can submit data  after the handshake.

Installing pywebsocket

It is required to have a server which supports WebSocket before you test above client program.
Download and install mod_pywebsocket-x.x.x.tar.gz from pywebsocket which intends to give a WebSocket standalone server and a Web Socket extension for Apache HTTP Server.
 
Follow these guidelines:
1. Search for the downloaded file, then unzip and untar.
2. Navigate to the directory pywebsocket-x.x.x/src/.
3. Run $python setup.py build
4. Run $sudo python setup.py install
5. Then read document by:
6. $pydoc mod_pywebsocket
7. This package will install it into your python environment.

Client Side HTML & JavaScript Code

Use the latest version of Chrome, Mozilla, Opera and Safari or web browsers supporting WebSocket() interface to attain the actual output.

HTML code example client side html & javaScript code:

<!DOCTYPE HTML>
<html>
   <head>            
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("WebSocket is supported by your Browser!");
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                                                
               ws.onopen = function()
               {
                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
                                                
               ws.onmessage = function (evt)
               {
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
                                                
               ws.onclose = function()
               {
                  // websocket is closed.
                  alert("Connection is closed...");
               };
                                                
            }
            else
                                                
            {
               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>                        
   </head>            
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">Run WebSocket</a>
      </div>
   </body>            
</html>

Starting the Server

Navigate to the pywebsocket-x.x.x/src/mod_pywebsocket folder and execute the following command: $sudo python standalone.py -p 9998 -w ../example/
After running the command it will start the server listening at port 9998, then use the handlers directory identified by the -w option where our echo_wsh.py exists.
Run the the html file you built in the beginning via Chrome browser. If WebSocket() is supported in your browser, then you would get alert implying that your browser supports WebSocket and lastly when "Run WebSocket" is clicked a Goodbye message sent by the server script will occur.