Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML5 Web Sockets

Web Sockets is a next-generation bidirectional communication technology for single socket web application and can send data across using scripts.

One can send data from browser to server by calling a send() method, and receive data from server to browser by "onmessage" event handler.

Below is the API which creates a new WebSocket object.

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

URL specifies the address and protocol is an optional argument which specifies the protocol it should adhere to.

WebSocket Attributes:

Below are the attribute of WebSocket object. Assuming we created Socket object as mentioned above:

AttributeDescription
Socket.readyState

The readonly attribute readyState provides the state of the connection. It can have the following values:

  1. 0 indicates that the connection is not yet established.

  2. 1 indicates that the connection is established and communication is possible.

  3. 2 indicates that the connection is going through the closing handshake.

  4. 3 indicates that the connection has been closed or could not be opened.

Socket.bufferedAmount

The readonly attribute bufferedAmount gives total number of bytes of UTF-8 text that have been queued using send() method.

WebSocket Events:

Below are the events associated with WebSocket object. Assuming we created Socket object as mentioned above:

EventEvent HandlerDescription
openSocket.onopenEvent triggered when socket connection is established.
messageSocket.onmessageEvent triggered when client receives data from server.
errorSocket.onerrorEvent triggered on error in communication.
closeSocket.oncloseEvent triggered when connection is closed.
WebSocket Methods:

Below are the methods associated with WebSocket object. Assuming we created Socket object as mentioned above:

MethodDescription
Socket.send()

Transmits data using connection.

Socket.close()

Used to Terminate any connection.

WebSocket Example:

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.

Client Side HTML & JavaScript Code:

All the latest web browsers support websockets.


<!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>
Install pywebsocket:

Before testing 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 and install it using following steps.

1.Unzip and untar the downloaded file.
2.Go inside pywebsocket-x.x.x/src/ directory.
3.$python setup.py build
4.$sudo python setup.py install
5.Then read document by:
6.$pydoc mod_pywebsocket

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 run the code you created in the beginning. If your browser supports WebSocket(), then you would get alert indicating that your browser supports WebSocket and after you click on "Run WebSocket" you would get "Goodbye message" sent by the server script.



Related Videos