在日常的開發(fā)中，我們經(jīng)常能碰見服務端需要主動推送給客戶端數(shù)據(jù)的業(yè)務場景，比如_數(shù)據(jù)大屏的實時數(shù)據(jù)_，比如_消息中心的未讀消息_，比如_聊天功能_等等。
本文主要介紹SSE的使用場景和如何使用SSE。
服務端向客戶端推送數(shù)據(jù)的實現(xiàn)方案有哪幾種？
我們常規(guī)實現(xiàn)這些需求的方案有以下三種
-
輪詢
-
websocket
-
SSE
輪詢簡介
在很久很久以前，前端一般使用輪詢來進行服務端向客戶端進行消息的_偽推送_，為什么說輪詢是偽推送？因為_輪詢本質(zhì)上還是通過客戶端向服務端發(fā)起一個單項傳輸?shù)恼埱骭，服務端對這個請求做出響應而已。通過不斷的請求來實現(xiàn)服務端向客戶端推送數(shù)據(jù)的錯覺。并不是服務端主動向客戶端推送數(shù)據(jù)。顯然，輪詢一定是上述三個方法里最下策的決定。
輪詢的缺點：
-
首先輪詢需要不斷的發(fā)起請求，_每一個請求都需要經(jīng)過http建立連接的流程_（比如三次握手，四次揮手），是沒有必要的消耗。
-
客戶端需要從頁面被打開的那一刻開始就_一直處理請求_。雖然每次輪詢的消耗不大，但是一直處理請求對于客戶端來說一定是不友好的。
-
_瀏覽器請求并發(fā)是有限制的_。比如Chrome 最大并發(fā)請求數(shù)目為 6，這個限制還有一個前提是針對同一域名的，超過這一限制的后續(xù)請求將會被阻塞。_而輪詢意味著會有一個請求長時間的占用并發(fā)名額_。
-
而如果輪詢時間較長，可能又_沒有辦法非常及時的獲取數(shù)據(jù)_
websocket簡介
websocket是一個雙向通訊的協(xié)議，他的優(yōu)點是，可以同時支持客戶端和服務端彼此相互進行通訊。功能上很強大。
缺點也很明顯，websocket是一個新的協(xié)議，ws/wss。也就是說，支持http協(xié)議的瀏覽器不一定支持ws協(xié)議。
相較于SSE來說，websocket因為功能更強大。結(jié)構(gòu)更復雜。所以相對比較_重_。
websocket對于各大瀏覽器的兼容性↓
SSE簡介
sse是一個單向通訊的協(xié)議也是一個_長鏈接_，它只能支持服務端主動向客戶端推送數(shù)據(jù)，但是無法讓客戶端向服務端推送消息。
長鏈接是一種HTTP/1.1的持久連接技術(shù)，它允許客戶端和服務器在一次TCP連接上進行多個HTTP請求和響應，而不必為每個請求/響應建立和斷開一個新的連接。長連接有助于減少服務器的負載和提高性能。
SSE的優(yōu)點是，它是一個輕量級的協(xié)議，相對于websockte來說，他的復雜度就沒有那么高，_相對于客戶端的消耗也比較少_。而且_SSE使用的是http協(xié)議_（websocket使用的是ws協(xié)議），也就是現(xiàn)有的服務端都支持SSE，無需像websocket一樣需要服務端提供額外的支持。
注意:IE大魔王不支持SSE
SSE對于各大瀏覽器的兼容性↓
注意哦，上圖是SSE對于瀏覽器的兼容不是對于服務端的兼容。
websocket和SSE有什么區(qū)別？
輪詢
對于當前計算機的發(fā)展來說，幾乎很少出現(xiàn)同時不支持websocket和sse的情況，所以輪詢是在極端情況下瀏覽器實在是不支持websocket和see的下策。
Websocket和SSE
我們一般的服務端和客戶端的通訊基本上使用這兩個方案。首先聲明:這兩個方案沒有絕對的好壞，只有在不同的業(yè)務場景下更好的選擇。
SSE的官方對于SSE和Websocket的評價是
-
WebSocket是全雙工通道，可以雙向通信，功能更強；SSE是單向通道，只能服務器向瀏覽器端發(fā)送。
-
WebSocket是一個新的協(xié)議，需要服務器端支持；SSE則是部署在HTTP協(xié)議之上的，現(xiàn)有的服務器軟件都支持。
-
SSE是一個輕量級協(xié)議，相對簡單；WebSocket是一種較重的協(xié)議，相對復雜。
-
SSE默認支持斷線重連，WebSocket則需要額外部署。
-
SSE支持自定義發(fā)送的數(shù)據(jù)類型。
Websocket和SSE分別適用于什么業(yè)務場景？
對于SSE來說，它的_優(yōu)點就是輕_，而且對于服務端的支持度要更好。換言之，_可以使用SSE完成的功能需求，沒有必要使用更重更復雜的websocket。_
比如：數(shù)據(jù)大屏的實時數(shù)據(jù)，消息中心的消息推送等一系列只需要服務端單方面推送而_不需要客戶端同時進行反饋的需求_，SSE就是不二之選。
對于Websocket來說，_他的優(yōu)點就是可以同時支持客戶端和服務端的雙向通訊_。所適用的業(yè)務場景：最典型的就是_聊天功能_。這種服務端需要主動向客戶端推送信息，并且客戶端也有向服務端推送消息的需求時，Websocket就是更好的選擇。
SSE有哪些主要的API?
建立一個SSE鏈接?：var?source?=?new?EventSource(url);
SSE連接狀態(tài)
source.readyState
-
0，相當于常量EventSource.CONNECTING，表示連接還未建立，或者連接斷線。
-
1，相當于常量EventSource.OPEN，表示連接已經(jīng)建立，可以接受數(shù)據(jù)。
-
2，相當于常量EventSource.CLOSED，表示連接已斷，且不會重連。
SSE相關(guān)事件
-
open事件(連接一旦建立，就會觸發(fā)open事件，可以定義相應的回調(diào)函數(shù))
-
message事件(收到數(shù)據(jù)就會觸發(fā)message事件)
-
error事件(如果發(fā)生通信錯誤（比如連接中斷），就會觸發(fā)error事件)
數(shù)據(jù)格式
Content-Type:?text/event-stream?//文本返回格式
Cache-Control:?no-cache??//不要緩存
Connection:?keep-alive?//長鏈接標識
SSE：相關(guān)文檔，文檔入口文檔入口文檔入口文檔入口[1]
顯然，如果直接看api介紹不論是看這里還是看官網(wǎng)，大部分同學都是比較懵圈的狀態(tài)，_那么我們寫個demo來看一下?
demo請看下方
我更建議您先把Demo跑起來，然后在看看上面這個w3cschool的SSE文檔[2]。兩個配合一起看，會更方便理解些。
如何實操一個SSE鏈接？Demo↓
這里Demo前端使用的就是最基本的html靜態(tài)頁面連接，沒有使用任何框架。后端選用語言是node，框架是Express。
理論上，把這兩段端代碼復制過去跑起來就直接可以用了。
-
第一步，建立一個index.html文件，然后復制前端代碼Demo到index.html文件中，打開文件
-
第二步，進入一個新的文件夾，建立一個index.js文件，然后將后端Demo代碼復制進去，然后在該文件夾下執(zhí)行
npm?init??????????//初始化npm???????
npm?i?express?????//下載node?express框架
node?index????????//啟動服務
在這一層文件夾下執(zhí)行命令。
完成以上操作就可以把項目跑起來了
前端代碼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;
}
????
//判斷當前瀏覽器是否支持SSE
??let?source?=?''
?if?(!!window.EventSource)?{
????source?=?new?EventSource('http://localhost:8088/sse/');
?}else{
????throw?new?Error("當前瀏覽器不支持SSE")
?}
?//對于建立鏈接的監(jiān)聽
?source.onopen?=?function(event)?{
???console.log(source.readyState);
???console.log("長連接打開");
?};
?//對服務端消息的監(jiān)聽
?source.onmessage?=?function(event)?{
???console.log(JSON.parse(event.data));
???console.log("收到長連接信息");
???let?li?=?createLi(JSON.parse(event.data));
???document.getElementById("ul").appendChild(li)
?};
?//對斷開鏈接的監(jiān)聽
?source.onerror?=?function(event)?{
???console.log(source.readyState);
???console.log("長連接中斷");
?};
</script>
</html>
后端代碼Demo（node的express）
const?express?=?require('express');?//引用框架
const?app?=?express();?//創(chuàng)建服務
const?port?=?8088;?//項目啟動端口
//設(shè)置跨域訪問
app.all("*",?function(req,?res,?next)?{
?//設(shè)置允許跨域的域名，*代表允許任意域名跨域
?res.header("Access-Control-Allow-Origin",?'*');
?//允許的header類型
?res.header("Access-Control-Allow-Headers",?"Content-Type,?Authorization,?X-Requested-With");
?//跨域允許的請求方式?
?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ù)類型
????????'Cache-Control':?'no-cache',//?長鏈接拒絕緩存
????????'Connection':?'keep-alive'?//設(shè)置長鏈接
??????});
??????console.log("進入到長連接了")
??????//持續(xù)返回數(shù)據(jù)
??????setInterval(()?=>?{
????????console.log("正在持續(xù)返回數(shù)據(jù)中ing")
????????const?data?=?{
??????????message:?`Current?time?is?${new?Date().toLocaleTimeString()}`
????????};
????????res.write(`data:?${JSON.stringify(data)}\n\n`);
??????},?1000);??
})
//創(chuàng)建項目
app.listen(port,?()?=>?{
?console.log(`項目啟動成功-http://localhost:${port}`)
})
效果
文章來源：http://www.zghlxwxcb.cn/news/detail-841356.html
結(jié)語
加油整起來，有什么好的建議，可以下方評論留言文章來源地址http://www.zghlxwxcb.cn/news/detail-841356.html
到了這里，關(guān)于如果讓你實現(xiàn)實時消息推送你會用什么技術(shù)？輪詢、websocket還是sse的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
