页面中使用SSE从服务端获取数据实现数据推送,但SSE要求与服务端建立一个长连接,不知道在nuzt的Action中怎样实现?
下面是配合C#实现的数据推送例子,每间隔3s向客户端推送一次数据.
JS部分
<p id="content"></p>
<script>
function write(s) {
document.getElementById('content').innerHTML += '<br />' + s;
}
function init() {
//定义一个ServerSent对象
var s = new EventSource("serversent.ashx");
s.onopen = function (e) {
write("onopen");
};
//当收到一个非自定义事件时的回调函数
s.onmessage = function (e) {
write("onmessage:" + e.data);
};
//当收到一个被服务器命名为MyEvent事件消息时的回调函数
s.addEventListener("myEvent", function (e) {
write("myEvent:" + e.data);
});
}
window.onload = init;
</script>
使用C#实现的服务端部分(serversent.ashx)
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/event-stream";
var data = "";
var num = 0;
while (true)
{
num++;
data = "event:myEvent\r\n";
data += "data:推送数据 " + num + "\n\n";
context.Response.Write(data);
if (context.Response.IsClientConnected)
context.Response.Flush();
System.Threading.Thread.Sleep(3000);
}
}