html5 server sent event,关于HTML5 Server-Sent Event长连接的一个问题

各位,大家好,刚刚系统上线时遇到一个比较棘手的问题,请各位帮助一下。

问题具体是这样的,现在有8台客户端连接一个PC机,当PC机有消息要通知客户端时,通过后台的一个Notify类推送消息进客户端,客户端通过HTML5 的 Server-Sent Event的EventSource来收信息,具体如下:

if (!!window.EventSource) {

var source = new window.EventSource('../Service.ashxcmd=ServerSentEventHandler.Notify');

source.onopen = function(event) {

console.log("source.onopen");

}

source.onmessage = function(event) {

console.log('data:'+event.data);

}

source.onerror = function(event) {

console.log('error');

}

if (source == undefined) {

console.log("source == undefined");

return;

}

// source.addEventListener('message', function(e) {

//}, false);

source.addEventListener('open', function(e) {

console.log("connection was open");

}, false);

source.addEventListener("meetingclose", function(e) {

//var event = JSON.parse(e.data);

this.close();

loginout();

}, false);

后台简单推送方法:

public void Notify() {

if (true == Request.AcceptTypes.Any(accept => accept.Equals("text/event-stream")))

{

Response.ContentType = "text/event-stream";

Response.CacheControl = "no-cache";

//Response.BufferOutput = false;

//Response.Buffer = false;

while (false == Application["meeting-closed"].ToPrimitiveType() && Response.IsClientConnected)

{

if (true == Response.IsClientConnected)

{

Response.Write("retry: 3000\n");

Response.Write("data: {\"msg\": \"keep-alive\"}\n\n");

Response.Flush();

}

Thread.Sleep(5000);

}

if (false == Response.IsClientConnected)

{

Response.Flush();

Response.Close();

}

}

else

{

Response.Write("Client don't accept event-stream");

}

}

后面代码省略,服务端推送消息到客户端,有10台客户端连着,随着时间推移,大概5分钟后,客户端接受的消息有点延迟,有点卡,大概会有7台可以收到,慢慢的减少5台,到最后1台,按我理解EventSource对象是一个不间歇运行的程序,时间一长会大量的耗资源,甚至导致客户端浏览器崩溃,那么如何优化这段执行代码呢?是优化这个EventSource还是服务端的推送类,小弟才刚学习HTML5,请各位大牛帮助一下,下周客户就需要看到效果了!!!!!!

4223b0018a27056a132587d95d5f6cf6.png

HTML5Server-Sent Event(SSE)是一种允许服务器向客户端推送事件的技术。与传统的HTTP请求不同,SSE允许服务器向客户端发送数据,而无需客户端明确地请求。这种单向通信的方式使得SSE非常适合用于实时应用程序,例如股票报价、天气预报、社交媒体更新等。 SSE的工作原理是通过在服务器上创建一个持久连接,该连接保持打开状态,直到服务器有数据要发送给客户端。当服务器有新数据时,它会将数据发送到客户端,客户端通过监听事件来接收数据。SSE使用了EventSource API来实现这种事件监听机制。 以下是一个简单的SSE示例,其中服务器每隔1秒向客户端发送一条消息: ```html <!DOCTYPE html> <html> <head> <title>Server-Sent Event Example</title> </head> <body> <div id="messages"></div> <script> var eventSource = new EventSource("server.php"); eventSource.onmessage = function(event) { document.getElementById("messages").innerHTML += event.data + "<br>"; }; </script> </body> </html> ``` 在上面的示例中,服务器端代码可以是PHP、Node.js或其他任何支持SSE的服务器端语言。在本例中,服务器端代码是一个名为server.php的文件,其内容如下: ```php <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $i = 0; while (true) { echo "data: This is message " . $i++ . "\n\n"; ob_flush(); flush(); sleep(1); } ?> ``` 在上面的PHP代码中,我们首先设置了响应头,告诉浏览器这是一个SSE响应。然后我们使用一个无限循环来模拟服务器不断发送消息的情况。每次循环中,我们都会向客户端发送一条消息,并使用ob_flush()和flush()函数来确保消息被立即发送到客户端。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值