{"id":218520,"date":"2019-12-31T13:45:25","date_gmt":"2019-12-31T13:45:25","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=218520"},"modified":"2020-01-02T06:34:45","modified_gmt":"2020-01-02T06:34:45","slug":"server-sent-events-in-javascript","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/","title":{"rendered":"Server-Sent Events in JavaScript"},"content":{"rendered":"\n<p>In this blog we will learn how we can use the Server-Send Events in JS.<\/p>\n\n\n\n<p>The Server-Sent Event is an EventSource Class , which keeps the server connection connected and receive the server response continuously.<\/p>\n\n\n\n<p>We can use this when we have to load the large data at once.<\/p>\n\n\n\n<p><strong>Now, we will see how we can create an object of the Server-Sent Event class on client end<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">        &lt;script&gt;\n            var source = new EventSource(&quot;example.php&quot;);\n            source.onmessage = function(event) {\n                var details = JSON.parse(event.data);\n                document.getElementById(&quot;show_data&quot;).innerHTML += details[&#039;name&#039;] + &quot;&lt;br&gt;&quot;;\n            };\n        &lt;\/script&gt;<\/pre>\n\n\n\n<p>Here, first we create an object of EventSource class.<\/p>\n\n\n\n<p>Than, we call the onmessage function of EventSource Class.<\/p>\n\n\n\n<p>Whenever server sent the response then onmessage function calls automatically by the Server-Sent Event and display the data in the selected element.<\/p>\n\n\n\n<p><strong>Now, we will look into the server end code example.<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\nheader(&#039;Content-Type: text\/event-stream&#039;);\nheader(&#039;Cache-Control: no-cache&#039;);\n\n$details = array();\n$details[&#039;name&#039;] = &quot;john doe&quot;;\necho &quot;data: &quot; . json_encode($details) . &quot;\\n\\n&quot;;\nflush();\n?&gt;<\/pre>\n\n\n\n<p>You have to defined the below header only than it will worked.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">header(&#039;Content-Type: text\/event-stream&#039;);\nheader(&#039;Cache-Control: no-cache&#039;);<\/pre>\n\n\n\n<p> Output<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"390\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png\" alt=\"output-1\" class=\"wp-image-218550\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-300x98.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-250x81.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-768x250.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1.png 1233w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Complete Code<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;html&gt;\n    &lt;head&gt;\n        &lt;title&gt;Server-Sent Events&lt;\/title&gt;\n        &lt;script&gt;\n            var source = new EventSource(&quot;example.php&quot;);\n            source.onmessage = function(event) {\n                var details = JSON.parse(event.data);\n                document.getElementById(&quot;show_data&quot;).innerHTML += details&#091;&#039;name&#039;] + &quot;&lt;br&gt;&quot;;\n            };\n        &lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n      &lt;div id=&quot;show_data&quot;&gt;&lt;\/div&gt; \n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p><strong>In case you have any Query then feel free to ask in the comment section below.<\/strong>&nbsp;<strong>I hope It will help you. Thanks<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will learn how we can use the Server-Send Events in JS. The Server-Sent Event is an EventSource Class , which keeps the server connection connected and receive the server response continuously. We can use this when we have to load the large data at once. Now, we will see how we <a href=\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":218,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-218520","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Server-Sent Events in JavaScript - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Server-Sent Events in JavaScript - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog we will learn how we can use the Server-Send Events in JS. The Server-Sent Event is an EventSource Class , which keeps the server connection connected and receive the server response continuously. We can use this when we have to load the large data at once. Now, we will see how we [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-31T13:45:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-02T06:34:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png\" \/>\n<meta name=\"author\" content=\"Jawahar Lal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jawahar Lal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\"},\"author\":{\"name\":\"Jawahar Lal\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/c297c18973bfa8496fc239f168fe23bd\"},\"headline\":\"Server-Sent Events in JavaScript\",\"datePublished\":\"2019-12-31T13:45:25+00:00\",\"dateModified\":\"2020-01-02T06:34:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\"},\"wordCount\":159,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\",\"url\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\",\"name\":\"Server-Sent Events in JavaScript - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png\",\"datePublished\":\"2019-12-31T13:45:25+00:00\",\"dateModified\":\"2020-01-02T06:34:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1.png\",\"width\":1233,\"height\":401,\"caption\":\"output-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Server-Sent Events in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/c297c18973bfa8496fc239f168fe23bd\",\"name\":\"Jawahar Lal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/99f140efcc9e53f01a3a625b0067d464c7ae4cdb24303f0ffcf9d03d6b34a7d0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/99f140efcc9e53f01a3a625b0067d464c7ae4cdb24303f0ffcf9d03d6b34a7d0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Jawahar Lal\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/jawaharlal-oc401\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Server-Sent Events in JavaScript - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Server-Sent Events in JavaScript - Webkul Blog","og_description":"In this blog we will learn how we can use the Server-Send Events in JS. The Server-Sent Event is an EventSource Class , which keeps the server connection connected and receive the server response continuously. We can use this when we have to load the large data at once. Now, we will see how we [...]","og_url":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-12-31T13:45:25+00:00","article_modified_time":"2020-01-02T06:34:45+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png","type":"","width":"","height":""}],"author":"Jawahar Lal","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Jawahar Lal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/"},"author":{"name":"Jawahar Lal","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/c297c18973bfa8496fc239f168fe23bd"},"headline":"Server-Sent Events in JavaScript","datePublished":"2019-12-31T13:45:25+00:00","dateModified":"2020-01-02T06:34:45+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/"},"wordCount":159,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/","url":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/","name":"Server-Sent Events in JavaScript - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1-1200x390.png","datePublished":"2019-12-31T13:45:25+00:00","dateModified":"2020-01-02T06:34:45+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/12\/output-1.png","width":1233,"height":401,"caption":"output-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/server-sent-events-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Server-Sent Events in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/c297c18973bfa8496fc239f168fe23bd","name":"Jawahar Lal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/99f140efcc9e53f01a3a625b0067d464c7ae4cdb24303f0ffcf9d03d6b34a7d0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/99f140efcc9e53f01a3a625b0067d464c7ae4cdb24303f0ffcf9d03d6b34a7d0?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Jawahar Lal"},"url":"https:\/\/webkul.com\/blog\/author\/jawaharlal-oc401\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/218520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/218"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=218520"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/218520\/revisions"}],"predecessor-version":[{"id":218706,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/218520\/revisions\/218706"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=218520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=218520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=218520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}