服务器使用AJAX发送事件：如何使用XHR POST解决SSE GET？

Question

我试图解决AJAX和服务器发送事件之间的问题。我有一个应用程序，它向控制器发布一些说明，我希望控制器将一些注释作为事件发送回来，让用户知道请求的操作已经执行（可能有错误或需要一段时间）。

其思想是，用户可以通过客户端发送一个包含不同指令的包，并且服务器将在每个操作完成时通过SSE进行报告。

我通过Fiddler看到的问题是，当执行帖子时，它返回的响应包含我想使用的事件源消息。但是，事件源代码似乎也调用了一个GET，它似乎想要该事件源消息。因为它没有得到那个，所以连接反复关闭。

我目前有一些控制器代码如下：

    [System.Web.Http.HttpPost]
    public void Stop(ProjectViewModel model)
    {
        ProjectManager manager = new ProjectManager();
        if (model.Servers != null && model.Servers.Count != 0)
        {
            string machine = model.Servers[0];
            foreach (string service in model.Services)
            {
                manager.StopService(service, machine);
                Message("stop", service);
            }
        }
    }

在我看来，Ajax/XHR和server都发送了如下设置的事件：

var form = document.getElementById("submitform");

    form.onsubmit = function (e) {
        // stop the regular form submission
        e.preventDefault();

        // collect the form data while iterating over the inputs
        var data = {};
        for (var i = 0, ii = 2; i < ii; ++i) {
            var input = form[i];
            if (input.name == "Servers") {
                data[input.name] = document.getElementById("ServerSelect").options[document.getElementById("ServerSelect").selectedIndex].text;
            }
            else if (input.name == "Services")
                data[input.name] = document.getElementById("ServiceSelect").options[document.getElementById("ServiceSelect").selectedIndex].text;
        }
        if (action) { data["action"] = action };

        // construct an HTTP request
        var xhr = new XMLHttpRequest();
        if (action == "stop") {
            xhr.open(form.method, '/tools/project/stop', true);
        }

        if (action == "start") {
            xhr.open(form.method, '/tools/project/start', true)
        }

        xhr.setRequestHeader('Content-Type', 'application/json; charset=urf-8');



        // send the collected data as JSON
        xhr.send(JSON.stringify(data));

        xhr.onloadend = function () {
            // done
        };
    };

    function events() {
        if (window.EventSource == undefined) {
            // If not supported  
            document.getElementById('eventlog').innerHTML = "Your browser doesn't support Server Sent Events.";
        } else {
            var source = new EventSource('../tools/project/Stop');
            source.addEventListener("message", function (message) { console.log(message.data) });

            source.onopen = function (event) {
                document.getElementById('eventlog').innerHTML += 'Connection Opened.<br>';
                console.log("Open");
            };

            source.onerror = function (event) {
                if (event.eventPhase == EventSource.CLOSED) {
                    document.getElementById('eventlog').innerHTML += 'Connection Closed.<br>';
                    console.log("Close");
                }
            };

            source.onmessage = function (event) {
                //document.getElementById('eventlog').innerHTML += event.data + '<br>';
                var newElement = document.createElement("li");
                newElement.textContent = "message: " + event.data;
                document.getElementById("eventlog").appendChild(newElement)
                console.log("Message");
            };
        }
    };

我对Web开发有些陌生，我不知道如何解决这个问题。有没有办法让事件源消息从该POST中读取？或者将其发送到GET而不是作为对POST的响应发送？总的来说，似乎最糟糕的问题是我似乎无法将事件源api请求的事件消息发送到GET。

编辑：自从发布这篇文章以来，我尝试在控制器中创建一个新方法，专门处理eventsource请求，但似乎事件响应仍然以某种方式出现在POST响应正文中。

        public void Message(string action, string service)
    {
        Response.ContentType = "text/event-stream";
        Response.CacheControl = "no-cache";
        //Response.Write($"event: message\n");
        if (action == "stop")
        {
            Response.Write($"data: <li> {service} has stopped </li>\n\n");
        }
        Response.Flush();
        Thread.Sleep(1000);
        Response.Close();
    }

Answer 1

我最终解决了这个问题。我最初的想法是使用字典在我的每个方法中来回传递viewmodel

https://code.msdn.microsoft.com/How-to-create-and-access-447ada98

我的最终实现如下所示：

public void Stop(ProjectViewModel model)
    {
        ProjectManager manager = new ProjectManager();
        if (model.Servers != null && model.Servers.Count != 0)
        {
            string machine = model.Servers[0];
            foreach (string service in model.Services)
            {
                manager.StopService(service, machine);
                model.events.Add(service, "stopped");
                this.Session["Events"] = model.events;
            }
        }
        //return View(model);
    }

public void Message(ProjectViewModel model)
    {
        Thread.Sleep(1000);
        Response.ContentType = "text/event-stream";
        Response.CacheControl = "no-cache";
        Response.AddHeader("connection", "keep-alive");
        var events = this.Session["Events"] as Dictionary<string, string>;
        Response.Write($"event: message\n");
        if (events != null && events.Count != 0)
        {
            foreach (KeyValuePair<string, string> message in events)
            {
                Response.Write($"data: {message.Key} has been {message.Value}\n\n");
            }
        }
        Response.Flush();
        Thread.Sleep(1000);
        Response.Close();

    }

在HTTP响应头中添加keep-alive-as-connection属性对于获取要发送的SSE和线程也很重要。由于停止操作和消息操作同时发生，因此使用了Sleep（1000）'s。我相信这方面会有一些优化，但就目前而言，这是功能性的，可以进一步开发。