blob: 33922c16f4f79b07e212b47321d5d026dc5caff6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: Server-sent events
slug: Web/API/Server-sent_events
tags:
- API
- SSE
- Server-sent events
- 概要
translation_of: Web/API/Server-sent_events
---
<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
<p>伝統的には、ウェブページが新たなデータを受け取るために、サーバーにリクエストを送信しなければなりません。すなわち、ページがサーバーからデータを要求します。サーバー送信イベントによって、サーバーがウェブページにメッセージをプッシュ送信することにより、サーバーからウェブページへ新たなデータをいつでも送信することができます。入ってくるメッセージは、ウェブページ内の<em><a href="/ja/docs/DOM/event">イベント</a>およびデータ</em>として扱うことができます。</p>
<h2 id="概念と使用方法">概念と使用方法</h2>
<p>Server-Sent events の使い方を学ぶには、 <a href="/ja/docs/Web/API/Server-sent_events/Using_server-sent_events">Server-Sent events の利用</a>を参照してください。</p>
<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>
<dl>
<dt>{{domxref("EventSource")}}</dt>
<dd>サーバーへの接続、イベントやデータの受信、エラー、コネクションの切断など、すべての機能の扱いを定義します。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<ul>
<li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">PHP を使用した簡単な SSE のデモ</a></li>
</ul>
<h2 id="Specification" name="Specification">仕様策定状況</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<thead>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
</thead>
<tbody>
<tr>
<td>EventSource の対応</td>
<td>6</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("6.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>5</td>
</tr>
<tr>
<td>共有かつ専用ワーカーで使用可<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("53.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<thead>
<tr>
<th>機能</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>EventSource の対応</td>
<td>4.4</td>
<td>45</td>
<td>{{CompatNo}}</td>
<td>12</td>
<td>4.1</td>
</tr>
<tr>
<td>共有かつ専用ワーカーで使用可<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("53.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 但し<a href="https://github.com/w3c/ServiceWorker/issues/947">サービスワーカーはまだ</a>です。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<h3 id="Tools" name="Tools">ツール</h3>
<ul>
<li>Remy Sharp による <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource のポリフィル</a></li>
<li>Yaffle による <a class="link-https" href="https://github.com/Yaffle/EventSource">EventSource のポリフィル</a></li>
<li>Rick Waldron による <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery プラグイン</a></li>
<li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">declarative SSE support</a></li>
</ul>
<h3 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連トピック</h3>
<ul>
<li><a href="/ja/docs/AJAX" title="AJAX">AJAX</a></li>
<li><a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a></li>
<li><a href="/ja/docs/WebSockets" title="WebSockets">WebSockets</a></li>
</ul>
<h3 id="Other_resources" name="Other_resources">その他のリソース</h3>
<ul>
<li>Server-sent events を使用した <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter のようなアプリケーション</a>。<a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline">コードは Github にあります</a>。</li>
<li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
<li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
</ul>
|
