WebSocket The Current State of the Most Valuable HTML5 API

Farata Systems - The Expert Consultancy

farata.png

All cool technologies in one picture

twowaytraffic.jpg

What you should expect to experience today

Demo

Demo: Server-Side Push with WebSockets

Demo

What just happened?

Every data push had:

{"symbol": "APPL", "id": 555, "price": "451.29"}

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

www.ietf.org/mail-archive/web/hybi/current/msg00784.html
Ian Hickson (Google)

Meet the WEB SOCKET

html5_connectivity.png

Handshake

Client and Server must to negotiate in known form

approve.gif

WebSocket handshake

Here is sequence of the steps of initial handshake

WebSocket JavaScript API

var ws;
if (window.WebSocket) {
    console.log("WebSocket supported in your browser");
    ws = new WebSocket("ws://echo.websocket.org");
    // Set event handlers.
    ws.onopen = function () {
        console.log("onopen");
    };
    ws.onmessage = function (e) {
        // e.data contains received string.
        console.log("echo from server : " + e.data);
    };
    ws.onclose = function () {
        console.log("onclose");
    };
    ws.onerror = function () {
        console.log("onerror");
    };
}
else {console.log("WebSocket not supported in your browser");}
if (ws.readyState === 1){ ws.send("Hello WebSocket!"); }

Server-Sent Events

What are SSE?

Demo of the Data Push with SSE

Demo

“LEGACY” WEB

Polling

fig_09_01.png

Long Polling

fig_09_02.png

Streaming

fig_09_03.png

Demo of HTTP Request-Response

Demo

Comparing Overhead: HTTP vs SSE vs WebSocket

or delusion?

WebSocket: Known Facts

WebSocket and Proxies

the-internet-a-series-of-tubes.jpg

tl; dr Note sure about proxies - use TLS/SSL

Masked Frames

masked.jpg

My browser has it!

Is WebSocket only for browser?

everythere.jpg

Frameworks, please?

Clients:

Frameworks, please?

Server:

Frameworks, please?

vert.x to rule them all:

Load Balancing

We use NGINX as:

Recently NGINX team added WebSockets protocol support

Ping-Pong frames: Keeping connection alive

ping_pong.gif

USE CASE

WebSockets really shine with following applications:

not_sure.jpg

What to use anyway?

Upcoming book from O’Reilly

cover.png

Useful links

Thank you!