Question

我正在尝试利用服务器发送的事件来处理服务器端的一些异步操作的客户端。滚动到底部查看最后一个问题。

我所拥有的是需要全局搜索的网络应用。返回可能很大，需要一些时间，因为它们实际发送到Web服务，然后以XML格式返回。

我正在尝试使用服务器发送事件（javascript：EventSource）来启用此功能。它只适用于一个事件，但如果我想做一堆不同的事件，它会变得有点奇怪，至少对我而言。我是SSE的新手。

到目前为止，我已经这样做了：

var sse = new EventSource('testsse.aspx');

function init() {
            sse.onopen = function (e) {
                console.log(e.data);
            };

            sse.onmessage = function (e) {
//if data has been returned the "data:" field will not be empty so we know the server operation is complete. 
                if (e.data.length>0) {
                    $('#rgCcr').kendoGrid({
                        dataSource: JSON.parse(e.data)
                    });
                    sse.close();
                }
                    console.log("message: " + e.data);
            };

$(document).ready(function() {
    init();
});

在服务器上的

我有一个构建json字符串的aspx页面。正如我所提到的，如果我只使用标准的“数据：我的消息\ n \ n”格式，我的工作效果很好。我需要做的是在那里获得更多信息。

spec for SSE表示您可以指定要触发的事件。到目前为止，我无法让这个工作。

在我的aspx中我正在构建这样的字符串：

json = string.Format("id:{0}\n event:myEvent\n data:{1}\n\n", id, ser.Serialize(ccrData));

我尝试过创建一个自定义事件，但我不确定要绑定它以便捕获它。

在页面上，我有5个不同的区域作为全局搜索的一部分进行搜索。每个都作为服务器上的异步任务执行，完成后它们会将数据发送回客户端。一旦客户端检测到事件已提交数据，它将关闭监听器并将数据结果添加到kendo网格。

如何使用SSE的事件字段来区分回来的内容？

Answer 1

您可以尝试注册事件监听器，而不是使用“onmessage”功能。这样您就可以选择收听特定的事件类型。

es = new EventSource('/events', withCredentials: true);

es.addEventListener("open", function (e) {
  alert("Connecting...");
});

es.addEventListener("error", function (e) {
  alert("Error");
});

es.addEventListener("myEvent", function (e) {
  alert("MyEvent");
  alert(e.data);
});

这里有很棒的文档： http://html5doctor.com/server-sent-events/

服务器发送事件的自定义事件

1 个答案: