-
Notifications
You must be signed in to change notification settings - Fork 513
/
eventsource.js
473 lines (396 loc) · 13.6 KB
/
eventsource.js
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
'use strict'
const { pipeline } = require('node:stream')
const { fetching } = require('../fetch')
const { makeRequest } = require('../fetch/request')
const { getGlobalOrigin } = require('../fetch/global')
const { webidl } = require('../fetch/webidl')
const { EventSourceStream } = require('./eventsource-stream')
const { parseMIMEType } = require('../fetch/dataURL')
const { MessageEvent } = require('../websocket/events')
const { isNetworkError } = require('../fetch/response')
const { getGlobalDispatcher } = require('../../global')
const { delay } = require('./util')
let experimentalWarned = false
/**
* A reconnection time, in milliseconds. This must initially be an implementation-defined value,
* probably in the region of a few seconds.
*
* In Comparison:
* - Chrome uses 3000ms.
* - Deno uses 5000ms.
*
* @type {3000}
*/
const defaultReconnectionTime = 3000
/**
* The readyState attribute represents the state of the connection.
* @enum
* @readonly
* @see https://html.spec.whatwg.org/multipage/server-sent-events.html#dom-eventsource-readystate-dev
*/
/**
* The connection has not yet been established, or it was closed and the user
* agent is reconnecting.
* @type {0}
*/
const CONNECTING = 0
/**
* The user agent has an open connection and is dispatching events as it
* receives them.
* @type {1}
*/
const OPEN = 1
/**
* The connection is not open, and the user agent is not trying to reconnect.
* @type {2}
*/
const CLOSED = 2
/**
* Requests for the element will have their mode set to "cors" and their credentials mode set to "same-origin".
* @type {'anonymous'}
*/
const ANONYMOUS = 'anonymous'
/**
* Requests for the element will have their mode set to "cors" and their credentials mode set to "include".
* @type {'use-credentials'}
*/
const USE_CREDENTIALS = 'use-credentials'
/**
* @typedef {object} EventSourceInit
* @property {boolean} [withCredentials] indicates whether the request
* should include credentials.
*/
/**
* The EventSource interface is used to receive server-sent events. It
* connects to a server over HTTP and receives events in text/event-stream
* format without closing the connection.
* @extends {EventTarget}
* @see https://html.spec.whatwg.org/multipage/server-sent-events.html#server-sent-events
* @api public
*/
class EventSource extends EventTarget {
#events = {
open: null,
error: null,
message: null
}
#url = null
#withCredentials = false
#readyState = CONNECTING
#request = null
#controller = null
/**
* @type {object}
* @property {string} lastEventId
* @property {number} reconnectionTime
* @property {any} reconnectionTimer
*/
#settings = null
/**
* Creates a new EventSource object.
* @param {string} url
* @param {EventSourceInit} [eventSourceInitDict]
* @see https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface
*/
constructor (url, eventSourceInitDict = {}) {
// 1. Let ev be a new EventSource object.
super()
webidl.argumentLengthCheck(arguments, 1, { header: 'EventSource constructor' })
if (!experimentalWarned) {
experimentalWarned = true
process.emitWarning('EventSource is experimental, expect them to change at any time.', {
code: 'UNDICI-ES'
})
}
url = webidl.converters.USVString(url)
eventSourceInitDict = webidl.converters.EventSourceInitDict(eventSourceInitDict)
// 2. Let settings be ev's relevant settings object.
// https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object
this.#settings = {
origin: getGlobalOrigin(),
policyContainer: {
referrerPolicy: 'no-referrer'
},
lastEventId: '',
reconnectionTime: defaultReconnectionTime
}
let urlRecord
try {
// 3. Let urlRecord be the result of encoding-parsing a URL given url, relative to settings.
urlRecord = new URL(url, this.#settings.origin)
this.#settings.origin = urlRecord.origin
} catch (e) {
// 4. If urlRecord is failure, then throw a "SyntaxError" DOMException.
throw new DOMException(e, 'SyntaxError')
}
// 5. Set ev's url to urlRecord.
this.#url = urlRecord.href
// 6. Let corsAttributeState be Anonymous.
let corsAttributeState = ANONYMOUS
// 7. If the value of eventSourceInitDict's withCredentials member is true,
// then set corsAttributeState to Use Credentials and set ev's
// withCredentials attribute to true.
if (eventSourceInitDict.withCredentials) {
corsAttributeState = USE_CREDENTIALS
this.#withCredentials = true
}
// 8. Let request be the result of creating a potential-CORS request given
// urlRecord, the empty string, and corsAttributeState.
const initRequest = {
redirect: 'follow',
keepalive: true,
// @see https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes
mode: 'cors',
credentials: corsAttributeState === 'anonymous'
? 'same-origin'
: 'omit',
referrer: 'no-referrer'
}
// 9. Set request's client to settings.
initRequest.client = this.#settings
// 10. User agents may set (`Accept`, `text/event-stream`) in request's header list.
initRequest.headersList = [['accept', { name: 'accept', value: 'text/event-stream' }]]
// 11. Set request's cache mode to "no-store".
initRequest.cache = 'no-store'
// 12. Set request's initiator type to "other".
initRequest.initiator = 'other'
initRequest.urlList = [new URL(this.#url)]
// 13. Set ev's request to request.
this.#request = makeRequest(initRequest)
this.#connect()
}
/**
* Returns the state of this EventSource object's connection. It can have the
* values described below.
* @returns {0|1|2}
* @readonly
*/
get readyState () {
return this.#readyState
}
/**
* Returns the URL providing the event stream.
* @readonly
* @returns {string}
*/
get url () {
return this.#url
}
/**
* Returns a boolean indicating whether the EventSource object was
* instantiated with CORS credentials set (true), or not (false, the default).
*/
get withCredentials () {
return this.#withCredentials
}
#connect () {
if (this.#readyState === CLOSED) return
this.#readyState = CONNECTING
const fetchParam = {
request: this.#request
}
// 14. Let processEventSourceEndOfBody given response res be the following step: if res is not a network error, then reestablish the connection.
const processEventSourceEndOfBody = (response) => {
if (isNetworkError(response)) {
this.dispatchEvent(new Event('error'))
this.close()
}
this.#reconnect()
}
// 15. Fetch request, with processResponseEndOfBody set to processEventSourceEndOfBody...
fetchParam.processResponseEndOfBody = processEventSourceEndOfBody
// and processResponse set to the following steps given response res:
fetchParam.processResponse = (response) => {
// 1. If res is an aborted network error, then fail the connection.
if (isNetworkError(response)) {
// 1. When a user agent is to fail the connection, the user agent
// must queue a task which, if the readyState attribute is set to a
// value other than CLOSED, sets the readyState attribute to CLOSED
// and fires an event named error at the EventSource object. Once the
// user agent has failed the connection, it does not attempt to
// reconnect.
if (response.aborted) {
this.close()
this.dispatchEvent(new Event('error'))
return
// 2. Otherwise, if res is a network error, then reestablish the
// connection, unless the user agent knows that to be futile, in
// which case the user agent may fail the connection.
} else {
this.#reconnect()
return
}
}
// 3. Otherwise, if res's status is not 200, or if res's `Content-Type`
// is not `text/event-stream`, then fail the connection.
const contentType = response.headersList.get('content-type', true)
const mimeType = contentType !== null ? parseMIMEType(contentType) : 'failure'
const contentTypeValid = mimeType !== 'failure' && mimeType.essence === 'text/event-stream'
if (
response.status !== 200 ||
contentTypeValid === false
) {
this.close()
this.dispatchEvent(new Event('error'))
return
}
// 4. Otherwise, announce the connection and interpret res's body
// line by line.
// When a user agent is to announce the connection, the user agent
// must queue a task which, if the readyState attribute is set to a
// value other than CLOSED, sets the readyState attribute to OPEN
// and fires an event named open at the EventSource object.
// @see https://html.spec.whatwg.org/multipage/server-sent-events.html#sse-processing-model
this.#readyState = OPEN
this.dispatchEvent(new Event('open'))
// If redirected to a different origin, set the origin to the new origin.
this.#settings.origin = response.urlList[response.urlList.length - 1].origin
const eventSourceStream = new EventSourceStream({
eventSourceSettings: this.#settings,
push: (event) => {
this.dispatchEvent(new MessageEvent(
event.type,
event.options
))
}
})
pipeline(response.body.stream,
eventSourceStream,
(error) => {
if (
error?.aborted === false
) {
this.close()
this.dispatchEvent(new Event('error'))
}
})
}
this.#controller = fetching({
...fetchParam,
dispatcher: getGlobalDispatcher()
})
}
/**
* @see https://html.spec.whatwg.org/multipage/server-sent-events.html#sse-processing-model
* @returns {Promise<void>}
*/
async #reconnect () {
// When a user agent is to reestablish the connection, the user agent must
// run the following steps. These steps are run in parallel, not as part of
// a task. (The tasks that it queues, of course, are run like normal tasks
// and not themselves in parallel.)
// 1. Queue a task to run the following steps:
// 1. If the readyState attribute is set to CLOSED, abort the task.
if (this.#readyState === CLOSED) return
// 2. Set the readyState attribute to CONNECTING.
this.#readyState = CONNECTING
// 3. Fire an event named error at the EventSource object.
this.dispatchEvent(new Event('error'))
// 2. Wait a delay equal to the reconnection time of the event source.
await delay(this.#settings.reconnectionTime)
// 5. Queue a task to run the following steps:
// 1. If the EventSource object's readyState attribute is not set to
// CONNECTING, then return.
if (this.#readyState !== CONNECTING) return
// 2. Let request be the EventSource object's request.
// 3. If the EventSource object's last event ID string is not the empty
// string, then:
// 1. Let lastEventIDValue be the EventSource object's last event ID
// string, encoded as UTF-8.
// 2. Set (`Last-Event-ID`, lastEventIDValue) in request's header
// list.
if (this.#settings.lastEventId !== '') {
this.#request.headersList.set('last-event-id', this.#settings.lastEventId, true)
}
// 4. Fetch request and process the response obtained in this fashion, if any, as described earlier in this section.
this.#connect()
}
/**
* Closes the connection, if any, and sets the readyState attribute to
* CLOSED.
*/
close () {
webidl.brandCheck(this, EventSource)
if (this.#readyState === CLOSED) return
this.#readyState = CLOSED
clearTimeout(this.#settings.reconnectionTimer)
this.#controller.abort()
if (this.#request) {
this.#request = null
}
}
get onopen () {
return this.#events.open
}
set onopen (fn) {
if (this.#events.open) {
this.removeEventListener('open', this.#events.open)
}
if (typeof fn === 'function') {
this.#events.open = fn
this.addEventListener('open', fn)
} else {
this.#events.open = null
}
}
get onmessage () {
return this.#events.message
}
set onmessage (fn) {
if (this.#events.message) {
this.removeEventListener('message', this.#events.message)
}
if (typeof fn === 'function') {
this.#events.message = fn
this.addEventListener('message', fn)
} else {
this.#events.message = null
}
}
get onerror () {
return this.#events.error
}
set onerror (fn) {
if (this.#events.error) {
this.removeEventListener('error', this.#events.error)
}
if (typeof fn === 'function') {
this.#events.error = fn
this.addEventListener('error', fn)
} else {
this.#events.error = null
}
}
}
const constantsPropertyDescriptors = {
CONNECTING: {
__proto__: null,
configurable: false,
enumerable: true,
value: CONNECTING,
writable: false
},
OPEN: {
__proto__: null,
configurable: false,
enumerable: true,
value: OPEN,
writable: false
},
CLOSED: {
__proto__: null,
configurable: false,
enumerable: true,
value: CLOSED,
writable: false
}
}
Object.defineProperties(EventSource, constantsPropertyDescriptors)
Object.defineProperties(EventSource.prototype, constantsPropertyDescriptors)
webidl.converters.EventSourceInitDict = webidl.dictionaryConverter([
{ key: 'withCredentials', converter: webidl.converters.boolean, defaultValue: false }
])
module.exports = {
EventSource,
defaultReconnectionTime
}