| |
| |
| |
| |
| |
|
|
| import request from './request'; |
| import { setTokenHeader } from './headers-helpers'; |
|
|
| var SSE = function (url, options) { |
| if (!(this instanceof SSE)) { |
| return new SSE(url, options); |
| } |
|
|
| this.INITIALIZING = -1; |
| this.CONNECTING = 0; |
| this.OPEN = 1; |
| this.CLOSED = 2; |
|
|
| this.url = url; |
|
|
| options = options || {}; |
| this.headers = options.headers || {}; |
| this.payload = options.payload !== undefined ? options.payload : ''; |
| this.method = options.method || (this.payload && 'POST') || 'GET'; |
| this.withCredentials = !!options.withCredentials; |
|
|
| this.FIELD_SEPARATOR = ':'; |
| this.listeners = {}; |
|
|
| this.xhr = null; |
| this.readyState = this.INITIALIZING; |
| this.progress = 0; |
| this.chunk = ''; |
|
|
| this.addEventListener = function (type, listener) { |
| if (this.listeners[type] === undefined) { |
| this.listeners[type] = []; |
| } |
|
|
| if (this.listeners[type].indexOf(listener) === -1) { |
| this.listeners[type].push(listener); |
| } |
| }; |
|
|
| this.removeEventListener = function (type, listener) { |
| if (this.listeners[type] === undefined) { |
| return; |
| } |
|
|
| var filtered = []; |
| this.listeners[type].forEach(function (element) { |
| if (element !== listener) { |
| filtered.push(element); |
| } |
| }); |
| if (filtered.length === 0) { |
| delete this.listeners[type]; |
| } else { |
| this.listeners[type] = filtered; |
| } |
| }; |
|
|
| this.dispatchEvent = function (e) { |
| if (!e) { |
| return true; |
| } |
|
|
| e.source = this; |
|
|
| var onHandler = 'on' + e.type; |
| if (this.hasOwnProperty(onHandler)) { |
| this[onHandler].call(this, e); |
| if (e.defaultPrevented) { |
| return false; |
| } |
| } |
|
|
| if (this.listeners[e.type]) { |
| return this.listeners[e.type].every(function (callback) { |
| callback(e); |
| return !e.defaultPrevented; |
| }); |
| } |
|
|
| return true; |
| }; |
|
|
| this._setReadyState = function (state) { |
| var event = new CustomEvent('readystatechange'); |
| event.readyState = state; |
| this.readyState = state; |
| this.dispatchEvent(event); |
| }; |
|
|
| this._onStreamFailure = function (e) { |
| var event = new CustomEvent('error'); |
| event.data = e.currentTarget.response; |
| this.dispatchEvent(event); |
| this.close(); |
| }; |
|
|
| this._onStreamAbort = function (e) { |
| this.dispatchEvent(new CustomEvent('abort')); |
| this.close(); |
| }; |
|
|
| this._onStreamProgress = async function (e) { |
| if (!this.xhr) { |
| return; |
| } |
|
|
| if (this.xhr.status === 401 && !this._retry) { |
| this._retry = true; |
| try { |
| const refreshResponse = await request.refreshToken(); |
| this.headers = { |
| 'Content-Type': 'application/json', |
| Authorization: `Bearer ${refreshResponse.token}`, |
| }; |
| setTokenHeader(refreshResponse.token); |
| window.dispatchEvent(new CustomEvent('tokenUpdated', { detail: refreshResponse.token })); |
| this.stream(); |
| } catch (err) { |
| this._onStreamFailure(e); |
| return; |
| } |
| } else if (this.xhr.status !== 200) { |
| this._onStreamFailure(e); |
| return; |
| } |
|
|
| if (this.readyState == this.CONNECTING) { |
| this.dispatchEvent(new CustomEvent('open')); |
| this._setReadyState(this.OPEN); |
| } |
|
|
| var data = this.xhr.responseText.substring(this.progress); |
| this.progress += data.length; |
| data.split(/(\r\n|\r|\n){2}/g).forEach( |
| function (part) { |
| if (part.trim().length === 0) { |
| this.dispatchEvent(this._parseEventChunk(this.chunk.trim())); |
| this.chunk = ''; |
| } else { |
| this.chunk += part; |
| } |
| }.bind(this), |
| ); |
| }; |
|
|
| this._onStreamLoaded = function (e) { |
| this._onStreamProgress(e); |
|
|
| |
| this.dispatchEvent(this._parseEventChunk(this.chunk)); |
| this.chunk = ''; |
| }; |
|
|
| |
| |
| |
| this._parseEventChunk = function (chunk) { |
| if (!chunk || chunk.length === 0) { |
| return null; |
| } |
|
|
| var e = { id: null, retry: null, data: '', event: 'message' }; |
| chunk.split(/\n|\r\n|\r/).forEach( |
| function (line) { |
| line = line.trimRight(); |
| var index = line.indexOf(this.FIELD_SEPARATOR); |
| if (index <= 0) { |
| |
| |
| return; |
| } |
|
|
| var field = line.substring(0, index); |
| if (!(field in e)) { |
| return; |
| } |
|
|
| var value = line.substring(index + 1).trimLeft(); |
| if (field === 'data') { |
| e[field] += value; |
| } else { |
| e[field] = value; |
| } |
| }.bind(this), |
| ); |
|
|
| var event = new CustomEvent(e.event); |
| event.data = e.data; |
| event.id = e.id; |
| return event; |
| }; |
|
|
| this._checkStreamClosed = function () { |
| if (!this.xhr) { |
| return; |
| } |
|
|
| if (this.xhr.readyState === XMLHttpRequest.DONE) { |
| this._setReadyState(this.CLOSED); |
| } |
| }; |
|
|
| this.stream = function () { |
| this._setReadyState(this.CONNECTING); |
|
|
| this.xhr = new XMLHttpRequest(); |
| this.xhr.addEventListener('progress', this._onStreamProgress.bind(this)); |
| this.xhr.addEventListener('load', this._onStreamLoaded.bind(this)); |
| this.xhr.addEventListener('readystatechange', this._checkStreamClosed.bind(this)); |
| this.xhr.addEventListener('error', this._onStreamFailure.bind(this)); |
| this.xhr.addEventListener('abort', this._onStreamAbort.bind(this)); |
| this.xhr.open(this.method, this.url); |
| for (var header in this.headers) { |
| this.xhr.setRequestHeader(header, this.headers[header]); |
| } |
| this.xhr.withCredentials = this.withCredentials; |
| this.xhr.send(this.payload); |
| }; |
|
|
| this.close = function () { |
| if (this.readyState === this.CLOSED) { |
| return; |
| } |
|
|
| this.xhr.abort(); |
| this.xhr = null; |
| this._setReadyState(this.CLOSED); |
| }; |
| }; |
|
|
| export { SSE }; |
| |
| |
| |
| |
| |
|
|