WebSockets (vs HTTP) – The problem areas – Internet Layers

The problem areas

• real-time (event-driven) apps
• social & online games
• collaborative platforms
• financial applications
• social feeds
• chats
• etc

Internet Layers

TCP/IP Model

Hyper Text Transfer Protocol

HTTP model

The request/response model

HTTP page loading

HTTP cons

• new TCP connection
• half-duplex (can only receive or send)
• limitations

HTTP "Hello World"

GET /7020c0e8b09f4314ceee7c0ebccaff3fe956da1820.png HTTP/1.1
Host: new.tinygrab.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: image/webp,image/*,*/*;q=0.8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,ru;q=0.6,uk;q=0.4
Cookie: __utma=80076562.1; __utmc=80076562; __utmz=80076562

HTTP Polling Architecture

Request every n seconds

HTTP Polling (js)

setInterval(function() {
  $.ajax({
    url: '/server',
    dataType: 'json',
    success: function () { ... }
  })
}, 30000);

HTTP Long-Polling Architecture

Request every n seconds \w wait-delay

HTTP Streaming

WebSockets

WebSockets Pros

• B-directional
• full-duplex
• single TCP connection

WebSockets what is it?

a channel over a single TCP connection ws://

WebSockets how they works?

upgrade http to websocket send data frames in both directions end the connection

WebSockets how they works?

WebSockets how they works?

switching the HTTP protocol to WebSocket

WebSockets how they works?

each of client & server becomes as peer

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets how they works?

WebSockets "Hello World"

only 2 bytes of overhead no latency for creation new TCP connection no polling overhead (will send message when it needed)

WebSockets in browsers

caniuse.com 89.42%

WebSockets example (js)

var ws = new WebSocket('ws://echo.websocket.org');

ws.onopen = function() { ws.send('hi'); }

ws.onmessage = function(event) { console.log('message %s', event.data) }

ws.onclose = function(event) { console.log('closed', event.code) }

WebSockets example (Docker)

Dockerfile:

FROM centos:6
MAINTAINER itspoma <itspoma@gmail.com>

RUN yum clean all \
 && yum install -y git curl wget mc

RUN curl --silent --location https://rpm.nodesource.com/setup | bash - \
 && yum install -y nodejs \
 && npm install -g npm@latest \
 && npm install -g inherits

RUN cd /tmp/ && npm install ws \
 && wget -O /tmp/server.js http://pastebin.com/raw/cUGe4Bgm

WebSockets example (run)

Shell instructions:

$ wget -O Dockerfile http://pastebin.com/raw/0Xn5uZxc

$ docker rm -f websocket-container
$ docker rmi -f websocket-image

$ docker build -t websocket-image .
$ docker run --name=websocket-container -p 4871:8080 -tid websocket-image
$ docker exec -ti websocket-container bash

vm$ node /tmp/server.js
vm$ nohup node /tmp/server.js >/dev/null 2>&1 &

WebSockets example (server.js)

var WebSocketServer = require('ws').Server
  , wss = new WebSocketServer({ port: 8080 });

wss.broadcast = function (data) {
  wss.clients.forEach(function (client) {
    client.send(data);
  });
};

wss.on('connection', function (ws) {
  console.log('new connection');

  ws.on('message', function (message) {
    console.log('received: %s', message);
    wss.broadcast(message);
  });

  ws.send('something');
});

WebSockets example (client.js)

var ws = new WebSocket('ws://185.69.152.203:4871');

ws.onopen = function() { ws.send('hi'); }
ws.onmessage = function(event) { console.log('message %s', event.data) }
ws.onclose = function(event) { console.log('closed', event.code) }

ws.send('welcome');

WebSockets vs HTTP

WebSockets in Meteor.js

websocket-based DDP (Distributed Data Protocol) to fetch structured data from a server, deliver live updates as data changes, and for remote procedure call

Meteor.js DDP