Communication Protocols and Exchange Patterns of the Web PDF

Communication Protocols and Exchange Patterns of the Web HTTP/1-3, Polling, Websockets, Webhooks, WebRTC University of Fribourg Department of Informatics Software Engineering Group November 14, 2019...

Communication Protocols and Exchange Patterns of the Web HTTP/1-3, Polling, Websockets, Webhooks, WebRTC University of Fribourg Department of Informatics Software Engineering Group November 14, 2019 Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 1/28  Outline 1. Web protocols history ▪ HTTP/1 outlines ▪ HTTP/2 ▪ HTTP/3 + QUIC 2. Real-time communication for the web ▪ COMET ▪ Server-Sent Events (SSE) ▪ WebSocket 3. Webhooks 4. Peer-to-peer communication ▪ WebRTC Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 2/28  HTTP/0.9 Outlines Back in 1991 Easy, one line protocol $ telnet www.httpbin.org 80 GET /html … Connection closed by foreign host. Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 3/28  HTTP/1.0 https://tools.ietf.org/html/rfc7540 Mandatory version number Extensible headers ▪ extra newline at the end $ telnet www.httpbin.org 80 GET /html HTTP/1.0 User-Agent: telnet Host: httpbin.org Accept: */* HTTP/1.0 200 OK Server: nginx Date: Thu, 10 Nov 2016 20:49:10 GMT Content-Type: text/html; charset=utf-8 Content-Length: 3741 Connection: close … Connection closed by foreign host. Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 4/28  HTTP/1 Persistent connection HTTP/1.0 ▪ Require explicit keep-alive header Connection: keep-alive HTTP/1.1 ▪ Implicit keep-alive unless specified source: https://commons.wikimedia.org/wiki/File:HTTP_persistent_connection.svg Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 5/28 HTTP/1.1 HTTP pipelining source: https://commons.wikimedia.org/wiki/File:HTTP_pipelining2.svg Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 6/28  HTTP/2 https://tools.ietf.org/html/rfc7540 HTTP/2 (HTTP 2.0) aims to make the web faster Published in February 2015 ▪ Based on SPDY protocol from Google Targets performance improvements HTTP/2 is a binary protocol ▪ Differ from HTTP/1 textual protocol Primitives ▪ Streams ▪ Frames Header (compressed) Data Push-promise Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 7/28  HTTP/2 HTTP multiplexing One TCP connection per origin ▪ Full-duplex Communication is split into frames ▪ Frames are prioritized stream ▪ Frames are flow controlled frame compressed headers Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 8/28  HTTP/2 Server push Ability of the server to send multiple responses for a single client request Example ▪ Browser → ask for /item/xyz ▪ Server → OK, and you’ll also need /script.js and /style.css Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 9/28 HTTP/2 Outlines source: http://blog.scottlogic.com/2014/11/07/http-2-a-quick-look.html Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 10/28 HTTP/2 Outlines (2) Is this HTTP/2 the future ? Meet HTTP/3! Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 11/28  HTTP/3 Outlines HTTP/3 solves inherent TCP issues (HOL blocking, multipath...) by switching to UDP HTTP/1 HTTP/2 HTTP/3 TLS 1.2+ QUIC TLS 1.3 TCP UDP IP QUIC ▪ Reliable, unlike UDP ▪ Adds connections, resends, flow control ▪ TLS 1.3 built-in HTTP over QUIC is the next generation by Daniel Stenberg Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 12/28  QUIC https://tools.ietf.org/html/rfc6749 Introducing Google QUIC Based on UDP No head-of-line blocking ▪ If one packet is delayed it only pause one stream (in HTTP/2 the TCP channel is shared) One round-trip handshake Internet connections persistence ▪ Not linked to TCP socket (IP+port) and more... Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 13/28  Outline 1. Web protocols history ▪ HTTP/1 outlines ▪ HTTP/2 ▪ HTTP/3 + QUIC 2. Real-time communication for the web ▪ Polling/COMET ▪ Server-Sent Events (SSE) ▪ WebSocket 3. Webhooks 4. Peer-to-peer communication ▪ WebRTC Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 14/28  Polling Request-response message exchange pattern ▪ Plain HTTP (i.e. using XMLHttpRequest from browser) ▪ No server push Polling technique Long polling technique source: http://www.ibm.com/developerworks/websphere/techjournal/1008_sampathkumar/1008_sampathkumar.html Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 15/28  Polling Example using XMLHttpRequest and Fetch XMLHttpRequest Fetch API function checkUpdates(url) { function *checkUpdates(url){ var xhr = new XMLHttpRequest(); while(true){ xhr.open('GET', url); yield fetch(url,{ xhr.onload = function() {... }; method: 'get' xhr.send(); }).then(function(d){ } var json = d.json(); return json; setInterval(function() { }); checkUpdates('/updates') }, } 60000 } ); and iterate using for-await-of Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 16/28  COMET Generic term for long-held HTTP requests Streaming ▪ Hidden iframe Stream of ▪ XMLHttpRequest (XHR) onreadystatechange fires when a chunk is loaded Ajax with long polling ▪ XHR long polling ▪ long polling/JSONP cross domain Often referred as hacks, especially streaming techniques!!! Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 17/28  Server-Sent Events (SSE) EventSource API Uni-directional events (server push) ▪ Plain HTTP ▪ Streamed events, connection is kept open as long as possible Handled by EventSource API in the browser if (!!window.EventSource) { var source = new EventSource('stream.php'); source.addEventListener('message', function(e) { console.log(e.data); }, false); } else { // Fall back to xhr polling } Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 18/28  WebSocket https://tools.ietf.org/html/rfc6749 Real-time communication protocol and API for the web Published in 2011 Full-duplex communication over TCP socket ▪ Real server-push e.g. receive message from chatroom without polling websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { alert(evt.data); websocket.close(); }; websocket.onerror = function(evt) { onError(evt) }; Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 19/28  Socket.IO http://socket.io Both a Node.js server and client library (Javascript) ▪ API for other languages/frameworks also available Enables bidirectional communication over WebSocket ▪ Fallback to polling if WebSocket not available Uses own Socket.IO protocol which in turn uses Engine.IO protocol ▪ Provides several abstractions (higher level) ▪ Publish/subscribe based Broadcasting features Primitives Namespaces Rooms Events Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 20/28  Socket.IO Demo http://amritb.github.io/socketio-client-tool/ Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 21/28  Outline 1. Web protocols history ▪ HTTP/1 outlines ▪ HTTP/2 ▪ HTTP/3 + QUIC 2. Real-time communication for the web ▪ COMET ▪ Server-Sent Events (SSE) ▪ WebSocket 3. Webhooks 4. Peer-to-peer communication ▪ WebRTC Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 22/28  Webhooks Webhook = HTTP callback ▪ server-to-server communication ▪ that’s it! E.g. GitHub: Webhooks allow you to build or set up integrations which subscribe to certain events on GitHub.com. When one of those events is triggered, we'll send a HTTP POST payload to the webhook's configured URL. https://developer.github.com/webhooks/ Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 23/28  Outline 1. Web protocols history ▪ HTTP/1 outlines ▪ HTTP/2 ▪ HTTP/3 + QUIC 2. Real-time communication for the web ▪ COMET ▪ Server-Sent Events (SSE) ▪ WebSocket 3. Webhooks 4. Peer-to-peer communication ▪ WebRTC Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 24/28  WebRTC http://w3c.github.io/webrtc-pc/ Real-time communication API between browsers ▪ Peer-to-peer over UDP Web server HTTP / HTTP / Websocket Websocket data channel Browser Browser media channel Some services using WebRTC ▪ https://www.webrtc-experiment.com/video-conferencing/ ▪ https://www.sharedrop.io/ Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 25/28  WebRTC Session establishment Interactive Connectivity Establishment (ICE) ▪ Session Traversal Utilities for NAT (STUN) ▪ Traversal Using Relays around NAT (TURN) Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 26/28  Resources 1. Grigorik, Ilya. High-performance Browser Networking. Beijing: O'Reilly, 2013. Print. 2. HTTP/3 - HTTP over QUIC is the next generation by Daniel Stenberg, https://youtu.be/idViw4anA6E Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 27/28  Advanced Software Engineering SA 2019 – Prof. Jacques Pasquier - Arnaud Durand - Pascal Gremaud 28/28