服務(wù)端推

服務(wù)端推，指的是由服務(wù)器主動(dòng)的向客戶端發(fā)送消息（響應(yīng)）。在應(yīng)用層的HTTP協(xié)議實(shí)現(xiàn)中，“請(qǐng)求-響應(yīng)”是一個(gè)round trip，它的起點(diǎn)來自客戶端，因此在應(yīng)用層之上無法實(shí)現(xiàn)簡易的服務(wù)端推功能。當(dāng)前解決服務(wù)端推送的方案有這幾個(gè)：

1、客戶端長輪詢

2、websocket雙向連

3、iframe永久幀

長輪訓(xùn)雖然可以避免短輪訓(xùn)造成的服務(wù)端過載，但在服務(wù)端返回?cái)?shù)據(jù)后仍需要客戶端主動(dòng)發(fā)起下一個(gè)長輪訓(xùn)請(qǐng)求，等待服務(wù)端響應(yīng)，這樣仍需要底層的連接建立而且服務(wù)端處理邏輯需要相應(yīng)處理，不符合邏輯上的流程簡單的服務(wù)端推送；

websocket連接相對(duì)而言功能最強(qiáng)大，但是它對(duì)服務(wù)器的版本有要求，在可以使用websocket協(xié)議的服務(wù)器上盡量采用此種方式；

iframe永久幀則是在在頁面嵌入一個(gè)專用來接受數(shù)據(jù)的iframe頁面，該頁面由服務(wù)器輸出相關(guān)信息，如，服務(wù)器不停的向iframe中寫入類似的script標(biāo)簽和數(shù)據(jù)，實(shí)現(xiàn)另一種形式的服務(wù)端推送。不過永久幀的技術(shù)會(huì)導(dǎo)致主頁面的加載條始終處于“l(fā)oading”狀態(tài)，體驗(yàn)很差。

HTML5規(guī)范中提供了服務(wù)端事件EventSource，瀏覽器在實(shí)現(xiàn)了該規(guī)范的前提下創(chuàng)建一個(gè)EventSource連接后，便可收到服務(wù)端的發(fā)送的消息，這些消息需要遵循一定的格式，對(duì)于前端開發(fā)人員而言，只需在瀏覽器中偵聽對(duì)應(yīng)的事件皆可。

相比較上文中提到的3中實(shí)現(xiàn)方式，EventSource流的實(shí)現(xiàn)方式對(duì)客戶端開發(fā)人員而言非常簡單，兼容性上出了IE系的瀏覽器（IE、Edge）外其他都良好；對(duì)于服務(wù)端，它可以兼容老的瀏覽器，無需upgrade為其他協(xié)議，在簡單的服務(wù)端推送的場景下可以滿足需求。在瀏覽器與服務(wù)端需要強(qiáng)交互的場景下，websocket仍是不二的選擇。

EventSource規(guī)范簡析

瀏覽器端

瀏覽器端，需要?jiǎng)?chuàng)建一個(gè)EventSource對(duì)象，并且傳入一個(gè)服務(wù)端的接口URI作為參數(shù)。

var evtSource = new EventSource('http://localhost:9111/es');

其中，'http://localhost:9111/es'為服務(wù)端吐出數(shù)據(jù)的接口。目前，EventSource在大多數(shù)瀏覽器端不支持 跨域，因此它不是一種跨域的解決方案。

默認(rèn)EventSource對(duì)象通過偵聽“message”事件獲取服務(wù)端傳來的消息，“open”事件則在http連接建立后觸發(fā)，”error“事件會(huì)在通信錯(cuò)誤（連接中斷、服務(wù)端返回?cái)?shù)據(jù)失敗）的情況下觸發(fā)。同時(shí)，EventSource規(guī)范允許服務(wù)端指定自定義事件，客戶端偵聽該事件即可。

evtSource.addEventListener('message',function(e){
    console.log(e.data);
});
evtSource.addEventListener('error',function(e){
    console.log(e);
})

服務(wù)端

事件流的對(duì)應(yīng)MIME格式為text/event-stream，而且其基于HTTP長連接。針對(duì)HTTP1.1規(guī)范默認(rèn)采用長連接，針對(duì)HTTP1.0的服務(wù)器需要特殊設(shè)置。

服務(wù)端返回?cái)?shù)據(jù)需要特殊的格式，它分為四種消息類型：

event, data, id, retry

其中，event指定自定義消息的名稱，如event: customMessage\n;

data指定具體的消息體，可以是對(duì)象或者字符串，如data: JSON.stringify(jsonObj)\n\n,在消息體后面有兩個(gè)換行符\n，代表當(dāng)前消息體發(fā)送完畢，一個(gè)換行符標(biāo)識(shí)當(dāng)前消息并未結(jié)束，瀏覽器需要等待后面數(shù)據(jù)的到來后再觸發(fā)事件；

id為當(dāng)前消息的標(biāo)識(shí)符，可以不設(shè)置。一旦設(shè)置則在瀏覽器端的eventSource對(duì)象中就會(huì)有體現(xiàn)(假設(shè)服務(wù)端返回id: 369\n)，eventSource.lastEventId == 369。該字段使用場景不大;

retry設(shè)置當(dāng)前http連接失敗后，重新連接的間隔。EventSource規(guī)范規(guī)定，客戶端在http連接失敗后默認(rèn)進(jìn)行重新連接，重連間隔為3s，通過設(shè)置retry字段可指定重連間隔;

每個(gè)字段都有名稱，緊接著有個(gè)”:“。當(dāng)出現(xiàn)一個(gè)沒有名稱的字段而只有”:“時(shí)，這就會(huì)被服務(wù)端理解為”注釋“，并不會(huì)被發(fā)送至瀏覽器端，如: commision。

由于EventSource是基于HTTP連接之上的，因此在一段沒有數(shù)據(jù)的時(shí)期會(huì)出現(xiàn)超時(shí)問題。服務(wù)器默認(rèn)HTTP超時(shí)時(shí)間為2分鐘，在node端可以通過response.connection.setTimeou(0)設(shè)置為默認(rèn)的2min超時(shí)， 因此需要服務(wù)端做心跳?；?，否則客戶端在連接超時(shí)的情況下出現(xiàn)net::ERR_INCOMPLETE_CHUNKED_ENCODING錯(cuò)誤。通過閱讀相關(guān)規(guī)范，發(fā)現(xiàn)注釋行可以用來防止連接超時(shí),服務(wù)器可以定期發(fā)送一條消息注釋行,以保持連接不斷。

下面提供koa的服務(wù)端代碼：

var fs = require('fs');
var path = require('path');
var PassThrough = require('stream').PassThrough;
var Readable = require('stream').Readable;
var koa = require('koa');
var Router = require('koa-router');
var app = new koa();
var router = new Router();


function RR(){
    Readable.call(this,arguments);
}
RR.prototype = new Readable();
RR.prototype._read = function(data){
}


router.get('/',function(ctx,next){
    ctx.set('content-type','text/html');
    ctx.body = fs.readFileSync(path.join(process.cwd(),'eventServer.html'));
});


const sse = (stream,event, data) => {
    return stream.push(`event:${ event }\ndata: ${ JSON.stringify(data) }\n\n`)
//    return stream.write(`event:${ event }\ndata: ${ JSON.stringify(data) }\n\n`);
}
router.get('/es',function(ctx,next){
    var stream = new RR()//PassThrough();
    ctx.set({
        'Content-Type':'text/event-stream',
        'Cache-Control':'no-cache',
        Connection: 'keep-alive'
    });
    sse(stream,'test',{a: "yango",b: "tango"});
    ctx.body = stream;
    setInterval(()=>{
        sse(stream,'test',{a: "yango",b: Date.now()});
    },3000); 
});


app.use(router.routes());
app.listen(9111,function(){
    console.log('listening port 9111');
});

此處需要注意的是koa-router的返回值必須是一個(gè)Stream（Readable），這是由于koa的特殊性造成的。如果context.body不是Stream是一個(gè)字符串或者Buffer實(shí)例，會(huì)直接在node原生中調(diào)用res.end(buffer),結(jié)束了HTTP響應(yīng)：

koa lib/application.js


// responses
if (Buffer.isBuffer(body)) return res.end(body);
if ('string' == typeof body) return res.end(body);
if (body instanceof Stream) return body.pipe(res);

因此造成了服務(wù)端事件流無法正確響應(yīng)。而返回Stream類型的方式有幾種，如通過擴(kuò)展stream模塊的Readable可讀流返回或者直接采用PassThrough流返回，亦可通過through2模塊或者Transform對(duì)象實(shí)現(xiàn)，歸根到底保證可以從該stream對(duì)象中pipe出數(shù)據(jù)至http.ServerResponse對(duì)象中。

附頁面代碼

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        hello world
    </div>
    <p id="info"></p>
    <script>
        var infoShow = document.querySelector('#info');
        var se = new EventSource('http://localhost:9111/es');
        se.addEventListener('test',function(e){
            infoShow.textContent += e.data+'\n';
        });
        se.addEventListener('error',function(e){
            console.log(e);
        })
    </script>
</body>
</html>

參考資料

使用服務(wù)器發(fā)送事件 EventSource超時(shí)