最近学习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-steamCache-Control: no-cacheConnection: 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...