Handling real-time data on the web

jQuery Conference San Diego 2014

Justin Ribeiro
[email protected]

@justinribeiro +Justin Ribeiro justinribeiro

Slides: http://goo.gl/tzXnHA

Demo #1: the bottom left corner

If the wifi is working data is a movin'

• My Google Glass timer application pushing data to a broker
• The MQTT Broker is hooked to a web socket server instance
• We're listening in an updating things as fast as we can

What are we talking about today

1. Why?
2. Server Sent Events and Websockets
3. #perfmatters: faster I say
4. $.Callback()

But Justin what about...

• WebRTC Data Channels
  • I have high hopes
  • RTCDataChannel API
  • See: WebRTC data channels @ HTML5 ROCKS
• Old browsers
  • Blah blah blah old IE...
  • Blah blah blah old Android...

Why SSE's and WebSockets?

"I've got XHR and it's awesome."

• XHR is great for the transactional
• SSE is great for text streaming to client
• WebSockets are great for bi-directional low-latency text/binary

They're complimentary

It depends on your use case

No magic bullets for sale

• The propagation latency of the data packets is the same
• SSE and WebSockets only remove the message queuing latency
• You can't beat the speed of light
• Good Read: High Performance Browser Networking

Real time looks easy.

Server-Sent Event Wire Up

var myServerSentEvent = new EventSource("something.php");

myServerSentEvent.onopen = function () {
    // I'm open for business
};

myServerSentEvent.onmessage = function(event){
  // Steam me some text
};

myServerSentEvent.onerror = function (event) {
  // Call John: ask him to press reset button on rack 2
};
          

We gotta talk about IE / Android

Hey, you said you weren't going to talk about them!

• Sure, the old IE 6/7/8 doesn't implement EventSource
• Problem is, neither do the newer IE 9/10/11
• Only the most recent version of Android (4.4 supports it)
• See: Modernizr Wiki for polyfill options

SSE: the good parts

• Can only be UTF-8 encoded text: apply app logic and go
• event-steam = HTTP streaming = gzip it!
• Memory-efficent: once a message is processed, it's gone.
• Custom events

myServerSentEvent.addEventListener("someEventTag", function(event){...});
            

SSE: the not so good parts

• Can only be UTF-8 encoded text: no binary (hint: that's what WebSockets are for)
• Lucy, Ethel and the choclate problem: no sending back
• The problem with the polyfill options: XHR transport overhead

WebSocket Wire Up

var myWebSocket = new WebSocket("ws://somewhere");
                
myWebSocket.onopen = function(event){
  // I'm open for business
};

myWebSocket.onclose = function(event){
  // what? I closed? What happened?
};

myWebSocket.onmessage = function(event){
  // ahhh some data
  // I think it's a cat
};

myWebSocket.onerror = function(event){
  // no one worries about icebergs
};
          

The devil is in the details

• Are we text or binary?
• Did we implement the compression or did the server on the frame?
• Are we talking in a subprotocal?
• Wait, what's in the payload?

Frame up that frame, Mr. McFrame

myWebSocket.onmessage = function(event){
  if(event.data instanceof Blob) {
    // an immutable picture of my kids
  } else {
    // some text describing my kids
  }
};
          

That Socket needs to take a hint

I don't have an immutable, just make it an arraybuffer

myWebSocket.binarytype = "arraybuffer";

myWebSocket.onmessage = function(event){
  if(event.data instanceof ArrayBuffer) {
    // let's split this buffer up
  } else {
    // some text describing my kids
  }
};
          

Where's my compression?

• Could use Sec-WebSocket-Extensions: permessage-deflate if browser/server support
• Could be custom compressing your data: offsets of things

myWebSocket.onmessage = function(event){
  if(event.data instanceof ArrayBuffer) {
  
    // known: byte offsets and big-endian
    var dataView = new DataView(event.data);
    var sensorId = dataView.getUint8(0);
    var temp     = dataView.getUint16(1); 
    var lux      = dataView.getUint8(3);
  
  }
};
          

The websocket rabbit hole

• Lots of options and implementation choices to be made
• The flexibility results in application complexity

Communication required.

Pssf, I just need JSON send it now

#perfmatters: Your bandwidth

Demo #02: Sensor A1 Reporting ° lx

{
  "topic": "office/sensors/a1/out",
  "message": {
    "degF": 71.9,
    "lux": 222.8
  }
}
          

93 bytes. A tiny perfect JSON world.

But it's not a perfect world

It's always easy when there's only one.

• JSON can be huge
• Resolution can be fast (~20 a second)
• You can have lots of them!

(93 bytes * 20/second) = 1.8kb.

100 sensors = 180kb a second!

Demo #03 - Sensors

Everything is amplified

#perfmatters: DOM DOM DOM

The magical Checklist-O-DOM-update

1. Does this data need to update the DOM?
2. Can I batch it with other updates?
3. Should I be holding that DOM element for later?
4. What's my reflow look like?

If you can, cache your update target

Bad selectors will ruin you: be specific, cache it, use it

// We'll keep it around for a while  
if (!JDR.sensors.cache[topic]) {
  var eleName = topic.replace(/\//g, "-");
  JDR.sensors.cache[topic] = $("#" + eleName);
  JDR.sensors.cache[topic]['o1'] = JDR.sensors.cache[topic].find('.o1');
  JDR.sensors.cache[topic]['o2'] = JDR.sensors.cache[topic].find('.o2');
}
          

This is not a new concept. You should be doing this even if you're not using real time data.

Update a DOM element

When in need of pure speed, textContent can be your friend.

// We'll keep it around for a while  
var myElementToUpdate = $("#glass-timer");

//... WebSocket / EventSource Wire Up

// Update that text!
myElementToUpdate[0].textContent = data.message;
          

Use Layout Boundries

You're updating the DOM, which means it's going to recalc

Limit the scope as much as you can.

/* Layout Boundary for updating Glass stat pack */
#statpack {
  left: 10px;
  bottom: 10px;
  width: 250px;
  height: 100px;
  overflow: hidden;
  position: absolute;
}
          

Great tool: paullewis/Boundarizr

Great read: Introducing 'layout boundaries'

Just the facts ma'am

When #perfmatters you can't be afraid to diverge as needed

By the numbers: JS Perf Test - $.html(), $.text(), textContent

Glass stat pack: from 2.1ms to 0.5ms

I'm not seeing a lot of jQuery here.

Let's add some.

$.Callbacks() = @#$%^ awesome

Internally used by $.ajax() and $.Deferred() components

Humm, websocket/SSE with $.Deferred() support sounds nice.

Let's do that.

jquery.websocket.callback.js

• Wraps the WebSocket API and uses $.Callbacks()
• Uses a pubsub / observer pattern topic system

Wire Up

Pretty straight forward

var myBrokerEcho = $.websocket({ 
    url: "ws://echo.websocket.org/"
});

myBrokerEcho.topic( "websocket.onOpen" ).subscribe( myOpenMethod );

myBrokerEcho.topic( "websocket.onMessage" ).subscribe( myMessageMethod );
          

Internally what's happening?

Pretty straight forward

// ...
ws.connection.onopen = function(event){
    ws.topic( "websocket.onOpen" ).publish( event.data );
};

ws.connection.onclose = function(event){
    ws.topic( "websocket.onClose" ).publish( event.data );
};

ws.connection.onmessage = function(event){
  // ... doing some other stuff
  ws.topic( "websocket.onMessage" ).publish( data );
};

ws.topic( "websocket.send" ).subscribe( this.send );
// ...
          

Wait what's with the send?

Internally, it's subscribing to a topic and using it's own method to send back to the open socket.

ws.topic( "websocket.send" ).subscribe( this.send );
          

How do we send to it?

Well this should work right?

Let's send some data to the socket!

var myBrokerEcho = $.websocket({ 
    url: "ws://echo.websocket.org/"
});

// Oh it's angry
myBrokerEcho.topic( "websocket.send" ).publish("Send some data");
          

It's not happy, how do we fix this?

With a $.Deferred() of course

You can't send something to the socket before the open is finished.

myBrokerEcho.topic( "websocket.onOpen" ).subscribe( myOpenMethod );

var dfd = $.Deferred();
var topic = myBrokerEcho.topic( "websocket.send" );
dfd.done( topic.publish );

function myOpenMethod( value ) {
  dfd.resolve( "I'm resolved!" );
}
          

So we create a $.Deferred() and resolve it after open

What about SSE?

I've got you covered: jquery.eventsource.callback.js

var myScript = $.eventsource({ 
    url: "sse.php"
});

myScript.topic( "eventsource.onMessage" ).subscribe( onMessage );

function onMessage( value ) {
  console.log("Incoming Message!", value);
}
          

Could use some event channel support

Early and young

• Both libs are pretty early on in development.
• Your mileage may vary.

jQuery Plugin Creation Totals

Me: 2

Ben Alman (@cowboy): 7634*

* Approximate: haven't checked his repo today

I am not catching up.

Wrapping up

• Real time data is hard.
• Look beyond your code window.
• $.Deferred() + WebSockets = happiness

Source and what not

• justinribeiro/jquery.websocket.callback
• justinribeiro/jquery-eventsource-callback
• justinribeiro/glass-gdk-timer-mqtt

The End

Thank you!

@justinribeiro +Justin Ribeiro justinribeiro