我看到代码有奇怪的行为 here .

客户端(Javascript):

<input type="text" id="userid" placeholder="UserID" /><br /> 
<input type="button" id="ping" value="Ping" />
  
<script>
    var es = new EventSource('/home/message');
    es.onmessage = function (e) {
        console.log(e.data);
    };
    es.onerror = function () {
        console.log(arguments);
    };
    $(function () {
        $('#ping').on('click', function () {
            $.post('/home/ping', {
                UserID: parseInt($('#userid').val()) || 0
            });
        });
    });
</script>

服务器端(C#):

using System;
using System.Collections.Concurrent;
using System.Threading;
using System.Web.Mvc;
using Newtonsoft.Json;
   
namespace EventSourceTest2.Controllers {
    public class PingData {
        public int UserID { get; set; }
        public DateTime Date { get; set; } = DateTime.Now;
    }

    public class HomeController : Controller {
        public ActionResult Index() {
            return View();
        }  

        static ConcurrentQueue<PingData> pings = new ConcurrentQueue<PingData>();

        public void Ping(int userID) {
            pings.Enqueue(new PingData { UserID = userID });
        }

        public void Message() {
            Response.ContentType = "text/event-stream";
            do {
                PingData nextPing;
                if (pings.TryDequeue(out nextPing)) {
                    var msg = "data:" + JsonConvert.SerializeObject(nextPing, Formatting.None) + "\n\n";
                    Response.Write(msg);
                }
                Response.Flush();
                Thread.Sleep(1000);
            } while (true);
        }
    }
}

一旦我按下 ping 将新项目添加到 pings 队列中，Message 方法内的循环就会选择新项目并发出一个事件，通过Response.Write(在服务器上使用 Debug.Print 确认)。但是，浏览器不会触发 onmessage 直到我第二次按下 ping，并且浏览器发出另一个事件；此时来自 first 事件的数据到达 onmessage。

我该如何解决这个问题？

澄清一下，这是我期望的行为:

Client                       Server
-------------------------------------------------------------------
Press Ping button
XHR to /home/ping
                             Eneque new item to pings
                             Message loop issues server-sent event
EventSource calls onmessage

这是实际发生的事情:

Client                       Server
-------------------------------------------------------------------
Press Ping button
XHR to /home/ping
                             Eneque new item to pings
                             Message loop issues server-sent event
(Nothing happens)
Press Ping button again
New XHR to /home/ping
EventSource calls onmessage with previous event data

(在 Chrome 中运行时，message 请求在“网络”选项卡中列为始终未决。我不确定这是服务器发送事件的正常行为，还是与问题。)

编辑

Response.Write 之后的 msg 变量的字符串表示形式如下所示:

"data:{\"UserID\":105,\"Date\":\"2016-03-11T04:20:24.1854996+02:00\"}\n\n"

非常清楚地包括换行符。

最佳答案

这不是一个答案，但希望它会成为一个答案。我能够使用以下代码让它工作。

public void Ping(int id)
{
    pings.Enqueue(new PingData { ID = id });
    Response.ContentType = "text/plain";
    Response.Write("id received");
}
public void Message()
{
    int count = 0;
    Response.ContentType = "text/event-stream";
    do {
        PingData nextPing;
        if (pings.TryDequeue(out nextPing)) {
            Response.ClearContent();
            Response.Write("data:" + nextPing.ID.ToString() + " - " + nextPing.Date.ToLongTimeString() + "\n\n");
            Response.Write("event:time" + "\n" + "data:" + DateTime.Now.ToLongTimeString() + "\n\n");
            count = 0;
            Response.Flush();
        }
        if (!Response.IsClientConnected){break;}
        Thread.Sleep(1000);
        count++;
    } while (count < 30);   //end after 30 seconds of no pings
}

造成差异的代码行是第二个 Response.Write。在下一次与您的问题类似的 ping 之前，该消息不会出现在浏览器中，但 ping 始终会出现。如果没有该行，ping 只会在下一次 ping 之后出现，或者在我的 30 秒计数器用完后出现。

在 30 秒计时器后出现的丢失消息让我得出结论，这要么是 .Net 问题，要么是我们遗漏了什么。这似乎不是事件源问题，因为该消息出现在服务器事件上，而且我在使用 PHP 执行 SSE 时没有遇到任何问题。

作为引用，这是我用来测试的 JavaScript 和 HTML。

<input type="text" id="pingid" placeholder="ID" /><br />
<input type="button" id="ping" value="Ping" />

<div id="timeresponse"></div>
<div id="pingresponse"></div>

<script>
    var es = new EventSource('/Home/Message');
    es.onmessage = function (e) {
        console.log(e.data);
        document.getElementById('pingresponse').innerHTML += e.data + " - onmessage<br/>";
    };
    es.addEventListener("ping", function (e) {
        console.log(e.data);
        document.getElementById('pingresponse').innerHTML += e.data + " - onping<br/>";
    }, false);
    es.addEventListener("time", function (e) {
        document.getElementById('timeresponse').innerHTML = e.data;
    }, false);
    es.onerror = function () {
        console.log(arguments);
        console.log("event source closed");
        es.close();
    };
    window.onload = function(){
        document.getElementById('ping').onclick = function () {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onload = function () {
                console.log(this.responseText);
            };
            var url = '/Home/Ping?id=' + document.getElementById('pingid').value;
            xmlhttp.open("GET", url);
            xmlhttp.send();
        };
    };
</script>

关于javascript - 客户端总是响应之前服务器发送的事件，而不是当前事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35719486/