High Performance WebSocket

High Performance WebSocket @wesleyhales

@wesleyhales 1999 2015 2008 HTTP/1.1 WebSocket SSE HTTP/2 2006 2009
SPDY 2005 AJAX 2000 REST Real Time Enablers

In 2015, bidirectional client <-> server communication can only be
achieved with AJAX and/or WebSocket

@wesleyhales High Performance Browser Networking by @igvita Client Server Connectivity

@wesleyhales AJAX The underlying complexity is abstracted away. When you
make an AJAX request from the browser you don’t have to think about TCP.

@wesleyhales WebSocket Subprotocols, Fallbacks, Network When you send a message
over a WebSocket connection, you have to think about everything.

@wesleyhales http://blog.fanout.io/2014/06/24/you-might-not-need-a-websocket/

@wesleyhales Real Time? • Rapid client <-> server communication •
Real time execution of events in browser • Binary data delivery

@wesleyhales WebSocket

@wesleyhales The Promise Idea “ facilitating live content and the
creation of real-time games”

@wesleyhales So let’s give that a try…

@wesleyhales High Performance WS Live Demo Open Connection Punch Through
Proxies Process and/or Respond

@wesleyhales High Performance Hurdles • Server Side Connections • Networks
and Proxies • Subprotocols • Time • Services vs. Frameworks

@wesleyhales Server Side Connections • Up to 1M concurrent connections
• Low Overhead • Bidirectional

@wesleyhales Networks and Proxies

@wesleyhales TL;DR Use TLS Networks & Proxies 99.9% Guaranteed Connection

@wesleyhales Networks High Performance Browser Networking by @igvita

@wesleyhales Networks

@wesleyhales Subprotocols Because one isn’t enough

@wesleyhales Subprotocols var ws = new WebSocket('wss://example.com/socket', ['appProtocol', ‘appProtocol-v2']); ws.onopen
= function () { if (ws.protocol == 'appProtocol-v2') { ... } else { ... } } Meta data for the client <-> server transmission *No effect on the core WebSocket API

@wesleyhales Messaging Protocol

@wesleyhales Subprotocols You have to use an envelope e.g. JSON

@wesleyhales Time Why should you care?

@wesleyhales Time Client Side Synchronization • Headers vs. Content rewrite
• Resource Timing on AJAX

@wesleyhales Time Get the data from an AJAX request in
4 easy steps var serverTimeMillisUTC; var oReq = new XMLHttpRequest(); oReq.onload = function(){ var dateStr = oReq.getResponseHeader('Date'); serverTimeMillisUTC = new Date(Date.parse(dateStr)).getTime(); }; oReq.open("HEAD", "/?foo123", false); oReq.send(); function getServerTime() { for(tvalue in window.performance.getEntriesByType("resource")){ tresource = window.performance.getEntriesByType("resource")[tvalue]; if(tresource.name.indexOf('foo123') > 0){ return serverTimeMillisUTC + (tresource.responseEnd - tresource.responseStart); } } }

@wesleyhales Time Why would I do this? Client Server Ajax
Date Header Call Ajax Date Header Response 12:30:11 12:15:22 What is response time?

@wesleyhales Time 1. Get the date header from the server
var oReq = new XMLHttpRequest(); oReq.onload = function(){ var dateStr = oReq.getResponseHeader('Date'); serverTimeMillisUTC = new Date(Date.parse(dateStr)).getTime(); }; oReq.open("HEAD", "/?foo123", false); oReq.send(); 2. User random query param

@wesleyhales Time 3. Filter on random query param if(tresource.name.indexOf('foo123') >
0){ return serverTimeMillisUTC +  (tresource.responseEnd - tresource.responseStart); } 4. Calculate Server Time

@wesleyhales What Time Is It? Edge 4 (Data) Edge 2
(Seek)

@wesleyhales Services and Frameworks

Service or Homegrown? Services Frameworks Servers

@wesleyhales Tips

@wesleyhales Head of Line Blocking Large messages block frame delivery
Latency Sensitive Data? Split up the large messages Screenshots are sent as binary data over wss:// in onslyde’s dashboard client side code on github

@wesleyhales Compression Extensions are managed by the browser   (spec
says it’s a “framework”) wss:// connection headers 1) Chrome has implicit support (no config on client) 2) Compresses any message over 10 bytes

@wesleyhales Make Sure You Need It Do you need WebSocket?
  HTTP2, SPDY, SSE, and WebSocket are all different. They could be combined. Are you willing to polyﬁll your WebSocket Implementation?

@wesleyhales Thanks!

@wesleyhales

@wesleyhales Appendix

@wesleyhales Browser Event Firing All Events Fire onmessage window.addEventListener('remoteMarkup', function(e)
{ var markup = JSON.parse(e.markup); document.getElementById('from-slide').innerHTML =  decodeURIComponent(markup.remoteMarkup); }, false); onmessage: function (m) { var event = (m.data); event = (new Function("return " + event))(); event.onslydeEvent.fire(); } Remote Control listens

@wesleyhales Demo 1 HTTP/2 Demo 2

High Performance WebSocket

High Performance WebSocket

More Decks by Wesley Hales

Other Decks in Technology

Featured

Transcript