{"id":2509,"date":"2019-02-20T15:15:06","date_gmt":"2019-02-20T15:15:06","guid":{"rendered":"http:\/\/www.max-sperling.bplaced.net\/?p=2509"},"modified":"2024-02-16T10:49:21","modified_gmt":"2024-02-16T10:49:21","slug":"http-vs-websocket","status":"publish","type":"post","link":"http:\/\/www.max-sperling.bplaced.net\/?p=2509","title":{"rendered":"HTTP vs. WebSocket"},"content":{"rendered":"<p><strong>HTTP<\/strong> is a RESTful protocol with a uni-directional communication. This means the client needs to poll to get updates from the server. With HTTP\/1.0 for every request has been  a new TCP connection created. Since HTTP\/1.1 they are providing a keep-alive mechanism which is keeping the TCP connection alive for several requests.<\/p>\n<p><u>Protocol-Stack:<\/u><\/p>\n<pre>\r\n--------------\r\n|    HTTP    |\r\n--------------\r\n|    TCP     |\r\n--------------\r\n|    IP      |\r\n--------------\r\n<\/pre>\n<p><u>Communication:<\/u><br \/>\n1. Connection: close (Default for HTTP\/1.0)<\/p>\n<pre>\r\nClient                 Server\r\n   |<-- TCP handshake -->|\r\n   |--- HTTP request --->|\r\n   |<-- HTTP response ---|\r\n\r\n   |<-- TCP handshake -->|\r\n   |--- HTTP request --->|\r\n   |<-- HTTP response ---|\r\n<\/pre>\n<p>2. Connection: keep-alive (Default for HTTP\/1.1)<\/p>\n<pre>\r\nClient                 Server\r\n   |<-- TCP handshake -->|\r\n   |--- HTTP request --->|\r\n   |<-- HTTP response ---|\r\n   |--- HTTP request --->|\r\n   |<-- HTTP response ---|\r\n<\/pre>\n<p><u>Requests:<\/u> Get (Get Object), Put (Create Object), Post (Update Object), Delete (Delete Object), ...<\/p>\n<p><strong>Example - Change email of user<\/strong> (Simplified)<\/p>\n<pre>\r\nClient                    Server\r\n   |<--- TCP handshake ---->|\r\n   |--- 1) GET request ---->|\r\n   |<-- 2) GET response ----|\r\n   |--- 3) POST request --->|\r\n   |<-- 4) POST response ---|\r\n<\/pre>\n<p>1) GET request:<\/p>\n<pre>\r\nGET \/ HTTP\/1.1\r\nHost: www.site.org\/user\r\n<\/pre>\n<p>2) GET response:<\/p>\n<pre>\r\nHTTP\/1.1 200 OK\r\n[\r\n { \"id\" = 000, \"name\" = \"admin\", \"email\" = \"admin@site.com\" },\r\n { \"id\" = 001, \"name\" = \"user1\", \"email\" = \"old_user@site.com\" }\r\n]\r\n<\/pre>\n<p>3) POST request:<\/p>\n<pre>\r\nPOST \/ HTTP\/1.1\r\nHost: www.site.org\/user?id=001\r\n{ email = \"new_user@site.com\" }\r\n<\/pre>\n<p>4) POST response:<\/p>\n<pre>\r\nHTTP\/1.1 200 OK\r\n{ \"id\" = 001, \"name\" = \"user1\", \"email\" = \"new_user@site.com\" }\r\n<\/pre>\n<hr>\n<p><strong>WebSocket<\/strong> is like a normal socket and allows a bi-dircetional communication. This means the server can inform the client about updates. For the whole communication is just one TCP connection necessary. The communication is also full-duplex, which means that client and server can write parallel to each other.<\/p>\n<p><u>Protocol-Stack:<\/u><\/p>\n<pre>\r\n--------------\r\n|  WebSocket |\r\n--------------\r\n|    TCP     |\r\n--------------\r\n|    IP      |\r\n--------------\r\n<\/pre>\n<p><u>Communication:<\/u><\/p>\n<pre>\r\nClient                         Server\r\n   |<------ TCP handshake ------>|\r\n   |--- HTTP upgrade request --->|\r\n   |<-- HTTP upgrade response ---|\r\n   |<-- Websocket text frame --->|\r\n                ...\r\n   |<-- Websocket close frame -->|\r\n<\/pre>\n<p><strong>Example - Get notified when email of user changed<\/strong> (Simplified)<br \/>\nThe structure of the messages send via the websocket has to be known by both sides (specification).<\/p>\n<pre>\r\nClient                            Server\r\n   |<-------- TCP handshake --------->|\r\n   |--- 1) HTTP upgrade request ----->|\r\n   |<-- 2) HTTP upgrade response -----|\r\n   |--- 3) WS subscribe request ----->|\r\n   |<-- 4) WS subscribe response -----|\r\n   |<-- 5) WS event frame 1 ----------|\r\n                ...\r\n   |<-- 6) WS event frame 2 ----------|\r\n                ...\r\n   |--- 7) WS unsubscribe request --->|\r\n   |<-- 8) WS unsubscribe response ---|\r\n   |--- 9) WS close frame ----------->|\r\n<\/pre>\n<p>1) HTTP upgrade request<\/p>\n<pre>\r\nGET \/chat HTTP\/1.1\r\nHost: www.site.com\r\nConnection: Upgrade\r\nUpgrade: websocket\r\n<\/pre>\n<p>2) HTTP upgrade response<\/p>\n<pre>\r\nHTTP\/1.1 101 Switching Protocols\r\nConnection: Upgrade\r\nUpgrade: websocket\r\n<\/pre>\n<p>3) WS subscribe request<\/p>\n<pre>\r\nOpcode: Text\r\nPayload: {\r\n  \"type\" : \"subscribe\",\r\n  \"event\" : \"user\"\r\n}\r\n<\/pre>\n<p>4) WS subscribe response<\/p>\n<pre>\r\nOpcode: Text\r\nPayload: {\r\n  \"type\" : \"subscribe\",\r\n  \"event\" : \"user\",\r\n  \"status\" = \"accepted\"\r\n}\r\n<\/pre>\n<p>5) WS event frame 1<\/p>\n<pre>\r\nOpcode: Text\r\nPayload: {\r\n  \"type\" : \"data\",\r\n  \"event\" : \"user\",\r\n  \"data\" = [\r\n    { \"id\" = 000, \"name\" = \"admin\", \"email\" = \"admin@site.com\" },\r\n    { \"id\" = 001, \"name\" = \"user1\", \"email\" = \"old_user@site.com\" }\r\n  ]\r\n}\r\n<\/pre>\n<p>6) WS event frame 2<\/p>\n<pre>\r\nOpcode: Text\r\nPayload: {\r\n  \"type\" : \"data\",\r\n  \"event\" : \"user\",\r\n  \"data\" = [\r\n    { \"id\" = 000, \"name\" = \"admin\", \"email\" = \"admin@site.com\" },\r\n    { \"id\" = 001, \"name\" = \"user1\", \"email\" = \"new_user@site.com\" }\r\n  ]\r\n}\r\n<\/pre>\n<p>7) WS unsubscribe request<\/p>\n<pre>\r\nOpcode: Text\r\nPayload: {\r\n  \"type\" : \"unsubscribe\",\r\n  \"event\" : \"user\"\r\n}\r\n<\/pre>\n<p>8) WS unsubscribe response<\/p>\n<pre>\r\nOpcode: Text\r\nPayload: {\r\n  \"type\" : \"unsubscribe\",\r\n  \"event\" : \"user\",\r\n  \"status\" = \"accepted\"\r\n}\r\n<\/pre>\n<p>9) WS close frame<\/p>\n<pre>\r\nOpcode: Connection Close\r\nPayload: {}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTTP is a RESTful protocol with a uni-directional communication. This means the client needs to poll to get updates from<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[55],"tags":[],"_links":{"self":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/2509"}],"collection":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2509"}],"version-history":[{"count":1,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/2509\/revisions"}],"predecessor-version":[{"id":16842,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/2509\/revisions\/16842"}],"wp:attachment":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2509"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}