共计 2422 个字符，预计需要花费 7 分钟才能阅读完成。
最近学习 webpack 热更新时发现，有一个__webpack_hmr 请求，content-type 为 text/event-stream，没有见过，所以学习记录下。
webpack 热更新需要向浏览器推送信息，一般都会想到 websocket，但是还有一种方式，叫做 Server-Sent Events（简称 SSE）。
SSE 是 websocket 的一种轻型替代方案。
和 websocket 有以下几点不同：
- SSE 是使用 http 协议，而 websocket 是一种单独的协议
- SSE 是单向传输，只能服务端向客户端推送，websocket 是双向
- SSE 支持断点续传，websocket 需要自己实现
- SSE 支持发送自定义类型消息
SSE 的原理：
相当于客户端向服务器发起下载请求，数据不是一次性传输的数据包，而是数据流，不断的传输向客户端，类似于视频下载一样。
简单的使用方法：客户端????：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>SSE Demo</title>
</head>
<body>
<div id="page"></div>
<script>
// SSE 的 API 在 EventSource 对象上
// 可以使用 if('EventSource' in window) 判断浏览器是否支持 SSE
// 建立 SSE 连接，直接如下创建 EventSource 实例，支持跨越
var source = new EventSource("http://127.0.0.1:9988/createSse");
// EventSource.readyState 代表连接状态，有以下三种情况
// 0 —> 连接还未建立，或者正在断线重连
// 1 -> 连接已建立，可以接受数据
// 2 -> 连接已关闭或请求错误
var div = document.getElementById("page");
// 连接创建成功的回调事件
source.onopen = function (event) {div.innerHTML += "<p>Connection open ...</p>";};
// 连接创建失败的回调事件
source.onerror = function (event) {div.innerHTML += "<p>Connection close.</p>";};
// 自定义事件，服务端返回时设置 event 字段为自定义事件名称
source.addEventListener("connecttime",
function (event) {div.innerHTML += "<p>Start time:" + event.data + "</p>";},
false
);
// 接受到数据的回调事件，event 未特殊设置时，默认是 message
source.onmessage = function (event) {div.innerHTML += "<p>message event:" + event.data + "</p>";};
// 关闭连接 source.close();
</script>
</body>
</html>服务端????：
服务端返回数据必须包含以下 header
Content-Type: text/event-steam // 第一行的 Content-Type 必须指定为 text/event-steam
Cache-Control: no-cache
Connection: keep-alive服务器返回的数据是由若干个的 message 组成，每个 message 用 \n\n 分割（因为是传输的数据格式必须是文本型 ）。
每个 message 内容是[field]：value\n
field 有四种情况 id、event(type)、data、retry
- id 为每个返回数据的唯一标识，浏览器用 lastEventId 读取 id，一旦连接断开，浏览器会从新发送 http 请求，带有特殊请求头 Last-Event-Id，代表断开时的 id，用于建立重新连接，属于一种重连的同步机制。
- data 数据内容一般放于 data 字段。
- event(type)：消息类型，一般默认为 message，服务端可以自定义，前端用 addEventListener()监听。
- retry：代表服务器重新发送请求的间隔时间。
上代码：
var http = require("http");
http.createServer(function(req, res) {if(req.url === '/createSse') {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": 'no-cache',
"Connection": 'keep-alive',
"Access-Control-Allow-Origin": '*'
})
res.write('retry: 10000\n')
res.write("event: connecttime\n");
res.write("data:" + (new Date()) + "\n\n");
const interval = setInterval(function() {res.write("data:" + (new Date()) + "\n\n");
}, 3000)
req.connection.addListener("close", function () {clearInterval(interval);
}, false);
}
}).listen(9988, '127.0.0.1')可以把以上代码 copy 到本地，node 运行下看下效果哈
github：https://github.com/superNos/SSE-Demo
参考阮一峰大神文章学习的
大神原文：http://www.ruanyifeng.com/blo…
正文完
发表至： javascript
2019-10-09
