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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
---
title: EventSource
slug: Web/API/EventSource
tags:
- API
- Interface
- eventos
translation_of: Web/API/EventSource
---
<p>{{APIRef("Websockets API")}}</p>
<p>A interface <code>EventSource</code> é usada para receber eventos enviados pelo servidor (<span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">server-sent events</a></span>). Ele se conecta via HTTP em um servidor e recebe eventos com o formato <code>text/event-stream</code>. A conexão permanece aberta até ser fechada chamando {{domxref("EventSource.close()")}}.</p>
<p>Assim que a conexão estiver aberta, mensagens recebidas do servidor são entregues para o seu código na forma de eventos {{event("message")}}.</p>
<p>Ao contrário dos <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, server-sent events são unidirecionais; ou seja, mensagens são entregues em uma direção, do servidor para o cliente (por exemplo, um navegador web). Isso torna-os uma excelente escolha quando não há necessidade de enviar mensagens do cliente para o servidor. Por exemplo, <code>EventSource</code> é uma abordagem útil para lidar com atualizações de status de mídias sociais, feeds de notícias, or entregar dados para um mecanismo de <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">armazenamento do lado cliente </a>como o <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> ou o <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">web storage</a>.</p>
<h2 id="Method_overview" name="Method_overview">Construtor</h2>
<dl>
<dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
<dd>Cria um novo <code>EventSource</code> para receber enventos enviados pelo servidor de uma URL específica, opcionalmente no modo de credenciais.</dd>
</dl>
<h2 id="Attributes" name="Attributes">Propriedades</h2>
<p> </p>
<p><em>Essa interface também herda propriedades do seu pai, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
<dd>Um número representando o estado da conexão. Valores possíveis são <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), ou <code>CLOSED</code> (<code>2</code>).</dd>
<dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
<dd>Uma {{domxref("DOMString")}} representando a URL da origem.</dd>
<dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
<dd>Um {{domxref("Boolean")}} indicando se a <code>EventSource</code> foi instanciada com credenciais cross-origin (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>) definidas (<code>true</code>) ou não (<code>false</code>, o padrão).</dd>
<dt>
<h3 id="Eventos">Eventos</h3>
</dt>
<dt>{{domxref("EventSource.onerror")}}</dt>
<dd>É um {{event("Event_handlers")}} chamado quando um erro ocorre e o evento {{event("error")}} é despachado para o objeto <code>EventSource</code>.</dd>
<dt>{{domxref("EventSource.onmessage")}}</dt>
<dd>É um {{event("Event_handlers")}} chamado quando um evento {{event("message")}} é recebido, ou seja, quando uma mensagem está sendo recebida da origem.</dd>
<dt>{{domxref("EventSource.onopen")}}</dt>
<dd>É um {{event("Event_handlers")}} chamado quando um evento {{event("open")}} é recebido, ou seja, logo após a abertura da conexão.</dd>
</dl>
<h2 id="Methods" name="Methods">Métodos</h2>
<p><em>Essa interface herda métodos de seu pai, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("EventSource.close()")}}</dt>
<dd>Fecha a conexão, se houver, e define o atributo <code>readyState</code> como <code>CLOSED</code>. Se a conexão já estiver fechada, esse método não faz nada.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<p>Nesse exemplo básico, um <code>EventSource</code> é criado para receber eventos do servidor; a página com o nome <code>"sse.php"</code> é responsável por gerar os eventos.</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> evtSource <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">EventSource</span><span class="punctuation token">(</span><span class="string token">'sse.php'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> eventList <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
evtSource<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
<span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"li"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
newElement<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"message: "</span> <span class="operator token">+</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
eventList<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newElement<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<p>Cada evento recebido faz com que o handler do evento <code>onmessage</code> no objeto <code>EventSource</code> seja executado. Ele, em contrapartida, cria um novo elemento {{HTMLElement("li")}} e escreve os dados da mensagem nele, e em seguida concatena o novo elemento na lista já presente no documento.</p>
<div class="note">
<p><strong>Nota</strong>: Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
</div>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte a 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>Disponível em workers compartilhados e dedicados<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">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte a EventSource</td>
<td>4.4</td>
<td>45</td>
<td>{{CompatNo}}</td>
<td>12</td>
<td>4.1</td>
</tr>
<tr>
<td>Disponível em workers compartilhados e dedicados<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] Mas<a href="https://github.com/w3c/ServiceWorker/issues/947"> ainda não em service workers</a>.</p>
<p> </p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-sent events</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Usando server-sent events</a></li>
</ul>
<p> </p>
|
