【JavaScript】論一個低配版Web實時通訊庫是如何實現的之二（ EventSource篇)

前情提要

「 話說上回說到！那WebSocket大俠,巧借http以內力，破了敵陣的雙工鴛鴦鎖，終於突出重圍。

然而玄難未了，此時web森林中飛出一隻銀頭紅纓槍，劃破夜

"莫非!?" websocket大俠喃喃念道，"恐怖如斯，你莫不是就是那個手使單向追魂槍的。。。"

"正是在下！"，那人厲聲喝道。只見那胸前的紋章銘刻着幾個洋文——

讀做"EventSource"！」

 

上一篇文章請看這裏：論一個低配版Web實時通訊庫是如何實現的（ WebSocket篇)

引論

simple-socket是我寫的一個"低配版"的Web實時通訊工具（相對於Socket.io），在參考了相關源碼和資料的基礎上，實現了先後端實時互通的基本功能，選用了WebSocket ->server-sent-event -> AJAX輪詢這三種方式作降級兼容，分爲simple-socket-client和simple-socket-server兩套代碼。

個人上一篇文章講了如何進行websocket的先後端編碼，因此今天來聊一聊event-source這塊的

論一個低配版Web實時通訊庫是如何實現的（ WebSocket篇)

github倉庫地址

https://github.com/penghuwan/simple-socket

npm命令

npm i simple-socket-serve   （服務端npm包）
npm i simple-socket-client   (客戶端npm包)

 

EventSource的前端代碼

EventSource的前端API主要有這麼四個

1. 建立es對象：var es = new EventSource(url)

2. es兩端鏈接事件打開的回調：es.onopen = function () { }

3. 監聽服務端發送事件： es.addEventListener("XXX", function (e) { // e.data }

4. 監聽服務端的message事件es.onmessage = function; 至關於es.addEventListener("message"，function);

業務代碼以下

（1）前端從服務端接收消息

前端經過監聽服務端message事件，接收消息，並解析event和data，而後經過emitter.emit(event, data)觸發事件，從而調用socket.on設置的監聽回調

 

function Client() {
  this.ws = null
  this.es = null;   // EventSource對象
  init.call(this);  // 設置this.type並初始化相關對象例如es或ws
  listen.call(this);
  // ...
}

function listen() { 
  // 保存this
  var self  = this;
  switch (this.type) {
    // 當type爲eventsource時，執行如下代碼，this.type根據能力檢測設置
    case 'eventsource':
      // 監聽觸發connect事件,把client對象自身傳入看成socket
      this.es.onopen = function () {
        emitter.emit('connect', self);
      };
      // 監聽服務端傳來的message事件
      this.es.addEventListener("message", function (e) {
        var payload = JSON.parse(e.data);;
        var event = payload.event;
        var data = payload.data;
        emitter.emit(event, data);
      }, false);
      break;
     // ...
  }
}

 

（2）前端發送消息給服務端

因爲event-source是單向的，只能從服務端從前端發送消息，而不能從前端發送消息給服務端。這和websocket顯著不一樣

不過別擔憂，由於咱們不是還有AJAX嘛！

對於前端發送消息的狀況 咱們能夠發一個post請求過去，同時藉助/eventsource這個路徑，告訴服務端這是一個SSE請求

 

$.ajax({,
  type: 'POST',
  url: `http://${url}/eventsource`,
  data: { event, data },
  success: function () {
  }
});

 

EventSource的服務端代碼

好像這波就沒了吧，OK，咱們接下來走下路。

server-sent-event的服務端握手流程

server-sent-event(或event-source)，須要藉助流(stream)的方式去實現通訊。

Stream 是一個抽象接口，Node 中有不少對象實現了這個接口。例如，對http 服務器的request/response 對象就是一個 Stream。

它能夠分爲四種類型：

• Readable - 可讀操做。

• Writable - 可寫操做。

• Duplex - 可讀可寫操做.

• Transform - 操做被寫入數據，而後讀出結果。

服務器每次接收的Response是一個Writable，它能夠被寫入數據，將一個流寫入另外一個流能夠經過調用pipe方法。

因此咱們須要建立一個stream的實例，而後經過調用stream.pipe(Response)將流寫入響應中，這樣就能夠被前端es.addEventListener添加的回調給接收到了。

但問題在於 。。。Stream是個抽象接口，Node.js沒有給Stream提供構造函數

 

不過不要緊，咱們能夠這樣作：

• 使用call方法繼承stream父函數

• 使用util.inherits繼承stream的原型

• 重寫_read和_write方法（不然會報錯）

 

// 由於咱們的流須要寫和讀，因此使用雙工的stream.Duplex構造
function EventStream() { 
stream.Duplex.call(this);  // 構造函數繼承
}
util.inherits(EventStream, stream.Duplex); // 原型繼承
// 重寫_read和_write方法
EventStream.prototype._read = function () { }
EventStream.prototype._write = function () { }

握手代碼邏輯

1. 建立stream實例，調用pipe方法輸送給Response, 同時stream咱們保存在socket對象中，在向前端發送數據時候會使用

2. 將Content-Type字段設置爲'text/event-stream'，同時Connection設置爲'keep-alive'

3. 將狀態碼設爲200（不然前端onopen方法不會觸發）

 

_handleEShandShake(ctx, socket) {
  // 前面定義好的相似stream的類
  const eventStream = new EventStream();
  // 設置eventStream
  socket.setEventStream(eventStream);
  // 握手成功後觸發onConnection方法,TODO
  // 設置符合Event-Source要求的首部
  ctx.set({
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
  });
  // 將Stream賦給body,Koa底層會判斷Stream類型並調用pipe方法流入response
  ctx.body = eventStream;
  // 設置表示請求成功，不然前端onopen方法不會觸發  
  ctx.status = 200;
  // 觸發connect方法，傳遞socket對象
  this.emit('connect', socket);
}

 

Event-Source服務端向前端發送消息。

這裏要先說下event-source的報文結構了，由四種字段組成

• event：事件名，對應前端es.addEventLisener設置的事件名

• data：數據，爲字符串

• id: 消息標識符，能夠缺省

• retry：表示從新鏈接的時間間隔

這四個字段兩兩之間用\n分開，而最後一個字段值須要用\n\n作結尾

例如：`event:message\n data: XXX \n\n`

 

話很少說，看代碼

class Socket extends events.EventEmitter {
  constructor(socketId) {
    super();
  }
  // 設置
  setEventStream(eventStream) {
    this.eventStream = eventStream;
  }

  // 自定義的emit,觸發的是前端的on
  emit(event, data) {
    const dataStr = JSON.stringify({event,data})
    if (this.transport === 'eventsource') {
      if (!this.eventStream) { throw new Error('eventStream不存在,沒法emit') };
      // 向stream中寫入數據，只要stream還沒有關閉
      // 數據就會傳給前端的onmessage方法或addEventListener('message',fuc)方法
      this.eventStream.push(`event:message\ndata:${dataStr}\n\n`);
    } 
  }
}

Event-Source服務端接收前端消息

以前說了，event-source是單向的，因此前端到服務端的傳送是經過Ajax請求過來的，因此解析下body,觸發事件就OK了

 

故事到這裏就結束了。

有詩爲證

 

江河湖泊浪滔滔，WebSocket多逍遙

EventSource先來卻後到，Ajax輪詢熱血逞英豪！

 

欲知後事如何，且聽下回分解！

知乎專欄

最近也在知乎上寫文章，感受破乎的體驗不好！沒有博客園好！感受博客園的各位才個個都是人才，說話又好聽！我超喜歡在裏面的。

因此說。。。你們好，給你們介紹一下這是個人知乎專欄

https://zhuanlan.zhihu.com/c_135367198

這位路過的大哥你有靈氣從鍵盤噴出，看來是百年一遇的代碼奇才，就施捨善心關注一下吧，以解小弟拖家帶口之憂，養兒奉母之愁(大霧)