背景

最近開發(fā)一個頁面碰到一個需求，需要對部分?jǐn)?shù)據(jù)需要實時更新狀態(tài)，面對這樣子的場景，我們通常有以下幾個方案：

輪詢，利用setTimeout定時輪詢
WebSocket，利用長鏈接保持與服務(wù)通訊
SSE，服務(wù)端推送機制

是什么

我們先簡單認(rèn)識一下這三者的區(qū)別：

輪詢

輪詢就是利用setTimeout的定時器，定時向服務(wù)器發(fā)起請求，代碼如下：

let timeout = 0;
functon rollRequest(requestFunc, times, immediately){
    if(timeout !== 0){
        clearTimeout(timeout);
    }

    if(immediately){
        requestFunc && requestFunc();
    }

    timeout = setTimeout(()=>{
        requestFunc && requestFunc();
        rollRequest(requestFunc, times, false);
    }, times);
}

缺點

無用請求過多，可能每次請求返回的內(nèi)容都是相同
實時性不可控，如果內(nèi)容更新了，但是頁面無法及時更新

WebSocket

針對上面輪詢的缺點，WebSokcet長鏈接就能很好解決，如：

建立鏈接后，當(dāng)服務(wù)器發(fā)現(xiàn)數(shù)據(jù)發(fā)生變化后才返回
可控性高，客戶端和服務(wù)端都可以互相通信

具體實現(xiàn)代碼如下：

// 客戶端
const ws = new WebSocket(`wss://127.0.0.1:8081`);

ws.send("這是一條消息：" + count);

// 監(jiān)聽消息
ws.onmessage = function (event) {
  console.log(event.data);
}
// 關(guān)閉連接
ws.close();

// 服務(wù)端
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});

缺點

可能實現(xiàn)方案對于一個頁面數(shù)據(jù)更新有點太重了，主要包括以下幾點：

需要有完整鏈路認(rèn)證，如：鑒權(quán)、登錄等
心跳機制實現(xiàn)，前后端都需要設(shè)置
前后端需要規(guī)定數(shù)據(jù)返回規(guī)范
服務(wù)端需要日志記錄

SSE服務(wù)端推送

SSE全稱Server-sent Events，是HTML 5 規(guī)范的一個組成部分，它主要由兩部分組成：

第一部分是服務(wù)端和瀏覽器的通訊協(xié)議
第二部分是前端需要利用EventSource去監(jiān)聽返回數(shù)據(jù)

對比WebSocket：

SSE	WebSocket
單向：僅服務(wù)端能發(fā)送消息	雙向：客戶端、服務(wù)端雙向發(fā)送
僅文本數(shù)據(jù)	二進(jìn)制、文本都可
常規(guī)HTTP協(xié)議	WebSocket協(xié)議

實現(xiàn)一個SSE代碼如下：

瀏覽器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Demo測試</title>
</head>
<body>
    <h3>SSE返回內(nèi)容</h3>
    <div id="app"></div>
    <script>
        const eventSource = new EventSource('http://localhost:3000/sse');
        eventSource.onmessage = (event) => {
            document.getElementById('app').innerHTML = document.getElementById('app').innerHTML + `<p>${event.data}</p>`;
        }
    </script>
</body>
</html>

服務(wù)端：

const http = require('http')
const fs = require('fs')

// create a server
const server = http.createServer()

// 監(jiān)聽路由
server.on('request', (req, res) => {
    console.log('request', req.url)
    if (req.url === '/sse') {
        // Set CORS headers
        res.setHeader('Access-Control-Allow-Origin', '*')
        res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS')
        res.setHeader('Access-Control-Allow-Headers', 'Content-Type')

        // Set SSE headers
        res.setHeader('Content-Type', 'text/event-stream')
        res.setHeader('Cache-Control', 'no-cache')

        // Send a ping approx every 2 seconds
        res.write("retry: 10000\n\n");
        res.write("event: connecttime\n\n");
        res.write("data: 第一次發(fā)送:" + (new Date()) + "\n");

        // 模擬收到消息推送給客戶端
        interval = setInterval(function () {
            res.write("data: 后續(xù)更新" + (new Date()) + "\n\n");
        }, 5000);
    }
    if (req.url === '/index.html' || req.url === '/') {
        // 如果是html文件，返回html文件
        res.setHeader('Content-Type', 'text/html')
        const html = fs.readFileSync('./public/index.html');
        res.end(html)
    }
})

// Listen
server.listen(3000, () => {
    console.log('Server started on port 3000')
})

缺點

兼容性問題，但是目前絕大部分瀏覽器是支持的，如果不支持可以采用降級方案——輪詢
會長期占用一個http鏈接，

可能會導(dǎo)致瀏覽器(chrome最大http請求數(shù)是6)無法發(fā)起其他請求，這里注意是一個坑，需要設(shè)置一個超時時間，如果長時間無返回數(shù)據(jù)更新可以關(guān)閉鏈接
解決方案，升級到http2協(xié)議可解決http請求數(shù)限制問題，放到后面《如何搭建http2網(wǎng)站》講解