【HTML5】WebSocket和SSE

程序员文章站 2022-06-10 09:30:54

...

Comet&SSE

有两种实现 Comet 的方式：长轮询和流。
简单介绍一下短轮询和长轮询、流
【HTML5】WebSocket和SSE
短轮询：请求，立刻响应。

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

-流不同于上述两种轮询，因为它在页面的整个生命周期内只
使用一个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();
?>

SSE&WebSocket

SSE与WebSocket有相似功能，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：

WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。
WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在 HTTP协议之上的，现有的服务器软件都支持。
SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。
SSE默认支持断线重连，WebSocket则需要额外部署。
SSE支持自定义发送的数据类型。
SSE不支持CORS
参数url就是服务器网址，必须与当前网页的网址在同一个网域（domain），而且协议和端口都必须相同。
WebSocket支持
-
具体WebSocket不再赘述。

http://www.w3school.com.cn/html5/html_5_serversentevents.asp
http://javascript.ruanyifeng.com/htmlapi/eventsource.html

【HTML5】WebSocket和SSE

Comet&SSE

SSE&WebSocket

html5的新增的标签和废除的标签简要概述

html5 Canvas画图教程(9)—canvas中画出矩形和圆形

详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

HTML5 拖放（Drag 和 Drop）详解与实例代码

PHP用swoole+websocket和redis实现web一对一聊天

HTML5中的Article和Section元素认识及使用

使用HTML5的File实现base64和图片的互转

HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

HTML5初探——新增的表单元素和属性

HTML5本地存储和本地数据库实例详解