postMessage

// listener (iframe.html)
$(window).on('message', function(e){
	alert(e.data + "!!1!one!");
})



// parent (main.html)
$('#my-frame').get(0).postMessage('Howdy', '*');

LocalStorage

+ storage events

localStorage.setItem('my-key','the data');

window.addEventListener("storage", function(e){

 if(e.key == 'my-key')
  console.log(e.newValue); // 'the data'

}, false);

if(window.top === window){

// store the new slide index
Reveal.addEventListener('slidechanged', function(e) {
  var send = e.indexh + ',' + e.indexv;
  localStorage.setItem('rslide',send);
});

// restore 
window.addEventListener("storage", function(e){
  if(e.key == 'rslide'){
    var vals = e.newValue.split(',').map(parseFloat);
    Reveal.slide(vals[0],vals[1]);
  }
}, false);

}

WebSockets

"How the internet works"

var ws = new WebSocket('ws://example.com/');

ws.onmessage = function(event){
  console.log(event.data + '!!')
};

ws.send("Hello")

Demo

ws.send(<Blob>)

<input id="photo" type="file" accept="image/*" capture="camera" />

var client = new BinaryClient('ws://localhost:9000');

$('#photo').on('change', function(event){
    var file = event.target.files[0];
    client.send(file);
});

(BinaryClient - binaryjs.com)

Demo

webRTC

• MediaStream
• RTCPeerConnection
• RTCDataChannel

Demo