Learning HTTP at ConFoo

Learning HTTP at ConFoo

HTTP is the fabric of the web and the growing API economy. Whether you’re building a backend or a frontend application, creating an API, or consuming an API, it’s helpful to understand the basics of HTTP. Topics covered will include HTTP methods, request headers, request URIs, response status codes, response headers, resource representations, authentication, content negotiation, and caching.

8896271ee9d6f46d4b1783c9566cb645?s=128

Bradley Holt

February 26, 2016
Tweet

Transcript

  1. ConFoo 2016 Bradley Holt, Developer Advocate Friday, February 26, 2016

    Learning HTTP @BradleyHolt
  2. Why learn HTTP?

  3. The World Wide Web HTTP (Hypertext Transfer Protocol) was originally

    invented to serve HTML (Hypertext Markup Language) Web pages @BradleyHolt
  4. 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>
  5. API Economy HTTP is the fabric of the API economy

    @BradleyHolt
  6. Mobile Apps Most mobile apps use one or more mobile

    backend APIs, many of which are HTTP APIs
  7. Distributed Systems Understanding HTTP can help you understand distributed systems;

    the web is the largest distributed system ever created
  8. Learning HTTP with CouchDB

  9. Apache CouchDB CouchDB is a document database featuring an HTTP

    API, JSON documents, and peer-to-peer replication @BradleyHolt
  10. CouchDB 2.0 Developer Preview $ git clone https://git-wip-us.apache.org/repos/asf/couchdb.git! $ npm

    install -g grunt-cli! $ cd couchdb! $ git checkout developer-preview-2.0! $ ./configure! $ make! $ dev/run! [ * ] Developers cluster is set up at http://127.0.0.1:15984.! Admin username: root! Password: +2/y7v6h @BradleyHolt http://couchdb.apache.org/developer-preview/2.0/
  11. None
  12. http-console

  13. http-console $ npm install http-console -g! @BradleyHolt https://github.com/cloudhead/http-console

  14. http-console $ npm install http-console -g! $ http-console 127.0.0.1:15984 @BradleyHolt

    https://github.com/cloudhead/http-console
  15. 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
  16. http-console http://127.0.0.1:15984/> @BradleyHolt https://github.com/cloudhead/http-console

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

  18. 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
  19. http-console http://127.0.0.1:15984/> @BradleyHolt https://github.com/cloudhead/http-console

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

  21. http-console $ http-console https://bradley-holt.cloudant.com @BradleyHolt https://github.com/cloudhead/http-console

  22. 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
  23. http-console https://bradley-holt.cloudant.com:443/> @BradleyHolt https://github.com/cloudhead/http-console

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

  25. 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
  26. http-console https://bradley-holt.cloudant.com:443/> @BradleyHolt https://github.com/cloudhead/http-console

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

  28. HTTP Fundamentals

  29. Stateless Messages Each HTTP request and HTTP response is a

    stateless and self-contained message
  30. 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
  31. Resources A resource is identified by a Uniform Resource Identifier

    (URI) @BradleyHolt /kittens /kittens?q=mittens /kittens/mittens /kittens/mittens/photo
  32. Status Codes Every HTTP response includes a numeric status code

    @BradleyHolt 200 OK 304 Not Modified 500 Internal Server Error 409 Conflict
  33. 200 OK Indicates that the request succeeded without error @BradleyHolt

  34. 201 Created A new resource has been created @BradleyHolt

  35. 304 Not Modified Used for conditional caching of GET requests

    @BradleyHolt
  36. 409 Conflict The request would create a conflict with the

    current state of the resource @BradleyHolt
  37. 500 Internal Server Error The server encountered an internal error

    and was not able to fulfill the request @BradleyHolt
  38. 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
 
 {
 …
 }
  39. 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
 
 {
 …
 }
  40. 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
  41. Resource Representations A resource (identified by a URI) can take

    many representations
  42. 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
  43. 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
  44. Examples

  45. Connecting to CouchDB 2.0 $ http-console root:+2/y7v6h@127.0.0.1:15984 --json! @BradleyHolt

  46. 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
  47. Connecting to IBM Cloudant $ http-console https://bradley-holt:passw0rd@bradley-holt.cloudant.com --json! @BradleyHolt

  48. 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
  49. Request Headers />! @BradleyHolt

  50. Request Headers /> .headers! @BradleyHolt

  51. Request Headers /> .headers! Accept: application/json! Content-Type: application/json! Authorization: Basic

    cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt
  52. PUT a Database />! @BradleyHolt

  53. PUT a Database /> PUT /kittens! @BradleyHolt

  54. PUT a Database /> PUT /kittens! ... ! @BradleyHolt

  55. PUT a Database /> PUT /kittens! ... ! HTTP/1.1 201

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

  57. PUT a Database Again /> PUT /kittens! @BradleyHolt

  58. PUT a Database Again /> PUT /kittens! ... ! @BradleyHolt

  59. 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
  60. POST a Document />! @BradleyHolt

  61. POST a Document /> /kittens! @BradleyHolt

  62. POST a Document /kittens>! @BradleyHolt

  63. POST a Document /kittens> POST /! @BradleyHolt

  64. POST a Document /kittens> POST /! ... ! @BradleyHolt

  65. POST a Document /kittens> POST /! ... { "_id": "mittens",

    "age_weeks": 10, "weight_kilograms": 0.997 }! @BradleyHolt
  66. 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
  67. GET All Documents /kittens> ! @BradleyHolt

  68. GET All Documents /kittens> GET /_all_docs! @BradleyHolt

  69. 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
  70. GET a Document /kittens> ! @BradleyHolt

  71. GET a Document /kittens> GET /mittens! @BradleyHolt

  72. 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
  73. PUT an Attachment /kittens> ! @BradleyHolt

  74. PUT an Attachment /kittens> .headers! @BradleyHolt

  75. PUT an Attachment /kittens> .headers! Accept: application/json! Content-Type: application/json! Authorization:

    Basic cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt
  76. 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
  77. PUT an Attachment /kittens> ! @BradleyHolt

  78. PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! @BradleyHolt

  79. PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! ...! @BradleyHolt

  80. PUT an Attachment /kittens> PUT /mittens/photo?rev=1-e665a40d9ea9711c983e907f0b0b6e8a! ... R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt

  81. 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'! }! @BradleyHolt
  82. 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> ! @BradleyHolt
  83. 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
  84. GET an Attachment /kittens> ! @BradleyHolt

  85. GET an Attachment /kittens> GET /mittens/photo! @BradleyHolt

  86. GET an Attachment /kittens> GET /mittens/photo! HTTP/1.1 200 OK! Content-Type:

    image/gif! Etag: "UsqjdPnY6ApD2ENFOglFHg=="! ! R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt
  87. Conditional Caching /kittens> ! @BradleyHolt

  88. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! @BradleyHolt

  89. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> ! @BradleyHolt

  90. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! @BradleyHolt

  91. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304

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

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

    Not Modified! ! /kittens> If-None-Match:! @BradleyHolt
  94. DELETE a Document /kittens> ! @BradleyHolt

  95. DELETE a Document /kittens> DELETE /mittens! @BradleyHolt

  96. DELETE a Document /kittens> DELETE /mittens! HTTP/1.1 409 Conflict! Content-Type:

    application/json! ! { error: 'conflict', reason: 'Document update conflict.' }! @BradleyHolt
  97. DELETE a Document /kittens> ! @BradleyHolt

  98. DELETE a Document /kittens> HEAD /mittens! @BradleyHolt

  99. DELETE a Document /kittens> HEAD /mittens! HTTP/1.1 200 OK! Etag:

    "2-d858e51453a5785bafe517b7eddc5a98"! ! @BradleyHolt
  100. DELETE a Document /kittens> ! @BradleyHolt

  101. DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! @BradleyHolt

  102. DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! /kittens> ! @BradleyHolt

  103. DELETE a Document /kittens> If-Match: "2-d858e51453a5785bafe517b7eddc5a98"! /kittens> DELETE /mittens! @BradleyHolt

  104. 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'! }! @BradleyHolt
  105. 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> ! @BradleyHolt
  106. 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
  107. HTTP/2

  108. 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
  109. 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
  110. Questions? @BradleyHolt