Currently, I am using a web service that returns an SseEmitter to program a loading bar. The method to receive it looks like this:
static async synchronize(component: Vue) {
let xhr = new XMLHttpRequest();
xhr.open('PATCH', 'myUrl.com');
xhr.responseType = "text"
xhr.setRequestHeader('Authorization', 'mySessionToken')
xhr.setRequestHeader("Content-Type", "text/event-stream")
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response)
} else {
reject({status: this.status, statusText: xhr.statusText})
}
}
xhr.onerror = function () {reject({status: this.status, statusText: xhr.statusText})}
xhr.onreadystatechange = function() {if (xhr.readyState == XMLHttpRequest.DONE) { alert(xhr.responseText) }}
xhr.onprogress = function(onEvent) {
console.log(xhr.response)
}
xhr.send()
}
Everything is working fine so far, but there is one issue: the xhr.response data is returned as a string like this:
data:"{ hello: '1' }"
data:"{ hello: '2' }"
data:"{ hello: '3' }"
...
data:"{ hello: '100' }"
While this seems okay, the problem arises when each emitted event returns the entire state history, causing the response to grow with each value:
https://i.sstatic.net/FCcyu.png
In essence, is there a way to only retrieve the last value from the response? Using Json.parse() is resulting in errors, possibly due to the response not being formatted as JSON.
I could provide some code from the web service where the SseEmitter originates, but I believe it may not be necessary to address this issue. Thank you for any assistance!