Learning HTTP at ConFoo Vancouver

Learning HTTP at ConFoo Vancouver

Whether you're building a backend or a frontend application, creating an API or consuming one, 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. Examples will be provided using an HTTP REPL (read–eval–print loop) client and an Apache CouchDB server.

8896271ee9d6f46d4b1783c9566cb645?s=128

Bradley Holt

December 05, 2016
Tweet

Transcript

  1. ConFoo Vancouver Bradley Holt, Developer Advocate Monday, December 5, 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. None
  11. http-console

  12. 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
  13. 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
  14. http-console http://127.0.0.1:15984/> .q @BradleyHolt https://github.com/cloudhead/http-console

  15. 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
  16. 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
  17. http-console https://bradley-holt.cloudant.com:443/> .q @BradleyHolt https://github.com/cloudhead/http-console

  18. HTTP Fundamentals

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

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

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

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

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

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

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

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

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

    many representations
  32. 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
  33. 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
  34. Examples

  35. 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
  36. 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
  37. Request Headers /> .headers! Accept: application/json! Content-Type: application/json! Authorization: Basic

    cm9vdDorMi95N3Y2aA==! Host: 127.0.0.1! @BradleyHolt
  38. PUT a Database /> PUT /kittens! ... ! HTTP/1.1 201

    Created! Content-Type: application/json! Location: http://127.0.0.1/kittens! ! { ok: true }! @BradleyHolt
  39. 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
  40. POST a Document /> /kittens! @BradleyHolt

  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. GET an Attachment /kittens> GET /mittens/photo! HTTP/1.1 200 OK! Content-Type:

    image/gif! Etag: "UsqjdPnY6ApD2ENFOglFHg=="! ! R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=! @BradleyHolt
  47. Conditional Caching /kittens> If-None-Match: "UsqjdPnY6ApD2ENFOglFHg=="! /kittens> GET /mittens/photo! HTTP/1.1 304

    Not Modified! ! /kittens> If-None-Match:! @BradleyHolt
  48. DELETE a Document /kittens> DELETE /mittens! HTTP/1.1 409 Conflict! Content-Type:

    application/json! ! { error: 'conflict', reason: 'Document update conflict.' }! @BradleyHolt
  49. DELETE a Document /kittens> HEAD /mittens! HTTP/1.1 200 OK! Etag:

    "2-d858e51453a5785bafe517b7eddc5a98"! ! @BradleyHolt
  50. 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
  51. HTTP/2

  52. 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
  53. 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
  54. Questions? @BradleyHolt