{"id":51,"date":"2013-03-08T13:20:27","date_gmt":"2013-03-08T04:20:27","guid":{"rendered":"http:\/\/appw.jp\/html5x\/?p=51"},"modified":"2025-03-21T13:34:38","modified_gmt":"2025-03-21T04:34:38","slug":"server-sent-events%ef%bc%88eventsource%ef%bc%89%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%81%be%e3%81%99","status":"publish","type":"post","link":"http:\/\/appw.jp\/html5x\/?p=51","title":{"rendered":"Server-Sent Events\uff08EventSource\uff09\u3092\u8a66\u3057\u3066\u307f\u307e\u3059"},"content":{"rendered":"<p>Server-Sent Events \u3092\u8a66\u7528\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<p>\u300c<strong>Server-Sent Events W3C Candidate Recommendation 11 December 2012<\/strong>\u300d<\/p>\n<p>\u30b5\u30fc\u30d0\u304b\u3089\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u4fe1\u3057\u307e\u3059\u3002 \u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u3051\u53d6\u308b\u305f\u3081\u306b EventSource \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30a4\u30d9\u30f3\u30c8\u3092\u751f\u6210\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u306e URI \u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre><code>  var source = new EventSource('sse.php');\n<\/code><\/pre>\n<p>\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u751f\u6210\u3057\u305f\u3089\u3001\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u53d7\u3051\u53d6\u308a\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre><code>  source.onmessage = function(event) {\n    document.getElementById('msg').innerHTML = \n    '&lt;p&gt;' + event.data + '&lt;\/p&gt;';\n  }\n<\/code><\/pre>\n<p>\u4e0a\u8a18\u306f\u3001event \u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u306a\u3044\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u00a0event \u30bf\u30a4\u30d7\u306f message \u3067\u3059\u3002addEventListener() \u3092\u4f7f\u7528\u3059\u308b\u3068\u00a0\u00a0event \u30bf\u30a4\u30d7\u3054\u3068\u306b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002<\/p>\n<pre><code>  source.addEventListener('message', function(event){\n    document.getElementById('msg').innerHTML = \n    '&lt;p&gt;' + event.data + '&lt;\/p&gt;'\n  },false);\n<\/code><\/pre>\n<p>\u30a4\u30d9\u30f3\u30c8\u3092\u9001\u4fe1\u3059\u308b\u30b5\u30fc\u30d0\u30b5\u30a4\u30c9\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u306f PHP \u3067\u7528\u610f\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre>&lt;?php \nheader('Content-Type: text\/event-stream');\nheader('Cache-Control: no-cache');\n\n  echo 'event: ' . 'messages' . PHP_EOL;\n  echo 'id: ' . time() . PHP_EOL;\n  echo 'data: ' . 'Server Time ' . date('h:i:s', time()) . ', Server Sent Events Sample.' . PHP_EOL;\n  echo 'retry: ' . '5000' . PHP_EOL;\n  echo PHP_EOL;\n  ob_flush();\n  flush();\n?&gt;<\/pre>\n<pre><code><\/code><\/pre>\n<p>\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u4fe1\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<pre><code><\/code><\/pre>\n<pre>&lt;div id=\"msg\"&gt;&lt;p&gt;\u30e1\u30c3\u30bb\u30fc\u30b8&lt;\/p&gt;&lt;\/div&gt;\n&lt;script type=\"text\/javascript&gt;\n  function sse(){\n    if (typeof (EventSource) !== 'undefined') {\n        var source = new EventSource('sse.php');\n                \n        source.addEventListener('messages', function(event){\n            document.getElementById('msg').innerHTML = '&lt;p&gt;' + event.data + '&lt;\/p&gt;' ;\n        },false);\n         \n        source.addEventListener('end', function(event){\n            document.getElementById('msg').innerHTML = '&lt;p&gt;\u7d42\u4e86\u3057\u307e\u3059\u3002&lt;\/p&gt;' ;\n            source.close();\n        },false);\n\n        source.onerror = function (event) {\n            if (source.readyState === EventSource.CLOSED) {\n                document.getElementById('msg').innerHTML = '&lt;p&gt;\u7d42\u4e86\u3057\u3066\u3044\u307e\u3059\u3002&lt;\/p&gt;' ;\n            }\n            else if (source.readyState === EventSource.OPEN) {\n                document.getElementById('msg').innerHTML = '&lt;p&gt;\u7d42\u4e86\u3057\u307e\u3059\u3002&lt;\/p&gt;' ;\n                source.close();\n            }\n        }        \n    } else {\n        document.getElementById('msg').innerHTML = '&lt;p&gt;Server-Sent Events \u306f\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002&lt;\/p&gt;' ;\n    }\n  }\n  window.onload = sse;\n&lt;\/script&gt;<\/pre>\n<pre><code><\/code><\/pre>\n<p>\u4ee5\u4e0b\u306b\u3066\u5b9f\u969b\u306b\u30a4\u30d9\u30f3\u30c8\u306e\u53d7\u4fe1\u3092\u8a66\u307f\u307e\u3059\u3002<\/p>\n<pre><code><\/code><\/pre>\n<div id=\"msg\">\n<p>\u30e1\u30c3\u30bb\u30fc\u30b8<\/p>\n<\/div>\n<pre><code>\n<script type=\"text\/javascript\">\r\n  var lastid = 0;\r\n  function sse(){\r\n    var source;\r\n    var sv;\r\n    if (typeof (EventSource) !== 'undefined') {\r\n        sv = 'sse.php' + '?retry=10000' + '&amp;id=' + lastid + '';\r\n        source = new EventSource(sv);\r\n                \r\n        document.getElementById('msg').innerHTML = '<p>\u53d7\u4fe1\u958b\u59cb<\/p>' ;\r\n\r\n        source.addEventListener('messages', function(event){\r\n          if (event.lastEventId > lastid) {\r\n   \u3000\u3000\u3000\u3000  document.getElementById('msg').innerHTML = '<p>' + event.data + '<\/p>' ;\r\n            lastid = event.lastEventId;\r\n          }\r\n        },false);\r\n         \r\n        source.addEventListener('end', function(event){\r\n            document.getElementById('msg').innerHTML = '<p>' + event.data + '<\/p>' ;\r\n            source.close();\r\n        },false);\r\n\r\n        source.onerror = function (event) {\r\n            if (source.readyState === EventSource.CLOSED) {\r\n                document.getElementById('msg').innerHTML = '<p>\u7d42\u4e86\u3057\u3066\u3044\u307e\u3059\u3002<\/p>' ;\r\n            }\r\n            else if (source.readyState === EventSource.OPEN) {\r\n                document.getElementById('msg').innerHTML = '<p>\u7d42\u4e86\u3057\u307e\u3059\u3002<\/p>' ;\r\n                source.close();\r\n            }\r\n            else if (source.readyState === EventSource.CONNECTING) {\r\n            }\r\n        }        \r\n    } else {\r\n        document.getElementById('msg').innerHTML = '<p>Server-Sent Events \u306f\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<\/p>' ;\r\n    }\r\n  }\r\n  window.onload = sse;\r\n<\/script>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Server-Sent Events \u3092\u8a66\u7528\u3057\u3066\u307f\u307e\u3059\u3002 \u300cServer-Sent Events W3C Candidate Recommendation 11 December 2012\u300d \u30b5\u30fc\u30d0\u304b\u3089\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u4fe1\u3057\u307e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=51"}],"version-history":[{"count":10,"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":187,"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions\/187"}],"wp:attachment":[{"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/appw.jp\/html5x\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}