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.

Transcript

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

   View Slide

2. Why learn HTTP?
   

   View Slide

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

   View Slide

4. GET /index.html HTTP/1.0
   GET an HTML Page
   @BradleyHolt
   HTTP/1.0 200 OK

   

   

   

   I'm a Web Page!

   

   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Learning HTTP with CouchDB
   

   View Slide

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

   View Slide

10. View Slide

11. http-console
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

18. HTTP Fundamentals
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

23. 200 OK
    Indicates that the request succeeded without error
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    

    {

    …

    }
    

    View Slide

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

    

    {

    …

    }
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

34. Examples
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

51. HTTP/2
    

    View Slide

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
    

    View Slide

53. 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
    

    View Slide

54. Questions?
    @BradleyHolt
    

    View Slide