{"id":378,"date":"2019-03-03T23:54:53","date_gmt":"2019-03-03T18:24:53","guid":{"rendered":"http:\/\/uitutorials.in\/wp\/?p=378"},"modified":"2019-09-30T10:34:09","modified_gmt":"2019-09-30T05:04:09","slug":"server-sent-events","status":"publish","type":"post","link":"https:\/\/uitutorials.in\/wp\/server-sent-events\/","title":{"rendered":"Server-sent events"},"content":{"rendered":"<p><strong>Server-Sent Events utilize a regular HTTP octet streams,<\/strong> and therefore are limited to the browser\u2019s connection <a href=\"https:\/\/stackoverflow.com\/questions\/985431\/max-parallel-http-connections-in-a-browser\">pool limit of ~6 concurrent HTTP connections per server<\/a>. But <strong>they provide a standard way of pushing data from the server to the clients over HTTP,<\/strong> which load balancers and proxies understand out-of-the-box. The biggest advantage being that, exactly as WebSockets, they <strong>utilize only one TCP connection.<\/strong> The biggest disadvantage is that <strong>Server-Sent Events don\u2019t provide a mechanism to detect dropped clients<\/strong> until a message is sent.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2019\/03\/SSE.png\" alt=\"\" width=\"1053\" height=\"393\" class=\"alignnone size-full wp-image-347\" srcset=\"https:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2019\/03\/SSE.png 1053w, https:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2019\/03\/SSE-300x112.png 300w, https:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2019\/03\/SSE-768x287.png 768w, https:\/\/uitutorials.in\/wp\/wp-content\/uploads\/2019\/03\/SSE-1024x382.png 1024w\" sizes=\"auto, (max-width: 1053px) 100vw, 1053px\" \/><\/p>\n<p name=\"e280\" id=\"e280\" class=\"graf graf--p graf-after--figure\"><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/server-sent-events.html#server-sent-events\" data-href=\"https:\/\/html.spec.whatwg.org\/multipage\/server-sent-events.html#server-sent-events\" class=\"markup--anchor markup--p-anchor\" rel=\"noopener\" target=\"_blank\">They are standardized via HTML 5<\/a>, most HTTP servers support them out-of-the-box, and <a href=\"https:\/\/caniuse.com\/#search=server%20sent%20events\" data-href=\"https:\/\/caniuse.com\/#search=server%20sent%20events\" class=\"markup--anchor markup--p-anchor\" rel=\"noopener\" target=\"_blank\">they are available in most browsers except for Internet Explorer and Edge<\/a> where they are <a href=\"https:\/\/github.com\/Yaffle\/EventSource\" data-href=\"https:\/\/github.com\/Yaffle\/EventSource\" class=\"markup--anchor markup--p-anchor\" rel=\"noopener\" target=\"_blank\">available through a polyfill<\/a>.<\/p>\n<p>Rails, Roda and Sinatra support them out-of-the-box. And they have a simple protocol\u200a\u2014\u200apayloads are just prefixed with one of the following keywords data:, event:, id: and retry:. data: is used to push a payload, event: is optional and indicates the type of data being pushed, id: is also optional and indicates the event\u2019s ID, finally retry: instructs the client to change it\u2019s connection retry timeout\u200a\u2014\u200a<strong>unlike WebSockets, Server-Sent Events have a reconnect mechanism built-in,<\/strong> though this is a feature that most WebSocket libraries add any way.<\/p>\n<p>to send data <strong>to other clients a regular HTTP POST request is made to <\/strong>the server. A heartbeat is kept to keep the connections alive (WebSockets also do that) and to detect dropped clients (since dropped connections can only be detected when data is pushed to them).<\/p>\n<h3>Reference<\/h3>\n<ul>\n<li><a href=\"https:\/\/blog.stanko.io\/do-you-really-need-websockets-343aed40aa9b\" rel=\"noopener\" target=\"_blank\">TypeOfCommunications<\/a><\/li>\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/\" rel=\"noopener\" target=\"_blank\">HTML5<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\" rel=\"noopener\" target=\"_blank\">Concept<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Server-sent_events\/Using_server-sent_events\" rel=\"noopener\" target=\"_blank\">Using Server-Sent-Events<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventSource\" rel=\"noopener\" target=\"_blank\">EventSource<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/eventsource\/\" rel=\"noopener\" target=\"_blank\">W3C EventSource<\/a><\/li>\n<li><a href=\"https:\/\/tools.ietf.org\/html\/rfc6202#section-2.2\" rel=\"noopener\" target=\"_blank\">Information<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Server-Sent Events utilize a regular HTTP octet streams, and therefore are limited to the browser\u2019s connection pool limit of ~6 concurrent HTTP connections per server. But they provide a standard way of pushing data from the server to the clients over HTTP, which load balancers and proxies understand out-of-the-box. The<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83],"tags":[53,48],"class_list":["post-378","post","type-post","status-publish","format-standard","hentry","category-others","tag-html5","tag-serversentevents","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=378"}],"version-history":[{"count":6,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/378\/revisions"}],"predecessor-version":[{"id":391,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/378\/revisions\/391"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}