Learning HTTP at ConFoo Vancouver

ConFoo Vancouver Bradley Holt, Developer Advocate Monday, December 5, 2016
Learning HTTP @BradleyHolt

Why learn HTTP?

The World Wide Web HTTP (Hypertext Transfer Protocol) was originally
invented to serve HTML (Hypertext Markup Language) Web pages @BradleyHolt

GET /index.html HTTP/1.0 GET an HTML Page @BradleyHolt HTTP/1.0 200
OK    <html>  <body>  <h1>I'm a Web Page!</h1>  </body>  </html>

API Economy HTTP is the fabric of the API economy
@BradleyHolt

Mobile Apps Most mobile apps use one or more mobile
backend APIs, many of which are HTTP APIs

Distributed Systems Understanding HTTP can help you understand distributed systems;
the web is the largest distributed system ever created

Learning HTTP with CouchDB

Apache CouchDB CouchDB is a document database featuring an HTTP
API, JSON documents, and peer-to-peer replication @BradleyHolt

http-console

http-console $ npm install http-console -g! $ http-console 127.0.0.1:15984! >
http-console 0.6.3! > Welcome, enter .help if you're lost.! > Connecting to 127.0.0.1 on port 15984.! @BradleyHolt https://github.com/cloudhead/http-console

http-console http://127.0.0.1:15984/> GET /! HTTP/1.1 200 OK! Content-Type: text/plain; charset=utf-8!
! {! couchdb: 'Welcome',! version: '9afa6a0',! vendor: { name: 'The Apache Software Foundation' }! } @BradleyHolt https://github.com/cloudhead/http-console

http-console http://127.0.0.1:15984/> .q @BradleyHolt https://github.com/cloudhead/http-console

http-console $ http-console https://bradley-holt.cloudant.com! > http-console 0.6.3! > Welcome, enter
.help if you're lost.! > Connecting to bradley-holt.cloudant.com on port 443.! @BradleyHolt https://github.com/cloudhead/http-console

http-console https://bradley-holt.cloudant.com:443/> GET /! HTTP/1.1 200 OK! Content-Type: text/plain; charset=utf-8!
! {! couchdb: 'Welcome',! version: 'acfd7cb',! vendor: {! name: 'IBM Cloudant',! version: '5253',! variant: 'paas'! },! features: [ 'geo' ]! }! @BradleyHolt https://github.com/cloudhead/http-console

http-console https://bradley-holt.cloudant.com:443/> .q @BradleyHolt https://github.com/cloudhead/http-console

HTTP Fundamentals

Stateless Messages Each HTTP request and HTTP response is a
stateless and self-contained message

Request Methods A request method indicates the action to be
performed on a resource @BradleyHolt GET /kittens POST /kittens DELETE /kittens/mittens PUT /kittens/mittens

Resources A resource is identified by a Uniform Resource Identifier
(URI) @BradleyHolt /kittens /kittens?q=mittens /kittens/mittens /kittens/mittens/photo

Status Codes Every HTTP response includes a numeric status code
@BradleyHolt 200 OK 304 Not Modified 500 Internal Server Error 409 Conflict

200 OK Indicates that the request succeeded without error @BradleyHolt

201 Created A new resource has been created @BradleyHolt

304 Not Modified Used for conditional caching of GET requests
@BradleyHolt

409 Conflict The request would create a conflict with the
current state of the resource @BradleyHolt

500 Internal Server Error The server encountered an internal error
and was not able to fulfill the request @BradleyHolt

Request Headers A client can provide additional details about a
request with request headers @BradleyHolt GET /kittens  Accept: application/json POST /kittens  Accept: application/json  Content-Type: application/json    {  …  } DELETE /kittens/mittens  Accept: application/json PUT /kittens/mittens  Accept: application/json  Content-Type: application/json    {  …  }

Response Headers A server can provide additional details about a
response with response headers @BradleyHolt 200 OK  Content-Type: application/json  Etag: "e146018c82000fdc"    {  …  } 201 Created  Content-Type: application/json  Location: /kittens    {  …  } 500 Internal Server Error  Content-Type: application/json    {  …  } 409 Conflict  Content-Type: application/json    {  …  }

Example Request and Response An example of an HTTP client
request and an HTTP server response @BradleyHolt HTTP/1.1 200 OK  Content-Type: application/json  Etag: "e146018c82000fdc"    {  …  } GET /kittens HTTP/1.1  Accept: application/json

Resource Representations A resource (identified by a URI) can take
many representations

Content Negotiation Allows for different representations of a resource to
be served from the same URI @BradleyHolt HTTP/1.1 200 OK  Content-Type: image/gif  Etag: "52CAA3A43D34531E"    R0lGODlhAQABAIAAAP/// wAAACwAAAAAAQABAAACAkQBADs= GET /kittens/mittens/photo HTTP/1.1  Accept: image/gif

Content Negotiation Allows for different representations of a resource to
be served from the same URI @BradleyHolt HTTP/1.1 200 OK  Content-Type: image/png  Etag: "2EB93EA080ECAA64"    iVBORw0KGgoAAAANSUhEUgAAAAEAAA ABCAAAAAA6fptVAAAACklEQVQYV2P4 DwABAQEAWk1v8QAAAABJRU5ErkJggg == GET /kittens/mittens/photo HTTP/1.1  Accept: image/png

Examples

Connecting to CouchDB 2.0 $ http-console root:+2/[email protected]:15984 --json! > http-console
0.6.3! > Welcome, enter .help if you're lost.! > Connecting to 127.0.0.1 on port 15984.! @BradleyHolt

Connecting to IBM Cloudant $ http-console https://bradley-holt:[email protected] --json! > http-console
0.6.3! > Welcome, enter .help if you're lost.! > Connecting to bradley-holt.cloudant.com on port 443.! @BradleyHolt

Request Headers /> .headers! Accept: application/json! Content-Type: application/json! Authorization: Basic
cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt

PUT a Database /> PUT /kittens! ... ! HTTP/1.1 201
Created! Content-Type: application/json! Location: http://127.0.0.1/kittens! ! { ok: true }! @BradleyHolt

PUT a Database Again /> PUT /kittens! ... ! HTTP/1.1
412 Precondition Failed! Content-Type: application/json! ! { error: 'file_exists', reason: 'The database could not be created, the file already exists.' }! @BradleyHolt

POST a Document /> /kittens! @BradleyHolt

POST a Document /kittens> POST /! ... { "_id": "mittens",
"age_weeks": 10, "weight_kilograms": 0.997 }! HTTP/1.1 201 Created! Content-Type: application/json! Location: http://127.0.0.1/kittens/mittens! ! {! ok: true,! id: 'mittens',! rev: '1-e665a40d9ea9711c983e907f0b0b6e8a'! }! @BradleyHolt

GET All Documents /kittens> GET /_all_docs! HTTP/1.1 200 OK! Content-Type:
application/json! Etag: "e1463d2fc36a120a6586018c82000fdc"! ! {! total_rows: 1,! offset: 0,! rows: [! {! id: 'mittens',! key: 'mittens',! value: { rev: '1-e665a40d9ea9711c983e907f0b0b6e8a' }! }! ]! }! @BradleyHolt

GET a Document /kittens> GET /mittens! HTTP/1.1 200 OK! Content-Type:
application/json! Etag: "1-e665a40d9ea9711c983e907f0b0b6e8a"! ! {! _id: 'mittens',! _rev: '1-e665a40d9ea9711c983e907f0b0b6e8a',! age_weeks: 10,! weight_kilograms: 0.997! }! @BradleyHolt

PUT an Attachment /kittens> .headers! Accept: application/json! Content-Type: application/json! Authorization:
Basic cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! /kittens> Content-Type: image/gif! @BradleyHolt

PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! ... R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! HTTP/1.1 201
Created! Content-Type: application/json! Location: http://127.0.0.1/kittens/mittens/photo! ! {! ok: true,! id: 'mittens',! rev: '2-d858e51453a5785bafe517b7eddc5a98'! }! /kittens> Content-Type: application/json! @BradleyHolt

GET an Attachment /kittens> GET /mittens/photo! HTTP/1.1 200 OK! Content-Type:
image/gif! Etag: "UsqjdPnY6ApD2ENFOglFHg=="! ! R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt

Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304
Not Modified! ! /kittens> If-None-Match:! @BradleyHolt

DELETE a Document /kittens> DELETE /mittens! HTTP/1.1 409 Conflict! Content-Type:
application/json! ! { error: 'conflict', reason: 'Document update conflict.' }! @BradleyHolt

DELETE a Document /kittens> HEAD /mittens! HTTP/1.1 200 OK! Etag:
"2-d858e51453a5785bafe517b7eddc5a98"! ! @BradleyHolt

DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! /kittens> DELETE /mittens! HTTP/1.1
200 OK! Content-Type: application/json! ! {! ok: true,! id: 'mittens',! rev: '3-d0780627ddff7a7f536fe273100cec41'! }! /kittens> If-Match:! @BradleyHolt

HTTP/2

HTTP/2 §  Same methods (GET, POST, PUT, DELETE, etc.), headers,
and status codes §  No more need for optimizations that reduce the number of HTTP requests (e.g. inlining, concatenation, and sprites) §  Header compression §  Cache pushing §  Ability for clients to cancel a request §  Better performance for encrypted connections §  Binary protocol @BradleyHolt https://www.mnot.net/blog/2014/01/30/http2_expectations

Image Credits §  Dialing Up Web History by Mike Licht,
on Flickr <https://flic.kr/p/cacNad> §  Web Hosting Servers by Widjaya Ivan, on Flickr <https://flic.kr/p/8onBSX> §  API calls by Tsahi Levent-Levi, on Flickr <https://flic.kr/p/ef9o5F> §  Instagram and other Social Media Apps by Jason Howie, on Flickr <https://flic.kr/p/d41HES> §  interwoven by Jared Hansen, on Flickr <https://flic.kr/p/7Pe1Vb> §  Envelope by Blake Burkhart, on Flickr <https://flic.kr/p/9Zifc3> §  200 - OK by Tomomi, on Flickr <https://flic.kr/p/aVuVsF> §  201 - Created by Tomomi, on Flickr <https://flic.kr/p/aXWm1Z> §  304 - Not Modified by Tomomi, on Flickr <https://flic.kr/p/aXY3dH> §  409 - Conflict by Tomomi, on Flickr <https://flic.kr/p/aV6jzz> §  500 - Internal Server Error by Tomomi, on Flickr <https://flic.kr/p/aVdo6e> §  Flood by Kai Wegner, on Flickr <https://flic.kr/p/b9HCNT> @BradleyHolt

Questions? @BradleyHolt

Learning HTTP at ConFoo Vancouver

Learning HTTP at ConFoo Vancouver

More Decks by Bradley Holt

Other Decks in Programming

Featured

Transcript