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
 
 
 


I'm a Web Page!


 


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

No content

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/y7v6h@127.0.0.1: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:passw0rd@bradley-holt.cloudant.com --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 §  Web Hosting Servers by Widjaya Ivan, on Flickr §  API calls by Tsahi Levent-Levi, on Flickr §  Instagram and other Social Media Apps by Jason Howie, on Flickr §  interwoven by Jared Hansen, on Flickr §  Envelope by Blake Burkhart, on Flickr §  200 - OK by Tomomi, on Flickr §  201 - Created by Tomomi, on Flickr §  304 - Not Modified by Tomomi, on Flickr §  409 - Conflict by Tomomi, on Flickr §  500 - Internal Server Error by Tomomi, on Flickr §  Flood by Kai Wegner, on Flickr @BradleyHolt

Questions? @BradleyHolt