乐趣区

contenttype为texteventstream的请求是什么

jiezi

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

退出移动版