aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/eventsource/index.html
blob: 4a80f6f52843c34f98bab96de3ffc609b28e893f (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
152
153
154
155
156
157
158
159
160
161
162
---
title: EventSource
slug: Web/API/EventSource
tags:
  - API
  - Interface
  - Reference
translation_of: Web/API/EventSource
---
<div>{{APIRef("Websockets API")}}</div>

<p>L'interface <strong><code>EventSource</code></strong> est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format <code>text/event-stream</code> avant de clôturer la connexion.</p>

<h2 id="Constructeur">Constructeur</h2>

<dl>
 <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
 <dd>Cette méthode crée un nouvel objet <code>EventSource</code> à partir de l'objet {{domxref("USVString")}} fourni.</dd>
</dl>

<h2 id="Propriétés">Propriétés</h2>

<p><em>Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}.</em></p>

<dl>
 <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
 <dd>Un nombre qui représente l'état de la connexion. Les valeurs possibles sont <code>CONNECTING</code> (<code>0</code>) (connexion en cours), <code>OPEN</code> (<code>1</code>) (connexion ouverte), ou <code>CLOSED</code> (<code>2</code>) (connexion fermée).</dd>
 <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
 <dd>Un objet {{domxref("DOMString")}} qui représente l'URL de la source.</dd>
 <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
 <dd>Un booléen qui indique si l'objet <code>EventSource</code> a été instancié avec les paramètres d'authentification CORS (<code>true</code>) ou non (<code>false</code>, la valeur par défaut).</dd>
</dl>

<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>

<dl>
 <dt>{{domxref("EventSource.onerror")}}</dt>
 <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet <code>EventSource</code>.</dd>
 <dt>{{domxref("EventSource.onmessage")}}</dt>
 <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).</dd>
 <dt>{{domxref("EventSource.onopen")}}</dt>
 <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.</dd>
</dl>

<h2 id="Méthodes">Méthodes</h2>

<p><em>Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}.</em></p>

<dl>
 <dt>{{domxref("EventSource.close()")}}</dt>
 <dd>Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut <code>readyState</code> en <code>CLOSED</code>. Si la connexion est déjà fermée, la méthode ne fait rien.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: js notranslate">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);
}</pre>

<div class="note">
<p><strong>Note :</strong> Un exemple complet est disponible sur GitHub, <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">voir la démonstration SSE avec PHP</a>.</p>
</div>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</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="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>6</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("6.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5</td>
  </tr>
  <tr>
   <td>Disponible dans les <em>workers</em> dédiés et partagés<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>Fonctionnalité</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support simple</td>
   <td>4.4</td>
   <td>45</td>
   <td>{{CompatNo}}</td>
   <td>12</td>
   <td>4.1</td>
  </tr>
  <tr>
   <td>Disponible dans les <em>workers</em> dédiés et partagés<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">Pas encore disponible pour les <em>service workers</em></a>.</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Utiliser les évènements générés par le serveur</a></li>
</ul>