javascript 如何使用HTML SSE传递POST参数?

5us2dqdw  于 2023-04-10  发布在  Java
关注(0)|答案(5)|浏览(1916)

我这里有一段代码使用了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。

cclgggtu

cclgggtu1#

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方法,你只需要指定一个payload,例如:

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>";
};
6tqwzwtp

6tqwzwtp2#

提交POST请求来发起EventSource的缺点是重新连接到事件流,这是规范的一部分。由于浏览器必须能够重新建立到同一EventSource的连接,用POST数据标识请求将意味着在每次重新连接尝试时再次张贴相同的数据。根据最初的RFC 2616,这是POST请求的预期用途,提供备用URL或单独的重新连接机制可能会使浏览器JavaScript的SSE实现过于复杂,并且在使用POST查询来启动EventSource时也是一个实际的设计问题。

b1uwtaje

b1uwtaje3#

@blazonix在使用SSE时必须区分发送和接收。
EventSource仅用于从服务器接收数据。要向服务器发送数据,必须使用常规 AJAX 请求。
在我的库中,我可以重用相同的路径来发送和接收,但我会根据Accept头区分调用者想要做什么:

  • Accept:text/event-stream -它是一个浏览器,希望发起事件流连接
  • Accept:任何其他类型-它是一个常规的非 AJAX 调用GET或POST

示例java代码:GitHub

dy1byipe

dy1byipe4#

我搜索了这个问题,找到了相关的解决方案与您分享。
首先,你需要改变后端接口,使其支持POST请求。网页通常会带参数发起POST请求。注意,你需要添加请求头"Accept": "text/event-stream"。以下是一小段代码。此操作需要你处理消息解析和'重试'

const response = await fetch('http://127.0.0.1:8888/sse', {
        method: "POST",
        cache: "no-cache",
        keepalive: true,
        headers: {
            "Content-Type": "application/json",
            "Accept": "text/event-stream",
        },
        body: JSON.stringify({
            arg1: 1,
            arg2: 2
        }),
    });
    
    const reader = response.body.getReader();
    
    while (true) {
        const {value, done} = await reader.read();
        if (done) break;
    
        console.log('get.message', new TextDecoder().decode(value));
    }
pvabu6sv

pvabu6sv5#

这是如此简单。

$.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.
});

相关问题