服务器推（Server Push）

服务器推（Server Push）

0. 应用场景

• 聊天室或者对话类应用
• 实时的数据监控与统计
• 股票财经类看板等等

1. 简易轮询

function polling() {
    fetch(url).then(data => {
        process(data);
        return;
    }).catch(err => {
        return;
    }).then(() => {
        setTimeout(polling, 5000);
    });
}
polling();
复制代码

2. COMET

基于纯浏览器的“服务器推”技术,这种基于HTTP长连接、无须在浏览器端安装插件的“服务器推”技术为“Comet”。

常用的COMET分为两种：基于HTTP的长轮询（long-polling）技术，以及基于iframe的长连接流（stream）模式。

2.1 基于HTTP的长轮询（long-polling）

客户端发起请求后，服务端会保持住该连接，直到后端有数据更新后，才会将数据返回给客户端；客户端在收到响应结果后再次发送请求，如此循环往复。

function query() {
    fetchMsg('/longpolling')
        .then(function(data) {
            // 请求结束，触发事件通知eventbus
            eventbus.trigger('fetch-end', {data, status: 0});
        });
}

eventbus.on('fetch-end', function (result) {
    // 处理服务端返回的数据
    process(result);
    // 再次发起请求
    query();
});
复制代码

2.2 基于iframe的长连接流（stream）模式 当我们在页面中嵌入一个iframe并设置其src时，服务端就可以通过长连接“源源不断”地向客户端输出内容。

// 在父页面中定义的数据处理方法
function process(data) {
    // do something
}

// 创建不可见的iframe
var iframe = document.createElement('iframe');
iframe.style = 'display: none';
// src指向后端接口
iframe.src = '/long_iframe';
document.body.appendChild(iframe);
复制代码

不过使用iframe有个小瑕疵，因此这个iframe相当于永远也不会加载完成，所以浏览器上会一直有一个loading标志。

3. SSE (Server-Sent Events)

HTTP响应内容有一种特殊的content-type —— text/event-stream，该响应头标识了响应内容为事件流，客户端不会关闭连接，而是等待服务端不断得发送响应结果。

SSE规范比较简单，主要分为两个部分：浏览器中的EventSource对象，以及服务器端与浏览器端之间的通讯协议。

var source = new EventSource('/sse');
// 默认的事件
source.addEventListener('message', function (e) {
    console.log(e.data);
}, false);

// 用户自定义的事件名
source.addEventListener('my_msg', function (e) {
    process(e.data);
}, false);

// 监听连接打开
source.addEventListener('open', function (e) {
    console.log('open sse');
}, false);

// 监听错误
source.addEventListener('error', function (e) {
    console.log('error');
});
复制代码

4. WebSocket

建立一个WebSocket连接

var ws = new WebSocket('ws://127.0.0.1:8080');
ws.onopen = function () {
    console.log('open websocket');
};

ws.onmessage = function (e) {
    var data = JSON.parse(e.data);
    process(data);
};
复制代码

转载于:https://juejin.im/post/5c6bd513f265da2d8c7dc0df