javascript - SSE 的 EventSource 和 XMLHttpRequest 之间的区别

Question

我正在实现服务器发送事件应用程序逻辑。服务器端已经完成，现在正在处理客户端部分。

在我看来，JS 正在使用 EventSource 对象，这看起来非常合乎逻辑，因为它就是为此而设计的!但它也有很多限制(只有 GET 请求，没有 header ，没有数据......)

我问自己:为什么不使用 XMLHttpRequest 对象呢？

我正在访问的服务器是用 Java EE 编写的，并返回文本/事件流类型的响应。

这是我的实现

var source = new EventSource("my_url");
source.onmessage = function (event) {
  console.log(event.data);
};

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 3) {
    console.log(xhttp.response);
  }
};
xhttp.open("GET", "my_url", true);
xhttp.send();

两者都工作得很好，但由于我完全没有发现有关该主题的信息，如果我没有做一些可怕的事情，我就在措辞。

我能看到的唯一区别是，使用 Ajax 时，响应会串联在其他响应之后。我推断服务器缓冲区没有刷新，但我对所有这些 HTTP 层的理解非常低......

Answer 1

TL；博士:EventSource处理流事件，每个“更新”可以是多条信息。 Ajax 不能立即处理此问题，并且实现类似的行为可能非常复杂。

您的 XMLHttpRequest 不会是流，因为您只能获取 XMLHttpRequest.readyState 上的数据。改变。

您可以使用 XMLHttpRequest advanced features 中的 onprogress 事件获取内容流设置，其中支持有点狡猾(尽管仍然比 EventSource 更好)。

但是，您无法检测每个进度标记中的"new"数据，因此必须发明自己的更新事件处理，如 this answer 中所述。 .

即使有了上述答案，您仍然需要一种在一次更新中区分多个事件的方法，因此您必须执行一些操作，例如以 JSON 字符串形式发送数据、解析它们，然后进行自己的事件处理。

以上所有内容都已由 EventSource 处理，这就是人们使用它的原因。

伪代码

XHR 事件流实现如下所示:

JavaScript

function Stream(updateCallback) {
    //last response length
    var last_response_len = 0;
    //Create XHR object
    var xhttp = new XMLHttpRequest();
    //Add eventlistener
    xhttp.onprogress = function () {
        //Get new part of response
        var responseText = xhttp.response.substr(last_response_len);
        //Set new response position
        last_response_len = xhttp.response.length;
        //Split into individual events, using a safe seperator which won't naturally occur in your events
        responseText.split("▼")
            //Only keep non-empty events to prevent JSON.parse error
            .filter(function (l) { return l.length > 0; })
            //Loop through events
            .forEach(function (text) {
            //Parse JSON to functional objects
            var data = JSON.parse(text);
            //Do something with each data element
            for (var key in data) {
                //Ignore potential prototype keys
                if (data.hasOwnProperty(key)) {
                    //Do event handling of some sort
                    updateCallback(data[key], key);
                }
            }
        });
    };
    //Initialize request
    xhttp.open("POST", "./", true);
    //Send Request
    xhttp.send();
}
// # TEST # //
//Output elements
var header = document.body.appendChild(document.createElement("h1"));
var values = document.body.appendChild(document.createElement("h2"));
//Event handling function
function OnUpdate(value, key) {
    if (key == 'header') {
        header.innerHTML = value;
    }
    if (key == 'value') {
        values.innerHTML = value;
    }
}
//Start stream
Stream(OnUpdate);