Part 01

什么是即時(shí)通信？ 

即時(shí)通信是一個(gè)實(shí)時(shí)通信系統(tǒng)，允許兩人或多人使用網(wǎng)絡(luò)實(shí)時(shí)的傳遞文字消息、文件、語音與視頻交流。即時(shí)通信技術(shù)在Native App中通過TCP、UDP等協(xié)議可以輕松實(shí)現(xiàn)，在Native應(yīng)用較為流行。

受HTTP協(xié)議以及Web客戶端框架限制，想在Web中實(shí)現(xiàn)真正的即時(shí)通信，可謂是技術(shù)上盡腦汁，極盡所能。從傳統(tǒng)的短輪詢、長輪詢到Comet（長輪詢的變體）技術(shù)，再到HTML5標(biāo)準(zhǔn)發(fā)布之后的WebSocket、 SSE這類技術(shù)的橫空出現(xiàn)，使Web端即時(shí)通信的技術(shù)方案越來越多，實(shí)現(xiàn)也越來越容易。但是對于技術(shù)人員面對不同的場景該如何選擇更實(shí)用的技術(shù)方案呢？

Part 02

Web即時(shí)通信實(shí)現(xiàn)方案有哪些？

2.1 輪詢的原理與實(shí)現(xiàn)

輪詢分為短輪詢與長輪詢??

短輪詢：是客戶端定期向服務(wù)器發(fā)起請求查詢并獲取數(shù)據(jù)，無論是否有數(shù)據(jù)服務(wù)端都立即響應(yīng)客戶端的請求，該方案較為簡單不做過多介紹。

長輪詢：是比短輪詢更有效的一種技術(shù)，當(dāng)服務(wù)器收到瀏覽器請求后如果有數(shù)據(jù), 服務(wù)器立刻響應(yīng)請求; 如果沒有數(shù)據(jù)服務(wù)器就會hold一段時(shí)間，盡可能長時(shí)間的保持瀏覽器的連接打開；這段時(shí)間內(nèi)如果有數(shù)據(jù)，服務(wù)器立刻響應(yīng)請求; 如果時(shí)間到了還沒有數(shù)據(jù), 則響應(yīng)http請求;瀏覽器收到http響應(yīng)后，立即再發(fā)送一個(gè)同樣http請求查詢是否有數(shù)據(jù)；如此重復(fù)下去。下圖是長輪詢的交互示意圖：

長輪詢?yōu)g覽器代碼實(shí)現(xiàn)如下：

/* Client - subscribing to the test events */
subscribe: (callback) => {
const pollUserEvents = () => {
$.ajax({
method: 'GET',
url: 'http://localhost:8080/testEvents',
success: (data) => {
callback(data) // process the data
},
complete: () => {
pollUserEvents();
},
timeout: 30000
})
}

2.2 WebSocket的原理與實(shí)現(xiàn)

在2008年中期，開發(fā)人員Michael Carter和Lan Hickson敏銳的感受到Comet在實(shí)現(xiàn)復(fù)雜交互時(shí)帶來的的苦惱和局限，他們制定了一項(xiàng)計(jì)劃并引入現(xiàn)代實(shí)時(shí)雙向通信的新標(biāo)準(zhǔn)，創(chuàng)造了WebSocket,并進(jìn)入了W3C HTML草案標(biāo)準(zhǔn)，2011年RFC 6455-WebSocket協(xié)議被發(fā)布到了IETF網(wǎng)站。

WebSocket是一個(gè)構(gòu)建在設(shè)備TCP/IP堆棧上的瘦傳輸層，一個(gè)獨(dú)立的基于TCP的協(xié)議，為Web應(yīng)用程序開發(fā)人員提供盡可能接近原始的TCP通信層，WebSocket與HTTP唯一的關(guān)系是它的握手是由HTTP服務(wù)器解釋為一個(gè)Upgrade請求。

WebSocket是一種事件驅(qū)動的協(xié)議，這意味著可以將其用于真正的實(shí)時(shí)通信。WebSocket的實(shí)現(xiàn)了一次連接，雙方多次通信的能力。首先由客戶端發(fā)出WebSocket連接請求，服務(wù)器端進(jìn)行響應(yīng)，實(shí)現(xiàn)類似TCP握手的動作。這個(gè)連接一旦建立起來，在客戶端和服務(wù)器之間會一直保持該連接，兩者之間可以直接的進(jìn)行數(shù)據(jù)的互相傳送，并且在連接被關(guān)閉前可以進(jìn)行多次交互。

WebSocket瀏覽器側(cè)代碼實(shí)現(xiàn)：

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost/ws');
ws.on('open', function open() {
    ws.send('something');
});
ws.on('message', function incoming(data) {
    console.log(data);
});

WebSocket服務(wù)端代碼實(shí)現(xiàn)：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    });
    ws.send('something');
});

2.3 SSE的原理與實(shí)現(xiàn)

SSE是Server-Sent Events的簡稱，是一種可以主動從服務(wù)端推送消息給瀏覽器的技術(shù)。SSE也是使用HTTP協(xié)議進(jìn)行交互，嚴(yán)格地說HTTP協(xié)議無法做到服務(wù)器主動推送信息給瀏覽器，都是瀏覽器主動去請求服務(wù)器端獲取最新的數(shù)據(jù)，SSE技術(shù)使服務(wù)器與瀏覽器之間維護(hù)一個(gè)HTTP長連接，當(dāng)有新數(shù)據(jù)時(shí)，服務(wù)端可以通過這個(gè)長連接將數(shù)據(jù)發(fā)送給瀏覽器。

瀏覽器主動請求建立一個(gè)格式為text/event-stream的stream流 ，服務(wù)器給瀏覽器發(fā)送的數(shù)據(jù)不是一次性的數(shù)據(jù)包，而是一個(gè)stream流，并且瀏覽器不會關(guān)閉連接，會一直等著服務(wù)器發(fā)送新的數(shù)據(jù)流報(bào)文。

客戶端代碼實(shí)現(xiàn)：

var SSENotification = {
  source: null,
  subscribe: function() {
    if ('EventSource' in window) {
      this.source = new EventSource('/sse');
      this.source.addEventListener('message', function(res) {
        const d = res.data;
        window.ChatroomDOM.renderData(JSON.parse(d));
      });
    }
    return this.unsubscribe;
  },
  unsubscribe: function () {
    this.source && this.source.close();
  }
}

服務(wù)器端代碼實(shí)現(xiàn)：

router.get('/sse', function(req, res) {
  const connectors = chatRoom.getConnectors();
  const messages = chatRoom.getMessages();
  const response = { code: 200, data: { connectors: connectors, messages: messages } };
  res.writeHead(200, {
    "Content-Type":"text/event-stream",
    "Cache-Control":"no-cache",
    "Connection":"keep-alive",
    "Access-Control-Allow-Origin": '*',
  });
  res.write("retry: 10000\n");
  res.write("data: " + JSON.stringify(response) + "\n\n");
  var unsubscribe = Event.subscribe(function() {
    const connectors = chatRoom.getConnectors();
    const messages = chatRoom.getMessages();
    const response = { code: 200, data: { connectors: connectors, messages: messages } };
    res.write("data: " + JSON.stringify(response) + "\n\n");
  });
  req.connection.addListener("close", function () {
    unsubscribe();
  }, false);
});

Part 03

Web即時(shí)通信方案對比 

三種即時(shí)通信技術(shù)方案各有優(yōu)缺點(diǎn)，三種技術(shù)方案特性對比如下：

從對比可以得出??

長輪詢：兼容性好，實(shí)現(xiàn)容易；但是由于需要不停向服務(wù)器請求查詢，很多時(shí)候都是無效報(bào)文，效率低，客戶端數(shù)量多時(shí)服務(wù)端的壓力較大；適用于掃碼登錄，流程狀態(tài)變化等場景。

WebSocket：支持雙向通信，可以實(shí)現(xiàn)真正的實(shí)時(shí)通信，支持二進(jìn)制數(shù)據(jù)傳輸，基本可以勝任各種即時(shí)通信場景，而且由于WebSocket的首部信息很小，報(bào)文有效載荷高，在海量并發(fā)和客戶端與服務(wù)器交互負(fù)載流量大的情況下，極大的節(jié)省了網(wǎng)絡(luò)帶寬資源的消耗，有明顯的性能優(yōu)勢；但是WebSocket協(xié)議相對于HTTP協(xié)議較復(fù)雜，不支持?jǐn)嗑€重連，有一定維護(hù)成本，因此實(shí)際應(yīng)用中需要基于WebSocket開源SDK進(jìn)行開發(fā)；適用于大型聊天App或大型多人在線游戲的場景。

SSE：屬于輕量級方案，主流瀏覽器都已經(jīng)支持，使用簡單，默認(rèn)支持?jǐn)嗑€重連，支持自定義事件類型；但是SSE長連接只支持從服務(wù)器向客戶端發(fā)數(shù)據(jù)，并且不支持二進(jìn)制傳輸（需要編碼后傳輸）。適用于服務(wù)器持續(xù)向客戶端發(fā)送數(shù)據(jù)的場景，如：實(shí)時(shí)股價(jià)流圖、在線音視頻播放、監(jiān)視器客戶端查看服務(wù)器實(shí)時(shí)信息等。

Part 04

結(jié)束語 

輪詢、WebSocket、SSE三種技術(shù)方案中該如何選擇？在消息推送時(shí)SSE似乎是我們解決問題的最終選擇；但是SSE對于大型游戲、聊天室時(shí)又有很多力不從心，不如WebSocket全面；而面對掃碼登錄等簡單場景時(shí)輪詢似乎更加簡單便捷。因此Web端即時(shí)通信方案并不能簡單的說古老的技術(shù)會被新技術(shù)替代，項(xiàng)目實(shí)施中我們要合理選擇，采用更簡單、更高效的方案來完成需求。