Web Real-time Communications

67 %
33 %
Information about Web Real-time Communications

Published on March 4, 2014

Author: alexeiskachykhin

Source: slideshare.net


This presentation aggregates common approaches of real-time client-server communications provided by Web Standards. It focuses on comparison of different techniques like polling, comet, Web Sockets, Server-Sent Events.

Real-time Communication Client-Server Alexei Skachykhin – Software Engineer iTechArt, 2014

Pull model Xhr Xhr Xhr

Real-time Use cases Live feeds

Real-time Use cases Multiplayer games

Real-time Use cases Live sync applications

Pull & push model Xhr ? Xhr Xhr ? ?

Real-time Workarounds Comet Polling Long Polling HTTP Streaming

Polling Periodic XHR requests aimed to simulate push model

Polling Interaction diagram

Polling Request & response POST http://q90.queuev4.vk.com/im705 HTTP/1.1 Accept: */* X-Requested-With: XMLHttpRequest HTTP/1.1 200 OK Server: nginx/1.2.4 Date: Tue, 21 Jan 2014 23:22:31 GMT Content-Type: text/javascript; charset=UTF-8 Content-Length: 180 Connection: keep-alive Pragma: no-cache Cache-Control: no-store [{"ts":"1103498799","events":["14<!>like_post<!>30602036_99896<!>2802<!>738<!>261"]}]

Demo Polling

Polling Protocol overhead Actual overhead of HTTP headers in case of VK.com is 1.4K

Polling Network throughput Overhead, K Polling interval, s Number of clients Throughput, Mbps 1.4 60 10000 1.1 1.4 1 10000 66 1.4 10 100000 66 (example statistics for vk.com)

Polling Characteristics - High latency High server workload High protocol overhead (HTTP headers) Potential cause of high battery drain + High degree of support across different browsers

Comet Periodic long-lived XHR requests aimed to simulate push model

Comet Types Long polling HTTP Streaming

Long Polling Interaction diagram

Demo Long Polling

Long Polling Characteristics + Reduced latency + Reduced server workload + Reduced protocol overhead (HTTP headers) - Tricky server configuration - Possible difficulties with intermediaries - Can cause stoppage of all requests until long polling returns

HTTP Streaming Comet technique similar to long polling but instead of closing connection, infinitely pushing data into it

HTTP Streaming Interaction diagram

HTTP Streaming Request & response GET /events HTTP/1.1 Accept: application/json Invented in 1994 by Netscape HTTP/1.1 200 OK Content-Type: multipart/x-mixedreplace;boundary=separator Transfer-Encoding: chunked --separator { “id": 1, "x": 137, "y": 21 } --separator { “id": 2, "x": 18, "y": 115 } --separator { “id": 7, "x": 99, "y": 34 }

Demo HTTP Streaming

HTTP Streaming Browser compatibility 10

HTTP Streaming Characteristics - Patchy browser support (Issue 249132) Tricky server configuration Possible difficulties with intermediaries Can cause stoppage of all requests until long polling returns + Reduced latency + Reduced server workload + Reduced protocol overhead (HTTP headers)

HTML5 Pave the Cowpaths When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new.

Server-Sent Events Comet mechanism build directly into Web browser www.w3.org/TR/eventsource

Server-Sent Events API var source = new EventSource(‘/events'); source.addEventListener('message', function (e) { console.log(e.data); }); source.addEventListener('open', function (e) { // Connection was opened. }); source.addEventListener('error', function (e) { if (e.readyState == EventSource.CLOSED) { // Connection was closed. } });

Server-Sent Events Request & response GET /events HTTP/1.1 Accept: text/event-stream HTTP/1.1 200 OK Content-Type: text/event-stream id: 12345 data: GOOG data: 556 retry: 10000 data: hello world data: {"msg": "First message"} event: userlogon

Demo Server-Sent Events

Server-sent Events Browser compatibility 5.0 caniuse.com/#feat=eventsource

Server-sent Events Advantages + Complexity is hidden from developer + Built-in reconnect + Standardized an agreed upon implementation

Pull & push model Xhr Xhr Xhr Xhr Xhr Xhr

Pull & push model Flaws - HTTP one request – one resource semantics Semi-duplex communications Some degree of non-networking latency Protocol overhead (HTTP headers)

Full-duplex model ? ? ?

Web Sockets Low-latency bi-directional client-server communication technology www.w3.org/TR/websockets

Web Sockets Full-duplex socket connection Web Socket protocol v13 (RFC 6455) instead of HTTP Uses HTTP for connection establishment

Web Sockets Connection var connection = new WebSocket('ws://html5rocks.websocket.org/echo'); Connection established by “upgrading” from HTTP to WebSocket protocol Runs via port 80/443 to simplify firewalls traversal Pseudo schemes: ws, wss

Web Sockets Connection handshake GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Client sends GET or CONNECT request to Web Socket endpoint Upgrade header indicates willing to upgrade connection from HTTP to Web Socket

Web Sockets Connection handshake HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Server responds with 101 status code and connection upgrade header From now on Web Socket protocol will be used instead of HTTP

Web Sockets API var connection = new WebSocket('ws://html5rocks.websocket.org/echo'); // When the connection is open, send some data to the server. connection.onopen = function () { // Send the message 'Ping' to the server. connection.send('Ping'); }; // Log errors connection.onerror = function (error) { // Log messages from the server console.log('WebSocket Error ' + error); }; connection.onmessage = function (e) { console.log('Server: ' + e.data); };

Demo Web Sockets

Web Sockets Server compatibility IIS8 + Native Web Sockets NodeJS + Socket.io Apache + apache-websocket

Web Sockets Browser compatibility 10 6.0 caniuse.com/#feat=websockets

Web Sockets Characteristics + + + + Low latency Low server workload Low protocol overhead Full-duplex - Multiple versions of protocol to support - Possible difficulties with intermediaries - Requires up-to-date browser

What to choose? Bleeding Edge Polling Simplicity Comet / Server-Sent Events Web Sockets WebRTC Efficiency

All in one It is possible to abstract communication details away from developer into libraries

Demo Socket IO & SignalR

Caveats 1. Some network topologies may prohibit long-lived connections 2. Intermediaries are still barely aware of Web Sockets 3. Long-lived connections are subject to spontaneous shutdown 4. Long-lived connections can prevent some browsers from spanning parallel HTTP requests 5. Web Sockets spec has bunch of legacy versions

Links Code samples: https://github.com/alexeiskachykhin/web-platform-playground

Links Socket IO: http://socket.io/ SignalR: http://signalr.net/ Live Sync Demos: http://www.frozenmountain.com/websync/demos/ Web Socket – TCP bridge: http://artemyankov.com/tcp-client-for-browsers/ Server-Sent Events: http://www.html5rocks.com/en/tutorials/eventsource/basics/ Web Sockets: http://www.websocket.org/

Thank you! Forward your questions to alexei.skachykhin@live.com

Add a comment

Related presentations

Related pages

WebRTC Home | WebRTC

WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs.
Read more

WebRTC - Wikipedia, the free encyclopedia

WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for ...
Read more

Web Real-Time Communications Working Group

Mission. As defined in its charter, the mission of the Web Real-Time Communications Working Group, created in May 2011, and renewed in July 2015 is to ...
Read more

WebRTC - Web Real-Time Communications Working Group Charter

Scope. Enabling real-time communications between Web browsers require the following client-side technologies to be available: API functions to explore ...
Read more

WebRTC – Wikipedia

WebRTC (Web Real-Time Communication, deutsch „Web-Echtzeitkommunikation“) ist eine Sammlung von Kommunikationsprotokollen und Programmierschnittstellen ...
Read more

What is WebRTC (Web Real-Time Communications) | Glossary

A communications standard developed by the W3C in close cooperation with RTCWeb standard developed by the IETF. RTCWeb functions..Learn More..
Read more

Web Real Time Communication | LinkedIn

View 176 Web Real Time Communication posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

Was ist WebRTC (Web Real-Time Communications ...

WebRTC (Web Real-Time Communications) ist ein Open-Source-Projekt, um Sprache und Video in Echtzeit in einem Web-Browser zu implementieren. Kommunikation ...
Read more

WebRTC 1.0: Real-time Communication Between Browsers

4.2.5 RTCBundlePolicy Enum. As described in (section 4.1.1.), BUNDLE policy affects which media tracks are negotiated if the remote endpoint ...
Read more

WebRTC – Web Real-Time Communication - Competence Site

Stellen Sie sich vor: Sie nutzen zu Hause als Terminal am Internetzugang eine Smart-TV-ähnliche Kommunikationsendeinrichtung. Diese ähnelt einem ...
Read more