Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning HTTP at ConFoo Vancouver

Bradley Holt
December 05, 2016

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.

Bradley Holt

December 05, 2016
Tweet

More Decks by Bradley Holt

Other Decks in Programming

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/[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

    View Slide

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

    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