Single threaded UI

• setTimeout
• setInterval
• requestAnimationFrame (prefixed: IE10, FF8, Chrome 16)

Useful for heavy JS loads, such as...

• calculate prime numbers
• client-side database operations
• large JSON string parsing
• image / video processing

Access to:

• navigator
• location object
• Object, Array, Date, Math, String objects
• XMLHttpRequest object
• setTimeout() and setInterval() methods

but not the DOM or caller

• Chrome 4
• Safari 4
• Firefox 3.5
• Opera 10.6
• IE 10
• iOS5+, BB6+, MeeGoN9, OpMob. Not on android or opera mini

Create a worker

var workerName = new Worker('javascriptFile.js');

Communicate with worker

workerName.postMessage(message_for_worker);

Listen to worker

self.onmessage = function (event) { 
	var theMessage = event.data;
}

Error Handling

self.onerror = function(error){
	var caller = error.filename;
	var errorLineNumber = error.lineno;
    var errorMsg = error.message;
}

OLD: Solutions: JSON, Proxy, PHP CURL, iFrames

New Solutions: CORS, Cross-document Messaging

Cross-Origin Resource Sharing

Method of performing XMLHttpRequests across domains

Need correct headers sent and received

Allows responses to permitted origin domains (or * if public)

IE8 - XDomainRequest Object

IE10 & modern browsers: XMLHttpRequest

• Chrome 4
• Safari 4
• Firefox 3.5
• Opera 12
• IE 8 / 10
• Not opera mini, BB, HP✆, OperaMini, Win✆

Request Headers

Origin: http://requestingdomain.com
Access-Control-Request-Headers: PASSPHRASE
Access-Control-Request-Method:POST

Response Headers

Access-Control-Allow-Origin: * # or domain
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Headers: PASSPHRASE
Access-Control-Max-Age: 86400

<httpProtocol>
  <customeHeaders>
    <add name="Access-Control-Allow-Origin" value="*"/>
  </customeHeaders>
</httpProtocol>

CORS feature detection withCredentials Property

if (XMLHttpRequest) {
var request = new XMLHttpRequest();
var url = http://otherserver.com/resource;

// FEATURE DETECTION
if (request.withCredentials !== undefined) {

    
    request.open('GET', url, true);
    request.onreadystatechange = handleEvent;
    request.send();
}
}

Read the http headers

Similar, but sends http cookie header with request (not the default)

if (XMLHttpRequest) {
    var request = new XMLHttpRequest();
    var url = http://otherserver.com/resource;
    
    // FEATURE DETECTION
    if (request.withCredentials !== undefined) {
         request.open('GET', url, true);
         request.withCredentials = "true";
         request.onreadystatechange = handler;
         request.send();
      }
}

Read the http headers

get "preapproval" for request

1. Send OPTIONS header from requestor
   is reqest safe to send
2. Other domain responds:
3. Requestor makes request

Code snippet →

Read the http headers

var request = new XMLHttpRequest();
var url = 'http://otherdomain.com/file';
var requestHistoryText;
var body = 'some text';
function callOtherDomain(){
    if(request)  {
        request.open('POST', url, true);
        request.setRequestHeader('X-MADEUP', 'pingpong');
        request.setRequestHeader('Content-Type', 'application/xml');
        request.onreadystatechange = handleEvent;
        request.send(body); 
    } else { console.log("Request Failed"); }
}
function handleEvent(evtXHR) {
    if (request.readyState == 4) {
        if (request.status == 200)  {
            var response = request.responseText;
            requestHistoryText = document.createTextNode(response);
            var textDiv = document.getElementById("textDiv");
            textDiv.appendChild(requestHistoryText);
        } else {
            console.log("request Errors Occured " + request.readyState + " and the status is " + request.status);
        }
    } else {
        dump("currently the application is at" + request.readyState);
    }
}

otherWindow.postMessage(message, targetOrigin);

otherWindow

reference to other window via iframe contentWindow property, window.open return object or index value of window.frames

message

Data to be sent to otherWindow

targetOrigin

Security feature: Specifies what the origin of otherWindow must be for the event to be dispatched

otherWindow needs to listen for message

• Chrome
• Safari 4
• Firefox 3
• Opera 9.5
• IE 8
• Supported Android, iOS, Opera Mini

window.addEventListener("message", handleMessage, false);  
  
function handleMessage(event) {  
  if (event.origin !== "http://messageOriginator.com")  
    return;  
  
  // safe ... handle message
  var receivedMsg = event.data;
  var receivedFromWindow = event.source;
    
}

origin

data

Data received from message

source

Reference to sending window, enables 2-way communication

ALWAYS VERIFY origin AND source TO
AVOID MALICIOUS CODE

Also, dont' include message listener if none expected

And, always verify the syntax of the received message.

Half duplex solutions that are immediately old, and require http requests (including sending headers (with) cookies back and forth)

• HTTP requests & Response
• AJAX - asynchronous requests & responses, including polling

• two-way communication with a remote host
• Full-duplex communication channel
• Operates through a single socket
• Reduced network traffic & latency
• Handle proxies and firewalls
• upstream and downstream over a single connection
• Less server stress → more concurrent connections

• Chrome 4 (old)
  14 (new)
  
• Safari 5 (old)
  
  
• Firefox 4 (old)
  6 (prefix)
  11
• Opera 11 (old)
  
  
• IE 10
  
  
• Old syntax supported iOS & OperaMobile. BB. Not Android, AMZ or O-Mini

GET /chat HTTP/1.1
Connection: Upgrade 
Host: example.com
Origin: http://example.com 
Sec-WebSocket-Key1: 284 ^rI 2 447 8 Me1*V 8*
Sec-WebSocket-Key2: 30]8N763$84 12>*
Upgrade: WebSocket 
64:6E:AC:0C:FD:90:8A:51*   *(Random tokens for 16 byte token)

HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/chat
79:C5:C1:29:4A:60:8B:34:66:D5:61:10:C2:0C:4F:AA *The token

Request headers from the client plus the 8 byte token to say that the client handshake has been read. Once handshake established, the server can send messages to client

// ready state
CONNECTING = 0
OPEN = 1
CLOSED = 2
readyState
bufferedAmount

// networking
onopen
onmessage
onclose
send(data)
close()