最近学习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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。