Web Sockets

Google's Ian Hickson—the HTML5 specification lead says:

Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make Web Sockets seriously interesting to Google.

Polling vs Web Sockets

• With polling, the browser sends HTTP requests at regular intervals and immediately receives a response.
• HTTP request and response headers contain unnecessary header information introducing latency
• Also two connections are opened to create a full-duplex communication over half-duplex HTTP
• Web Sockets define a full-duplex communication channel that operates through a single socket over the Web.

Web Socket Handshake

• Client and server upgrade from HTTP protocol during their initial handshake

Browser Request	Server Response
GET /text HTTP/1.1\r\n Upgrade: WebSocket\r\n Connection: Upgrade\r\n Host: www.websocket.org\r\n …\r\n	HTTP/1.1 101 WebSocket Protocol Handshake\r\n Upgrade: WebSocket\r\n Connection: Upgrade\r\n …\r\n

• Both text and binary data can be sent on full-duplex after upgrade as data strings in JavaScript
• Data is framed minimally with just 2 bytes
• Text frames use a terminator and binary frames use length prefix

Comet vs WebSockets

Writing web sockets is simple !!!

Simply establish connection and use open, error, message and close events as necessary

    var socket = new WebSocket('ws://localhost:8080/');
    socket.onopen = function () {
        alert('Connected!');
    };
    socket.onmessage = function (event) {
        alert('Received data: ' + event.data);
        socket.close();
    };
    socket.onclose = function () {
        alert('Lost connection!');
    };
    socket.send('hello, world!');
        

File access & Offline Storage

Local Storage : HTML5 allows to store normalized relational database which can be explored using SQL. You can cache content or use a web app to use when you’re not connected to the Internet. An e-commerce HTML5 application could allow people to add items to buy later and then finish the purchase when they are back online.

Gmail Mobile app uses AppCache - manifest

Canvas

• Allows easy manipulation of pixels without external plugins
• Auto resize example using simple canvas element:

  
      function resizeGame() { 
          var gameArea = document.getElementById('gameArea'); 
          var newWidth = window.innerWidth; 
          var newHeight = window.innerHeight; 
          gameArea.style.height = newHeight + 'px'; 
          gameArea.style.width = newWidth + 'px'; 
          var gameCanvas = document.getElementById('gameCanvas');
          gameCanvas.width = newWidth; 
          gameCanvas.height = newHeight; }
              

• With the aid of JS, canvas 3D can make stunning visual effects

Canvas 3D (WebGL)

    <canvas id="canvas" width="858" height="220"></canvas>

    <script>
      var gl = document.getElementById("canvas").getContext("expt-webgl");
      gl.viewport(0, 0, canvas.width, canvas.height);
      ...
    </script>
        

Multimedia

Audio and Video

The tracks are loaded the same way all the other game effects are loaded with XMLHttpRequests and the arraybuffer response type and stored in buffers. They are played using <audio> and <video> HTML5 tags

Plugin free access to camera/microphone

Courtesy: photobooth, by Google

HTML5 Audio

Web Audio API createMediaSourceElement() Example

Courtesy: Web Audio API createMediaSourceElement() Example, Google

HTML5 Video Destruction

Refer: Blowing HTML5 video and mapping it into 3D space