服务端数据推送方式-SSE(server-sent event)简介及上手小demo

最新推荐文章于 2024-06-12 23:23:35 发布

L瑜

最新推荐文章于 2024-06-12 23:23:35 发布

阅读量9.6k

点赞数

分类专栏： php 文章标签： php html5 响应式 sse websocket

本文链接：https://blog.csdn.net/lambert310/article/details/52911889

版权

php 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

老的http协议是请求-响应式的，对于某些实时性要求比较高的需求（例如微博消息推送），实现起来是比较麻烦的，

而html5标准中，新增了一个SSE（server-sent event，服务端推送事件），可以方便地做到消息实时推送，并且由于是官方特性，主流浏览器对其支持是较好的。和websocket不同的是，ws是全双工的，本质上是一个额外的tcp连接，而sse是直接建立在当前http连接上的，本质上是保持一个http长连接，但是和comet不同的是：comet是每次服务端返回数据后，连接关闭然后客户端马上再次发起连接。而sse是保持长连接常驻。

而客户端对数据的通信是通过js的EventSource来进行的，EventSource提供了三个事件：

1、open：当成功建立连接时产生

2、message：当接收到消息时产生

3、error：当出现错误时产生

直接使用即可。

结合js对json对象的支持，我们可以通过sse实现json格式数据推送，从而进行扩展，demo如下：

html端：

<html>
  <head>
    <meta charset="UTF-8">
    <title>SSE DEMO</title>
  </head>
  <body>
    <pre id="sse_content"></pre>
    <script>
    var es = new EventSource("/sse.php");
    es.addEventListener("message", function(e){
	  j = JSON.parse(e.data);
          document.getElementById("sse_content").innerHTML += "\n" + j.test;
      },false);
    </script>
  </body>
</html>

后端sse.php：

<?php
header("Content-Type: text/event-stream");

while(true){
  echo "data:".json_encode(['test'=>date("Y-m-d H:i:s")])."\n\n";
  @ob_flush();@flush();
  sleep(3);
  }
?>

示例：服务端发送消息的格式：

data: first event

data: second event
id: 100

event: myevent
data: third event
id: 101

: this is a comment
data: fourth event
data: fourth event continue
retry: 1

上面的消息类型解释：

空白：表示该行是注释，会在处理时被忽略。

data：表示该行包含的是数据。以 data 开头的行可以出现多次。所有这些行都是该事件的数据。

event：表示该行用来声明事件的类型。浏览器在收到数据时，会产生对应类型的事件。

id：表示该行用来声明事件的标识符。

retry，表示该行用来声明浏览器在连接断开之后进行再次连接之前的等待时间。

L瑜

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
服务端数据推送方式-SSE(server-sent event)简介及上手小demo

老的http协议是请求-响应式的，对于某些实时性要求比较高的需求（例如微博消息推送），实现起来是比较麻烦的，而html5标准中，新增了一个SSE（server-sent event，服务端推送事件），可以方便地做到消息实时推送，并且由于是官方特性，主流浏览器对其支持是较好的。和websocket不同的是，ws是全双工的，本质上是一个额外的tcp连接，而sse是直接建立在当前http连接上的，本
复制链接

扫一扫

专栏目录