From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/eventsource/index.html | 175 +++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 files/pt-br/web/api/eventsource/index.html (limited to 'files/pt-br/web/api/eventsource/index.html') diff --git a/files/pt-br/web/api/eventsource/index.html b/files/pt-br/web/api/eventsource/index.html new file mode 100644 index 0000000000..9b9efaaf46 --- /dev/null +++ b/files/pt-br/web/api/eventsource/index.html @@ -0,0 +1,175 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Interface + - eventos +translation_of: Web/API/EventSource +--- +

{{APIRef("Websockets API")}}

+ +

A interface EventSource é usada para receber eventos enviados pelo servidor (server-sent events). Ele se conecta via HTTP em um servidor e recebe eventos com o formato text/event-stream. A conexão permanece aberta até ser fechada chamando {{domxref("EventSource.close()")}}.

+ +

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")}}.

+ +

Ao contrário dos WebSockets, 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, EventSource é 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 armazenamento do lado cliente como o IndexedDB ou o web storage.

+ +

Construtor

+ +
+
{{domxref("EventSource.EventSource", "EventSource()")}}
+
Cria um novo EventSource para receber enventos enviados pelo servidor de uma URL específica, opcionalmente no modo de credenciais.
+
+ +

Propriedades

+ +

 

+ +

Essa interface também herda propriedades do seu pai, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Um número representando o estado da conexão. Valores possíveis são CONNECTING (0), OPEN (1), ou CLOSED (2).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Uma {{domxref("DOMString")}} representando a URL da origem.
+
{{domxref("EventSource.withCredentials")}} {{readonlyinline}}
+
Um {{domxref("Boolean")}} indicando se a EventSource foi instanciada com credenciais cross-origin (CORS) definidas (true) ou não (false, o padrão).
+
+

Eventos

+
+
{{domxref("EventSource.onerror")}}
+
É um {{domxref("EventHandler")}} chamado quando um erro ocorre e o evento {{event("error")}} é despachado para o objeto EventSource.
+
{{domxref("EventSource.onmessage")}}
+
É um {{domxref("EventHandler")}} chamado quando um evento {{event("message")}} é recebido, ou seja, quando uma mensagem está sendo recebida da origem.
+
{{domxref("EventSource.onopen")}}
+
É um {{domxref("EventHandler")}} chamado quando um evento {{event("open")}} é recebido, ou seja, logo após a abertura da conexão.
+
+ +

Métodos

+ +

Essa interface herda métodos de seu pai, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Fecha a conexão, se houver, e define o atributo readyState como CLOSED. Se a conexão já estiver fechada, esse método não faz nada.
+
+ +

Exemplos

+ +

Nesse exemplo básico, um EventSource é criado para receber eventos do servidor; a página com o nome "sse.php" é responsável por gerar os eventos.

+ +
var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+ +

Cada evento recebido faz com que o handler do evento onmessage no objeto EventSource 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.

+ +
+

Nota: Você pode encontrar um exemplo completo no GitHub — veja Simple SSE demo using PHP.

+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidade de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte a EventSource6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Disponível em workers compartilhados e dedicados[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte a EventSource4.445{{CompatNo}}124.1
Disponível em workers compartilhados e dedicados[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Mas ainda não em service workers.

+ +

 

+ +

Veja também

+ + + +

 

-- cgit v1.2.3-54-g00ecf