作者：工邊頁(yè)字

https://juejin.cn/post/7325730345840066612

前言

在日常的開(kāi)發(fā)中，我們經(jīng)常能碰見(jiàn)服務(wù)端需要主動(dòng)推送給客戶(hù)端數(shù)據(jù)的業(yè)務(wù)場(chǎng)景，比如數(shù)據(jù)大屏的實(shí)時(shí)數(shù)據(jù)，比如消息中心的未讀消息，比如聊天功能等等。

本文主要介紹SSE的使用場(chǎng)景和如何使用SSE。

服務(wù)端向客戶(hù)端推送數(shù)據(jù)的實(shí)現(xiàn)方案有哪幾種？

我們常規(guī)實(shí)現(xiàn)這些需求的方案有以下三種：

1. 輪詢(xún)
2. websocket
3. SSE

輪詢(xún)簡(jiǎn)介

在很久很久以前，前端一般使用輪詢(xún)來(lái)進(jìn)行服務(wù)端向客戶(hù)端進(jìn)行消息的偽推送，為什么說(shuō)輪詢(xún)是偽推送？因?yàn)檩喸?xún)本質(zhì)上還是通過(guò)客戶(hù)端向服務(wù)端發(fā)起一個(gè)單項(xiàng)傳輸?shù)恼?qǐng)求，服務(wù)端對(duì)這個(gè)請(qǐng)求做出響應(yīng)而已。

通過(guò)不斷的請(qǐng)求來(lái)實(shí)現(xiàn)服務(wù)端向客戶(hù)端推送數(shù)據(jù)的錯(cuò)覺(jué)。并不是服務(wù)端主動(dòng)向客戶(hù)端推送數(shù)據(jù)。顯然，輪詢(xún)一定是上述三個(gè)方法里最下策的決定。

1. 首先輪詢(xún)需要不斷的發(fā)起請(qǐng)求，每一個(gè)請(qǐng)求都需要經(jīng)過(guò)http建立連接的流程（比如三次握手，四次揮手），是沒(méi)有必要的消耗。
2. 客戶(hù)端需要從頁(yè)面被打開(kāi)的那一刻開(kāi)始就一直處理請(qǐng)求。雖然每次輪詢(xún)的消耗不大，但是一直處理請(qǐng)求對(duì)于客戶(hù)端來(lái)說(shuō)一定是不友好的。
3. 瀏覽器請(qǐng)求并發(fā)是有限制的。比如Chrome 最大并發(fā)請(qǐng)求數(shù)目為 6，這個(gè)限制還有一個(gè)前提是針對(duì)同一域名的，超過(guò)這一限制的后續(xù)請(qǐng)求將會(huì)被阻塞。而輪詢(xún)意味著會(huì)有一個(gè)請(qǐng)求長(zhǎng)時(shí)間的占用并發(fā)名額。
4. 而如果輪詢(xún)時(shí)間較長(zhǎng)，可能又沒(méi)有辦法非常及時(shí)的獲取數(shù)據(jù)

websocket簡(jiǎn)介

websocket是一個(gè)雙向通訊的協(xié)議，他的優(yōu)點(diǎn)是，可以同時(shí)支持客戶(hù)端和服務(wù)端彼此相互進(jìn)行通訊。功能上很強(qiáng)大。

缺點(diǎn)也很明顯，websocket是一個(gè)新的協(xié)議，ws/wss。也就是說(shuō)，支持http協(xié)議的瀏覽器不一定支持ws協(xié)議。

相較于SSE來(lái)說(shuō)，websocket因?yàn)楣δ芨鼜?qiáng)大。結(jié)構(gòu)更復(fù)雜。所以相對(duì)比較重。

websocket對(duì)于各大瀏覽器的兼容性↓

?

SSE簡(jiǎn)介

sse是一個(gè)單向通訊的協(xié)議也是一個(gè)長(zhǎng)鏈接，它只能支持服務(wù)端主動(dòng)向客戶(hù)端推送數(shù)據(jù)，但是無(wú)法讓客戶(hù)端向服務(wù)端推送消息。

長(zhǎng)鏈接是一種HTTP/1.1的持久連接技術(shù)，它允許客戶(hù)端和服務(wù)器在一次TCP連接上進(jìn)行多個(gè)HTTP請(qǐng)求和響應(yīng)，而不必為每個(gè)請(qǐng)求/響應(yīng)建立和斷開(kāi)一個(gè)新的連接，長(zhǎng)連接有助于減少服務(wù)器的負(fù)載和提高性能。

SSE的優(yōu)點(diǎn)是，它是一個(gè)輕量級(jí)的協(xié)議，相對(duì)于websockte來(lái)說(shuō)，他的復(fù)雜度就沒(méi)有那么高，相對(duì)于客戶(hù)端的消耗也比較少。而且SSE使用的是http協(xié)議（websocket使用的是ws協(xié)議），也就是現(xiàn)有的服務(wù)端都支持SSE，無(wú)需像websocket一樣需要服務(wù)端提供額外的支持。

注意:IE大魔王不支持SSE

SSE對(duì)于各大瀏覽器的兼容性↓

websocket和SSE有什么區(qū)別？

輪詢(xún)

Websocket和SSE

我們一般的服務(wù)端和客戶(hù)端的通訊基本上使用這兩個(gè)方案。首先聲明:這兩個(gè)方案沒(méi)有絕對(duì)的好壞，只有在不同的業(yè)務(wù)場(chǎng)景下更好的選擇。

SSE的官方對(duì)于SSE和Websocket的評(píng)價(jià)是：

1. WebSocket是全雙工通道，可以雙向通信，功能更強(qiáng)；SSE是單向通道，只能服務(wù)器向?yàn)g覽器端發(fā)送。

2. WebSocket是一個(gè)新的協(xié)議，需要服務(wù)器端支持；SSE則是部署在HTTP協(xié)議之上的，現(xiàn)有的服務(wù)器軟件都支持。

3. SSE是一個(gè)輕量級(jí)協(xié)議，相對(duì)簡(jiǎn)單；WebSocket是一種較重的協(xié)議，相對(duì)復(fù)雜。

4. SSE默認(rèn)支持?jǐn)嗑€重連，WebSocket則需要額外部署。

5. SSE支持自定義發(fā)送的數(shù)據(jù)類(lèi)型。

Websocket和SSE分別適用于什么業(yè)務(wù)場(chǎng)景？

對(duì)于SSE來(lái)說(shuō)，它的優(yōu)點(diǎn)就是輕，而且對(duì)于服務(wù)端的支持度要更好。換言之，可以使用SSE完成的功能需求，沒(méi)有必要使用更重更復(fù)雜的websocket。

比如：數(shù)據(jù)大屏的實(shí)時(shí)數(shù)據(jù)，消息中心的消息推送等一系列只需要服務(wù)端單方面推送而不需要客戶(hù)端同時(shí)進(jìn)行反饋的需求，SSE就是不二之選。

對(duì)于Websocket來(lái)說(shuō)，他的優(yōu)點(diǎn)就是可以同時(shí)支持客戶(hù)端和服務(wù)端的雙向通訊。所適用的業(yè)務(wù)場(chǎng)景：最典型的就是聊天功能。這種服務(wù)端需要主動(dòng)向客戶(hù)端推送信息，并且客戶(hù)端也有向服務(wù)端推送消息的需求時(shí)，Websocket就是更好的選擇。

SSE有哪些主要的API?

建立一個(gè)SSE鏈接 ：var source = new EventSource(url);

SSE連接狀態(tài)

• 0，相當(dāng)于常量EventSource.CONNECTING，表示連接還未建立，或者連接斷線。

• 1，相當(dāng)于常量EventSource.OPEN，表示連接已經(jīng)建立，可以接受數(shù)據(jù)。

• 2，相當(dāng)于常量EventSource.CLOSED，表示連接已斷，且不會(huì)重連。

SSE相關(guān)事件

• open事件(連接一旦建立，就會(huì)觸發(fā)open事件，可以定義相應(yīng)的回調(diào)函數(shù))

• message事件(收到數(shù)據(jù)就會(huì)觸發(fā)message事件)

• error事件(如果發(fā)生通信錯(cuò)誤（比如連接中斷），就會(huì)觸發(fā)error事件)

數(shù)據(jù)格式

Content-Type: text/event-stream //文本返回格式Cache-Control: no-cache  //不要緩存Connection: keep-alive //長(zhǎng)鏈接標(biāo)識(shí)

SSE相關(guān)文檔：.w3cschool.cn/nwfchn/wpi3cozt.html

顯然，如果直接看api介紹不論是看這里還是看官網(wǎng)，大部分同學(xué)都是比較懵圈的狀態(tài)，那么我們寫(xiě)個(gè)demo來(lái)看一下?

如何實(shí)操一個(gè)SSE鏈接？Demo↓

這里Demo前端使用的就是最基本的html靜態(tài)頁(yè)面連接，沒(méi)有使用任何框架。后端選用語(yǔ)言是node，框架是Express。

理論上，把這兩段端代碼復(fù)制過(guò)去跑起來(lái)就直接可以用了。

1. 第一步，建立一個(gè)index.html文件，然后復(fù)制前端代碼Demo到index.html文件中，打開(kāi)文件

2. 第二步，進(jìn)入一個(gè)新的文件夾，建立一個(gè)index.js文件，然后將后端Demo代碼復(fù)制進(jìn)去，然后在該文件夾下執(zhí)行

npm init          //初始化npm       npm i express     //下載node express框架node index        //啟動(dòng)服務(wù)

在這一層文件夾下執(zhí)行命令。

完成以上操作就可以把項(xiàng)目跑起來(lái)了。

前端代碼Demo

<!DOCTYPE html><html lang="en"><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>Document</title></head><body>    <ul id="ul">            </ul></body><script>
//生成li元素function createLi(data){    let li = document.createElement("li");    li.innerHTML = String(data.message);    return li;}    //判斷當(dāng)前瀏覽器是否支持SSE  let source = '' if (!!window.EventSource) {    source = new EventSource('http://localhost:8088/sse/'); }else{    throw new Error("當(dāng)前瀏覽器不支持SSE") }
 //對(duì)于建立鏈接的監(jiān)聽(tīng) source.onopen = function(event) {   console.log(source.readyState);   console.log("長(zhǎng)連接打開(kāi)"); };
 //對(duì)服務(wù)端消息的監(jiān)聽(tīng) source.onmessage = function(event) {   console.log(JSON.parse(event.data));   console.log("收到長(zhǎng)連接信息");   let li = createLi(JSON.parse(event.data));   document.getElementById("ul").appendChild(li) };
 //對(duì)斷開(kāi)鏈接的監(jiān)聽(tīng) source.onerror = function(event) {   console.log(source.readyState);   console.log("長(zhǎng)連接中斷"); };</script></html>

后端代碼Demo（node的express）

const express = require('express'); //引用框架const app = express(); //創(chuàng)建服務(wù)const port = 8088; //項(xiàng)目啟動(dòng)端口
//設(shè)置跨域訪問(wèn)app.all("*", function(req, res, next) {  //設(shè)置允許跨域的域名，*代表允許任意域名跨域  res.header("Access-Control-Allow-Origin", '*');  //允許的header類(lèi)型  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With");  //跨域允許的請(qǐng)求方式   res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");  // 可以帶cookies  res.header("Access-Control-Allow-Credentials", true);  if (req.method == 'OPTIONS') {    res.sendStatus(200);  } else {    next();  }})
app.get("/sse",(req,res) => {    res.set({        'Content-Type': 'text/event-stream', //設(shè)定數(shù)據(jù)類(lèi)型        'Cache-Control': 'no-cache',// 長(zhǎng)鏈接拒絕緩存        'Connection': 'keep-alive' //設(shè)置長(zhǎng)鏈接      });
      console.log("進(jìn)入到長(zhǎng)連接了")      //持續(xù)返回?cái)?shù)據(jù)      setInterval(() => {        console.log("正在持續(xù)返回?cái)?shù)據(jù)中ing")        const data = {          message: `Current time is ${new Date().toLocaleTimeString()}`        };        res.write(`data: ${JSON.stringify(data)}\n\n`);      }, 1000);  })
//創(chuàng)建項(xiàng)目app.listen(port, () => {  console.log(`項(xiàng)目啟動(dòng)成功-http://localhost:${port}`)})

效果

總結(jié)

1. SSE比websocket更輕

2. SSE是基于http/https協(xié)議的

3. websocket是一個(gè)新的協(xié)議，ws/wss協(xié)議

4. 如果只需要服務(wù)端向客戶(hù)端推送消息，推薦使用SSE

5. 如果需要服務(wù)端和客戶(hù)端雙向推送，請(qǐng)選擇websocket

6. 不論是SSE還是websocket，對(duì)于瀏覽器的兼容性都不錯(cuò)

7. 輪詢(xún)是下策，很占用客戶(hù)端資源，不建議使用。（不過(guò)偷懶的時(shí)候他確實(shí)方便）

8. IE不支持SSE

   
   

閱讀原文：原文鏈接