背景

最近開發一個頁面碰到一個需求，需要對部分數據需要實時更新狀態，面對這樣子的場景，我們通常有以下幾個方案：

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

是什么

我們先簡單認識一下這三者的區別：

輪詢

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

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);
}

缺點

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

WebSocket

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

建立鏈接后，當服務器發現數據發生變化后才返回
可控性高，客戶端和服務端都可以互相通信

具體實現代碼如下：

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

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

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

// 服務端
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);
    });
});

缺點

可能實現方案對于一個頁面數據更新有點太重了，主要包括以下幾點：

需要有完整鏈路認證，如：鑒權、登錄等
心跳機制實現，前后端都需要設置
前后端需要規定數據返回規范
服務端需要日志記錄

SSE服務端推送

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

第一部分是服務端和瀏覽器的通訊協議
第二部分是前端需要利用EventSource去監聽返回數據

對比WebSocket：

SSE	WebSocket
單向：僅服務端能發送消息	雙向：客戶端、服務端雙向發送
僅文本數據	二進制、文本都可
常規HTTP協議	WebSocket協議

實現一個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返回內容</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>

服務端：

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

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

// 監聽路由
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: 第一次發送:" + (new Date()) + "\n");

        // 模擬收到消息推送給客戶端
        interval = setInterval(function () {
            res.write("data: 后續更新" + (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')
})