content-type为text/event-stream的请求是什么？

最近学习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...

content-type为text/event-stream的请求是什么？

wuxx

引用和评论

Nginx学习笔记

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号