HTML 5 - Web Sockets and Microdata

In this blog, I will continue to look at the new features of HTML5. This time I will pay attention to web sockets and microdata. Read on to learn more.

Web Sockets
  • web sockets are a mechanism to provide full-duplex communication over a single TCP socket. 
  • A socket is basically a unique combination of local socket address, remote socket address and protocol (TCP, UDP).
  • socket address is combination of IP address and port number
  • HTTP by default is half-duplex i.e. at any given point of time, the communication can be only in one direction. 
  • In case of web socket, client sends request to connect. Once the connection is made, client and server can communicate without the need to connect for every request. This comes in very handy for chat programs.
  • The other advantage of web sockets is performance. Normal HTTP headers can be 100s of bytes long but socket header is just around 2 bytes of data.
  • To use sockets in HTML5 is pretty easy. Once you have a server which allows for sockets, we can write the code as shown below to start web socket communication.
// web socket
    $('#logWebSocket').append("<li>Connecting to web server...</li>");
    var server = new WebSocket('ws://localhost:8181/server');
    server.addEventListener("message", msgWebSockHandler, false);
    server.addEventListener("open", openWebSockHandler, false);
    server.addEventListener("close", closeWebSockHandler, false);
    server.addEventListener("error", errorWebSockHandler, false);

    function msgWebSockHandler(e) {
        $('#logWebSocket').append("<li>Server Says: " + e.data + "</li>");
    }

    function openWebSockHandler(e) {
        $('#logWebSocket').append("<li>Connected to web server</li>");
    }

    function closeWebSockHandler(e) {
        $('#logWebSocket').append("<li>Disconnected from web server</li>");
    }

    function errorWebSockHandler(e) {
        $('#logWebSocket').append("<li>Error: " + e + "</li>");
    }

    $('#inputSocket').change(function (e) {
        server.send(this.value);
    });
In this code, first, we get a new socket by doing a new on WebSocket and provide it the server address. After that, we register event handlers for message, open, close and error. As you can see in the code, I am just outputting whatever data was sent back by the server. In the last piece of code,  I have an input text box on the page. Everytime, the text changes in the text box, jquery sends the text to the server.

To create the server, I used sample code from nugget.codeplex.com. This is a very basic developement server. For production environments, something more robust should be used. Here is the image of server -
The client looks something like this -
Microdata
  • Microdata is an HTML5 specification which helps machines to read and understand the data. It allows to put semantics within existing content on web pages.
  • Search engines, web crawlers, browsers look for this data to provide other better user experience such as search results, snippets etc.
  • A collection of commonly used microdata vocabularies is located at http://data-vocabulary.org. This includes Person, Product, Offer, Event etc.
  • Some of the keywords used when describing microdata are -
    • itemscope - defines a container. For ex, if you put itemscope in a div element, that means that the descendants of this div element are going to contain the information about it. 
    • itemtype - defines the url to the vocabulary. It tells what kind of data is contained in this itemscope.
    • itemprop - indicates that it holds the value of specified item property.
    • itemid - to uniquely identify at the scope level
at
Labels: ,