{"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>\u00a0<\/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\u2019s\u00a0<b>new<\/b>\u00a0information available.<\/p>\n<p>4.When there\u2019s 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=\u201dbanner\u201d]\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\u2019s new information available.\n<ol>\n<li>.Real-time traffic from server to client, mostly that\u2019s what you\u2019ll need<\/li>\n<li>.You\u2019ll 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>\u00a0<\/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\u2019ll 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\/\">Pusher<\/a>(https:\/\/pusher.com\/) This way you\u2019ll 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=\u201dbanner\u201d]\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\u2019s \u201cdata\u201d 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\u2019ll 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[pastacode lang=\u201dphp\u201d manual=\u201d%2F%2Fcreate%20a%20new%20WebSocket%20object.%0Awebsocket%20%3D%20new%20WebSocket(%22ws%3A%2F%2Flocalhost%3A9000%2Fdaemon.php%22)%3B%20%0Awebsocket.onopen%20%3D%20function(evt)%20%0A%7B%0A%20%2F*%20do%20stuff%20*%2F%20%0A%7D%0A%3B%20%2F%2Fon%20open%20event%0Awebsocket.onclose%20%3D%20function(evt)%20%0A%7B%20%0A%2F*%20do%20stuff%20*%2F%20%0A%7D%0A%3B%20%2F%2Fon%20close%20event%0Awebsocket.onmessage%20%3D%20function(evt)%20%0A%7B%0A%20%2F*%20do%20stuff%20*%2F%20%7D%3B%20%2F%2Fon%20message%20event%0Awebsocket.onerror%20%3D%20function(evt)%20%0A%7B%0A%20%2F*%20do%20stuff%20*%2F%20%0A%7D%0A%3B%20%2F%2Fon%20error%20event%0Awebsocket.send(message)%3B%20%2F%2Fsend%20method%0Awebsocket.close()%3B%20%2F%2Fclose%20method%0A\u201d message=\u201dphp code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201djavascript\u201d manual=\u201dJQUERY%0A%24(document).ready(function()%0A%7B%0A%20%20%20%20%2F%2FOpen%20a%20WebSocket%20connection.%0A%20%20%20%20var%20wsUri%20%3D%20%22ws%3A%2F%2Flocalhost%3A9000%2Fdaemon.php%22%3B%20%20%20%0A%20%20%20%20websocket%20%3D%20new%20WebSocket(wsUri)%3B%20%0A%20%20%20%20%2F%2FConnected%20to%20server%0A%20%20%20%20websocket.onopen%20%3D%20function(ev)%20%0A%7B%0A%20%20%20%20%20%20%20%20alert(\u2018Connected%20to%20server%20\u2019)%3B%0A%20%7D%0A%20%20%20%20%2F%2FConnection%20close%0A%20%20%20%20websocket.onclose%20%3D%20function(ev)%20%0A%7B%20%0A%20%20%20%20%20%20%20%20alert(\u2018Disconnected\u2019)%3B%0A%20%7D%3B%0A%20%20%20%20%20%2F%2FMessage%20Receved%0A%20%20%20%20websocket.onmessage%20%3D%20function(ev)%20%0A%7B%20%0A%20%20%20%20%20%20%20%20alert(\u2018Message%20\u2019%2Bev.data)%3B%0A%7D%3B%20%0A%20%20%20%20%2F%2FError%0A%20%20%20%20websocket.onerror%20%3D%20function(ev)%0A%20%7B%20%0A%20%20%20%20%20%20%20%20alert(\u2018Error%20\u2019%2Bev.data)%3B%0A%7D%3B%0A%20%20%20%20%20%2F%2FSend%20a%20Message%0A%20%20%20%20%24(\u2018%23send\u2019).click(function()%0A%7B%20%0A%20%20%20%20%20%20%20%20var%20mymessage%20%3D%20\u2019This%20is%20a%20test%20message\u2019%3B%20%0A%20%20%20%20%20%20%20%20websocket.send(mymessage)%3B%0A%20%7D)%3B%0A%7D)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><b>Server<\/b>\u2013<b>sent events<\/b>\u00a0(SSE):<\/p>\n<ul>\n<li><b>Server<\/b>\u2013<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}]}}