【18】server-sent Event服务器发送事件

最新推荐文章于 2024-06-18 09:47:03 发布

业余&玩家

最新推荐文章于 2024-06-18 09:47:03 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/qq_28401309/article/details/86579624

版权

简介

server-sent实现的就是服务器向浏览器发送消息，根据这一特性，我们运用在文章更新推送的功能上，它基于HTTP协议，除了微软的ie/edge浏览器不支持之外，其他的浏览器基本都支持。server-sent发送的是数据流，而不是数据包，流信息发送，就会使得客户端不会关闭连接。

浏览器支持测试

if(typeof(EventSource)!=="undefined")
  {
  // Some code.....
  }
else
  {
     alert("您的浏览器不支持server-sent");
  }

2017-10-29_134058.png

基本用法

首先创建EventSource对象，用于接收服务器发送过来的消息，对象实例的readystate属性：0表示未连接，1表示已连接，2表示连接断开。它的api:open()连接建立的时候触发，此时你可以写回调函数。message()收到来自服务端的消息时触发。error()连接出错的时候触发。close()用于关闭连接。

//客户端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>serversent</title>
</head>
<body>
    
</body>
<script type='text/javascript'>
    if(typeof(EventSource)!="undefined"){
        //alert("您的浏览器支持server-sent");
        var source=new EventSource("serversent.php");
        source.onmessage=function (event) {
            console.log(event.data);
        }
    }else{
        alert("您的浏览器不支持server-sent");
    }
</script>
</html>

服务端采用php实现简单的消息发送。每条消息之间采用\n\n分开。

//服务端
<?php 
//头信息的设置
header('content-type:text/event-stream');
header('cache-control:no-cache');
//retry:设置重新连接的时间间隔
echo "retry:10000\n\n";
//data:发送的消息
echo "data:this is a test\n\n";
flush();
 ?>

参考资料

http://www.w3school.com.cn/html5/html_5_serversentevents.asp
http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html

业余&玩家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【18】server-sent Event服务器发送事件

简介server-sent实现的就是服务器向浏览器发送消息，根据这一特性，我们运用在文章更新推送的功能上，它基于HTTP协议，除了微软的ie/edge浏览器不支持之外，其他的浏览器基本都支持。server-sent发送的是数据流，而不是数据包，流信息发送，就会使得客户端不会关闭连接。浏览器支持测试if(typeof(EventSource)!=="u...
复制链接

扫一扫