如何使用 HTML SSE 传递 POST 参数？

Question

我这里有一段代码使用HTML 5 SSE - EventSource 对象，它允许 php 脚本将更新推送到网页。但是，我也有兴趣将参数传递给脚本。我怎样才能做到这一点？

代码如下：

if(typeof(EventSource) !== "undefined")
    {
        var source = new EventSource("get_message.php");
        source.onmessage=function(event)
        {
            document.getElementById("message-window").innerHTML+=event.data + "<br>";
        };
    }
else
    {   
        document.getElementById("message-window").innerHTML="Sorry, your browser does not support server-sent events...";
     }

我能想到的最接近的就是使用AJAX，比如

$.post("get_message.php", {largest_id: 30}, function(data, status){ some function });

但是，我不确定如何为此编写 jQuery？

Answer 1

EventSource API 不支持 POST 方法，但这并不意味着您不能将 SSE 与 POST 一起使用。你就是不能使用EventSource API。
然而，还有其他的实现。一个示例是sse.js，它允许您指定有效负载，如果需要，还可以指定标头。 sse.js 应该是 EventSource 的替代品，例如：

var source = new SSE("get_message.php");
source.onmessage=function(event)
{
    document.getElementById("message-window").innerHTML+=event.data + "<br>";
};

为了使用 POST 方法，你只需要指定一个有效载荷，例如：

var source = new SSE("get_message.php", {payload: 'Hello World'});

而且，由于它是一个完全兼容的 polyfill，你可能可以这样做：

EventSource = SSE;
var source = new EventSource("get_message.php", {payload: 'Hello World'});
source.onmessage=function(event)
{
    document.getElementById("message-window").innerHTML+=event.data + "<br>";
};

Answer 2

@blazonix 您在使用 SSE 时必须区分发送和接收。

EventSource 仅用于从服务器接收数据。要将数据发送到服务器，您必须使用常规 AJAX 请求。

在我的库中，我可以重用相同的发送和接收路径，但我根据 Accept 标头区分调用者想要做什么：

• 接受：text/event-stream - 它是一个浏览器，想要发起事件流连接
• 接受：任何其他类型 - 它是常规的非/AJAX 调用 GET 或 POST

示例 java 代码：GitHub

Answer 3

提交POST 请求以启动EventSource 的缺点是重新连接到事件流which is part of the specification。由于浏览器必须能够重新建立与同一 EventSource 的连接，因此使用 POST 数据识别请求意味着在每次重新连接尝试时再次发布相同的数据。这是 POST 请求 according to initial RFC 2616 的预期用途，提供备用 URL 或单独的重新连接机制可能会使浏览器 JavaScript 的 SSE 实现过于复杂，并且当您使用 POST 查询启动 EventSource 时，这也是一个实际的设计问题.

Answer 4

就是这么简单。

$.post('your_url.php?your_parametre1=' + your_value1 + '&your_parametre2_likewise=' + your_value, function(data) {
alert(data); // whatever you echo from php file as a identifier of success or error.
});