HTML5 - WebSockets
Websocket's are a next-gen two-way communication technology that is meant for applications on the web that operates over a single socket and is made available through a Javascript interface in HTML5 supported browsers.
Immediately you get a web socket connection to the web server, you'll have the access to send data from the web browser to the server just by calling the send() and also accept incoming data from the server to the web browser by an onmessage event handler.
The code below is the API that initiates a new WebSocket object as specified by HTML5
var Socket = new WebSocket(url, [protocol] );
Here first parameter, URL, specify the URL to which to connect. The second parameter, protocol is mainly optional and not always necessary, and if present specifies a sub-protocol that the server must support for the connection to be successful.
WebSocket Attributes
The following are the attribute that is available for the WebSocket object.
Sr.No. | Attribute & Description |
---|---|
1 |
Socket.readyState The read-only attribute readyState stands for the current state of the connection. It can have the following values:
|
2 |
Socket.bufferedAmount The bufferedAmount stands for the value/number of bytes of UTF-8 text that have been queued using the send() function and it is read-only. |
WebSocket Events
The following are the events that are available for the WebSocket object.
Event | Event Handler | Description |
---|---|---|
open | Socket.onopen | This event is initiated when the socket connection is established. |
message | Socket.onmessage | This event is initiated when the client receives data from the server. |
error | Socket.onerror | This event is initiated when there is an error in communication. |
close | Socket.onclose | This event is initiated when the connection is closed. |
WebSocket Methods
The following are the methods that are available to work with the WebSocket object.
Sr.No. | Method & Description |
---|---|
1 |
socket.send() The send(data) method sends data using the connection. |
2 |
Socket.close() The close() method is used to terminate an existing connection. |
WebSocket Example
A WebSocket is a two-direction TCP socket that occurs between the client and the server. The TCP socket initiates as an HTTP connection and is then upgraded to a TCP socket after an HTTP handshake. After the HTTP handshake, both the client and the server can transmit data.
Client-Side HTML & JavaScript Code
There are currently only a few web browsers that support the WebSocket() interface. You can test out the code below with the newest version of Chrome, Mozilla, Opera, and Safari.
<!DOCTYPE HTML> <html> <head> <script type = "text/javascript"> function WebSocketTest() { if ("WebSocket" in window) { alert("WebSocket is availabe in your Browser!"); // Let us initiate a web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket is connected, let's transmitt data using send() ws.send("This is a message"); 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 terminated..."); }; } else { // The browser doesn't have 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
Just before you test the code above, you need to install a server that has support for WebSocket. You have to download mod_pywebsocket-x.x.x.tar.gz from pywebsocket which main aim is to create a Web Socket extension for the Apache HTTP server and it can be installed using the following steps:
1. Unzip and untar the file you downloaded.
2. Go into pywebsocket-x.x.x/src/ directory.
3. Type $python setup.py build into your terminal
4. Type $sudo python setup.py install into your terminal
5. Then open the document by typing:
$pydoc mod_pywebsocket
This will install the package into your python environment.
Starting the Server
Navigate to the pywebsocket-x.x.x/src/mod_pywebsocket directory and run the following:
$sudo python standalone.py -p 9998 -w ../example/
This will kickstart the server and it will be listening at port 9998 and use the handlers directory listed by the -w option where our echo_wsh.py is.
Now making use of the Chrome browser, open the HTML file we created from the beginning. If your browser has support for WebSocket(), then an alert will be displayed indicating that your web browser has support for WebSocket and then you can click on the "Run WebSocket" and you'll receive Goodbye message sent by the server script.