{"id":982,"date":"2017-03-20T11:26:56","date_gmt":"2017-03-20T05:56:56","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=982"},"modified":"2017-03-29T12:10:04","modified_gmt":"2017-03-29T06:40:04","slug":"long-polling-websockets-server-sent-events-sse-comet","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/long-polling-websockets-server-sent-events-sse-comet\/","title":{"rendered":"PHP &#8211; What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet"},"content":{"rendered":"<h4 id=\"regular-http\"><span style=\"color: #800000;\"><b>Regular HTTP:<\/b><\/span><\/h4>\n<ul>\n<li>Before you can understand these technologies, you have to understand\u00a0classic HTTP web traffic first.\n<ol>\n<li>A client requests a webpage from a server.<\/li>\n<li>The server calculates the response<\/li>\n<li>The server sends the response to the client.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-987 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/m-300x83.png\" alt=\"\" width=\"474\" height=\"131\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/m-300x83.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/m.png 935w\" sizes=\"(max-width: 474px) 100vw, 474px\" \/><\/p>\n<h4 id=\"ajax-polling\"><span style=\"color: #800080;\"><b>Ajax Polling<\/b><b>:<\/b><\/span><\/h4>\n<p>1.A client requests a webpage from a server using regular HTTP (see HTTP above).<\/p>\n<p>2.The requested webpage executes JavaScript which requests a file from the server at regular intervals (e.g. 0.5 seconds).<\/p>\n<p>3.The server calculates each response and sends it back, just like normal HTTP traffic.<\/p>\n<p><img decoding=\"async\" class=\" wp-image-991 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/j-300x169.png\" alt=\"\" width=\"507\" height=\"285\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/j-300x169.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/j.png 925w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h4 id=\"ajax-long-polling\"><span style=\"color: #800080;\"><b>Ajax Long-Polling<\/b><b>:<\/b><\/span><\/h4>\n<p>1.A client requests a webpage from a server using regular HTTP (see HTTP above).<\/p>\n<p>2.The requested webpage executes JavaScript which requests a file from the server.<\/p>\n<p>3.The server does not immediately respond with the requested information but waits until there&#8217;s\u00a0<b>new<\/b>\u00a0information available.<\/p>\n<p>4.When there&#8217;s new information available, the server responds with the new information.<\/p>\n<p>5.The client receives the new information and immediately sends another request to the server, re-starting the process.<\/p>\n<p><img decoding=\"async\" class=\" wp-image-994 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/n-300x169.png\" alt=\"\" width=\"473\" height=\"266\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/n-300x169.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/n.png 840w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/p>\n[ad type=&#8221;banner&#8221;]\n<p><b>HTML5 Server Sent Events (SSE) \/ <\/b><b>EventSource<\/b><b>:<\/b><\/p>\n<ul>\n<li>.A client requests a webpage from a server using regular HTTP (see HTTP above).<\/li>\n<li>The requested webpage executes javascript which opens a connection to the server.<\/li>\n<li>The server sends an event to the client when there&#8217;s new information available.\n<ol>\n<li>.Real-time traffic from server to client, mostly that&#8217;s what you&#8217;ll need<\/li>\n<li>.You&#8217;ll want to use a server that has an event loop<\/li>\n<li>.Not possible to connect with a server from another domain<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-995 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/b-300x169.png\" alt=\"\" width=\"459\" height=\"259\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/b-300x169.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/b.png 954w\" sizes=\"(max-width: 459px) 100vw, 459px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><b>HTML5 <\/b><b>Websockets<\/b><b>:<\/b><\/p>\n<ul>\n<li>A client requests a webpage from a server using regular http (see HTTP above).<\/li>\n<li>The requested webpage executes JavaScript which opens a connection with the server.<\/li>\n<li>The server and the client can now send each other messages when new data (on either side) is available.\n<ol>\n<li>Real-time traffic from the server to the client\u00a0<b>and<\/b>\u00a0from the client to the server<\/li>\n<li>You&#8217;ll want to use a server that has an event loop<\/li>\n<li>With WebSockets it is possible to connect with a server from another domain.<\/li>\n<li>It is also possible to use a third party hosted websocket server, for example\u00a0<a href=\"http:\/\/pusher.com\/\" target=\"_blank\" rel=\"noopener\">Pusher<\/a>(https:\/\/pusher.com\/) This way you&#8217;ll only have to implement the client side, which is very easy!<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-1001 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/Picte1-300x169.png\" alt=\"\" width=\"479\" height=\"270\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/Picte1-300x169.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/Picte1.png 790w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/p>\n[ad type=&#8221;banner&#8221;]\n<p><b>Comet:<\/b><\/p>\n<p>Comet is a collection of techniques prior to HTML5 which use streaming and long-polling to achieve real time applications.<\/p>\n<p><b>What <\/b><b>is long-polling <\/b><b>and <\/b><b>short <\/b><b>polling ?<\/b><\/p>\n<p><b>Short-polling:<\/b><\/p>\n<p>Send a request to the server, get an instant answer. Do this every x seconds, minutes etc. to keep your application up-to-date. But: This costs a lot of requests.<\/p>\n<p><b>Long-polling:<\/b><\/p>\n<p>Send a request to the server, keep the connection open, get an answer when there&#8217;s &#8220;data&#8221; for you. This will cost you only one request (per user), but the request keeps a permanent connection between client and server up.<\/p>\n<p><b>How to <\/b><b>use:<\/b><\/p>\n<p>To test, simply change the URL in client\/client.js to the location of your server.php file, for local testing url: will do the job. Open the client\/index.html to simulate the client.<\/p>\n<p>While having the index.html opened in your browser, edit the data.txt on the server (and save it). You&#8217;ll see index.html instantly (!) getting the new content. Voila!<\/p>\n<p><b>Simple Chat Using <\/b><b>WebSocket<\/b><b> and PHP Socket<\/b><\/p>\n<ul>\n<li>The WebSocket is a feature of HTML5 for establishing a socket connections between a web browser and a server, once the connection has been established with the server, all WebSocket data (frames) are sent directly over a socket rather than usual HTTP response and requests, giving us much faster and persistent communication between a web browser and a server.<\/li>\n<li>Let\u2019s create a simple chat system using this cool technology (HTML5 WebSocket and PHP).<\/li>\n<\/ul>\n<p><b>Getting Started with <\/b><b>WebSocket<\/b><\/p>\n<ul>\n<li>Client side WebSocket implementation is very easy, the entire code consist of few methods and events. Have a look at code below for example.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">php code<\/span> <\/div> <pre class=\"language-php code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-php code-embed-code\">\/\/create a new WebSocket object.<br\/>websocket = new WebSocket(&quot;ws:\/\/localhost:9000\/daemon.php&quot;); <br\/>websocket.onopen = function(evt) <br\/>{<br\/> \/* do stuff *\/ <br\/>}<br\/>; \/\/on open event<br\/>websocket.onclose = function(evt) <br\/>{ <br\/>\/* do stuff *\/ <br\/>}<br\/>; \/\/on close event<br\/>websocket.onmessage = function(evt) <br\/>{<br\/> \/* do stuff *\/ }; \/\/on message event<br\/>websocket.onerror = function(evt) <br\/>{<br\/> \/* do stuff *\/ <br\/>}<br\/>; \/\/on error event<br\/>websocket.send(message); \/\/send method<br\/>websocket.close(); \/\/close method<\/code><\/pre> <\/div>\n<ul>\n<li>To open the socket connection, we simply call\u00a0<i>new <\/i><i>WebSocket<\/i><i>(ws:\/\/SERVER URL)<\/i>, since WebSocket uses a different protocol for the connections,<\/li>\n<li>we use\u00a0<i>ws:\/\/<\/i>instead of http:\/\/, followed by host, port number and daemon script in your server:<\/li>\n<\/ul>\n<p>Right after opening the connection, we need to attach some event handlers that let us know status of connectivity, errors and incoming messages, for your references:<\/p>\n<ul>\n<ul>\n<li><b>WebSocket<\/b><b>(<\/b><b>wsUri<\/b><b>)<\/b>\u2014 creates a new WebSocket object.<\/li>\n<li><b>.<\/b><b>onopen<\/b>\u2014 Event occurs when connection is established.<\/li>\n<li><b>.<\/b><b>onclose<\/b>\u2014 Event occurs when connection is closed.<\/li>\n<li><b>.<\/b><b>onmessage<\/b>\u2014 Event occurs when client receives data from server.<\/li>\n<li><b>.<\/b><b>onerror<\/b>\u2014 Event occurs when there is an error.<\/li>\n<li><b>.send(message)<\/b>\u2014 Transmits data to server using open connection.<\/li>\n<li><b>.close()<\/b>\u00a0\u2014 Terminates existing connection<\/li>\n<\/ul>\n<\/ul>\n<ul>\n<li>You can implement WebSocket with jQuery support in your webpage like this.<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">JQUERY<br\/>$(document).ready(function()<br\/>{<br\/>    \/\/Open a WebSocket connection.<br\/>    var wsUri = &quot;ws:\/\/localhost:9000\/daemon.php&quot;;   <br\/>    websocket = new WebSocket(wsUri); <br\/>    \/\/Connected to server<br\/>    websocket.onopen = function(ev) <br\/>{<br\/>        alert(&#039;Connected to server &#039;);<br\/> }<br\/>    \/\/Connection close<br\/>    websocket.onclose = function(ev) <br\/>{ <br\/>        alert(&#039;Disconnected&#039;);<br\/> };<br\/>     \/\/Message Receved<br\/>    websocket.onmessage = function(ev) <br\/>{ <br\/>        alert(&#039;Message &#039;+ev.data);<br\/>}; <br\/>    \/\/Error<br\/>    websocket.onerror = function(ev)<br\/> { <br\/>        alert(&#039;Error &#039;+ev.data);<br\/>};<br\/>     \/\/Send a Message<br\/>    $(&#039;#send&#039;).click(function()<br\/>{ <br\/>        var mymessage = &#039;This is a test message&#039;; <br\/>        websocket.send(mymessage);<br\/> });<br\/>});<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><b>Server<\/b>&#8211;<b>sent events<\/b>\u00a0(SSE):<\/p>\n<ul>\n<li><b>Server<\/b>&#8211;<b>sent events<\/b>\u00a0(SSE) is a web technology where a browser receives automatic updates from a\u00a0<b>server<\/b>\u00a0via HTTP protocol. SSE was known before as EventSource and first is introduced in 2006 by Opera.<\/li>\n<\/ul>\n<h4 id=\"overview\"><span style=\"color: #ff0000;\"><b>Overview:<\/b><\/span><\/h4>\n<ul>\n<li>\n<h5 id=\"server-sent-events-is-a-standard-describing-how-servers-can-initiate-data-transmission-towards-clients-once-an-initial-client-connection-has-been-established\">Server-sent events is a standard describing how servers can initiate data transmission towards clients once an initial client connection has been established.<\/h5>\n<\/li>\n<li>\n<h5 id=\"they-are-commonly-used-to-send-message-updates-or-continuous-data-streams-to-a-browser-client-and-designed-to-enhance-native-cross-browser-streaming-through-a-javascript-api-called-eventsource-throu\">They are commonly used to send message updates or continuous data streams to a browser client and designed to enhance native, cross-browser streaming through a JavaScript API called EventSource, through which a client requests a particular URL in order to receive an event stream.<\/h5>\n<\/li>\n<\/ul>\n<h4 id=\"comet\"><span style=\"color: #ff0000;\"><b>Comet:<\/b><\/span><\/h4>\n<ul>\n<li>Comet is a programming technique that enables web servers to send data to the client without having any need for the client to request it.<\/li>\n<li>This technique will produce more responsive applications than classic AJAX. In classic AJAX applications, web browser (client) cannot be notified in real time that the server data model has changed.<\/li>\n<li>The user must create a request (for example by clicking on a link) or a periodic AJAX request must happen in order to get new data fro the server.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Regular HTTP: Before you can understand these technologies, you have to understand\u00a0classic HTTP web traffic first. A client requests a webpage from a server. The server calculates the response The server sends the response to the client. Ajax Polling: 1.A client requests a webpage from a server using regular HTTP (see HTTP above). 2.The requested [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[1923,1929,1921,1928,1918,1936,1932,1935,1934,1938,1937,1939,1933,1927,1919,1924,1925,1922,1930,1931,1926,1920],"class_list":["post-982","post","type-post","status-publish","format-standard","hentry","category-php","tag-does-long-polling-or-websockets-with-socket-io-put-more-burden-on-both-the-server-and-clients","tag-how-are-html5-server-sent-events-sse-different-than-html5-websockets","tag-how-can-i-provide-https-support-for-server-sent-events","tag-how-do-i-stop-customers-from-churning-from-data-devices-what-are-the-best-ways-to-retain-them","tag-how-do-you-choose-between-server-sent-events","tag-http-long-polling-java","tag-long-polling-example","tag-long-polling-nodejs","tag-long-polling-php","tag-long-polling-spring","tag-long-polling-tutorial","tag-long-polling-vs-polling","tag-long-polling-vs-short-polling","tag-web-sockets-or-server-sent-events","tag-websockets-and-long-polling","tag-what-is-the-difference-between-a-socket-and-a-web-service","tag-what-is-the-difference-between-a-web-proxy-and-a-proxy-server","tag-what-is-the-difference-between-polling-and-long-polling-in-simple-terms","tag-what-is-the-difference-between-the-web-server-and-the-application-server","tag-which-is-more-important-how-do-they-communicate-with-each-other","tag-which-is-more-widely-supported-by-browsers-and-better-according-to-your-experience","tag-which-takes-more-server-resources-web-sockets-or-comet-long-polling"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=982"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/982\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}