【HTML5】WebSocket和SSE

最新推荐文章于 2024-08-21 09:30:00 发布

TechFE

最新推荐文章于 2024-08-21 09:30:00 发布

阅读量9.2k

点赞数 4

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/future_todo/article/details/50097363

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Comet&SSE

有两种实现 Comet 的方式：长轮询和流。
简单介绍一下短轮询和长轮询、流

短轮询：请求，立刻响应。

长轮询：等待有消息的时候相应。

-流不同于上述两种轮询，因为它在页面的整个生命周期内只
使用一个HTTP 连接

SSE（Server-Sent Events，服务器发送事件）是围绕只读Comet 交互推出的API 或者模式。
SSE API允许网页获得来自服务器的更新（HTML5），用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream，而且是浏览器中的JavaScript API 能解析格式输出。SSE 支持短轮询、长轮询和HTTP 流，而且能在断开连接时自动确定何时重新连接。

简单说，所谓SSE，就是浏览器向服务器发送一个HTTP请求，然后服务器不断单向地向浏览器推送“信息”（message）。这种信息在格式上很简单，就是“信息”加上前缀“data: ”，然后以“\n\n”结尾（既是所谓的事件流：通过一个持久的HTTP 响应发送，这个响应的MIME 类型为text/event-stream。响应的格式是纯文本）。

data：******

用处：浏览器推送消息。
W3School上的例子：

<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("/example/html5/demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br />";
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }
</script>

</body>
</html>

服务器端代码：

PHP 代码 (demo_sse.php)：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>