Javascript SSE的EventSource和XMLHttpRequest之间的差异

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

无论我在哪里看到，JS都在使用一个EventSource对象，它看起来非常符合逻辑，因为它是为它设计的！但是它也有很多限制（只获取请求，没有头，没有数据…）

我在问自己：为什么不使用XMLHttpRequest对象呢

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

下面是我的实现

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

这两种方法都很好，但由于我没有发现关于这个主题的任何信息，如果我没有做什么可怕的事情，我会用词来表达

我能看到的唯一区别是，使用Ajax时，响应是依次连接的。 我推断服务器缓冲区没有刷新，但我对所有这些HTTP层的理解非常低…

TL；DR：处理流式事件，可以是每个“更新”上的多条信息。Ajax不能直接处理这个问题，实现类似的行为可能非常复杂

您的

XMLHttpRequest

不会是一个流，因为您只能获取有关更改的数据

使用集合中的

onprogress

事件，您可以获取内容流，其中的支持有点不可靠（尽管仍然优于）

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

即使有了上述答案，您仍然需要一种在一次更新中区分多个事件的方法，因此您必须做一些事情，比如将数据作为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);

---

EventSource

实例打开到HTTP服务器的持久连接，HTTP服务器以

text/event stream

格式发送事件。该连接保持打开状态，直到通过调用

EventSource.close（）关闭

。一旦连接打开，来自服务器的传入消息将以消息事件的形式传递到您的代码中。与WebSocket不同，服务器发送的事件是单向的；也就是说，数据消息以一个方向从服务器传递到客户端（如用户的web浏览器）”（）我知道这一部分，但是它没有回答关于XMLHttpRequest的问题

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);