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.

Transcript

1. ConFoo 2016
   Bradley Holt, Developer Advocate
   Friday, February 26, 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. 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/
    

    View Slide

11. View Slide

12. http-console
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

28. HTTP Fundamentals
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    

    {

    …

    }
    

    View Slide

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

    

    {

    …

    }
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

44. Examples
    

    View Slide

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

    View Slide

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
    

    View Slide

47. Connecting to IBM Cloudant
    $ http-console https://bradley-holt:passw0rd@bradley-holt.cloudant.com --json!
    @BradleyHolt
    

    View Slide

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
    

    View Slide

49. Request Headers
    />!
    @BradleyHolt
    

    View Slide

50. Request Headers
    /> .headers!
    @BradleyHolt
    

    View Slide

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

    View Slide

52. PUT a Database
    />!
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

56. PUT a Database Again
    /> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

60. POST a Document
    />!
    @BradleyHolt
    

    View Slide

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

    View Slide

62. POST a Document
    /kittens>!
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

65. POST a Document
    /kittens> POST /!
    ... { "_id": "mittens", "age_weeks": 10, "weight_kilograms": 0.997 }!
    @BradleyHolt
    

    View Slide

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
    

    View Slide

67. GET All Documents
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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
    

    View Slide

70. GET a Document
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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
    

    View Slide

73. PUT an Attachment
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

75. PUT an Attachment
    /kittens> .headers!
    Accept: application/json!
    Content-Type: application/json!
    Authorization: Basic cm9vdDorMi95N3Y2aA==!
    Host: 127.0.0.1!
    @BradleyHolt
    

    View Slide

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
    

    View Slide

77. PUT an Attachment
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

84. GET an Attachment
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

87. Conditional Caching
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. DELETE a Document
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

97. DELETE a Document
    /kittens> !
    @BradleyHolt
    

    View Slide

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

    View Slide

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

    View Slide

100. DELETE a Document
     /kittens> !
     @BradleyHolt
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

107. HTTP/2
     

     View Slide

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
     

     View Slide

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

110. Questions?
     @BradleyHolt
     

     View Slide