生活随笔
收集整理的這篇文章主要介紹了
h5 server send event(sse)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. sse概述
概念：
H5支持使用JS腳本不間斷的訪問服務(wù)器(推送)
輪詢:
頁面使用js的定時器，定時發(fā)送請求查詢最新數(shù)據(jù)
使用js將最新數(shù)據(jù)加載至頁面
每發(fā)送一次數(shù)據(jù)，需要建立新的連接
時間間隔由客戶端決定
優(yōu)點：不需要刷新頁面、實時更新
缺點：定時器時間間隔間隔太長：數(shù)據(jù)不及時間隔太短：服務(wù)器壓力太大
SSE基于長輪詢：
建立一次連接即可
連接斷開會自動重連（需要保證客戶端沒關(guān)閉）
只能從服務(wù)器發(fā)送數(shù)據(jù)到客戶端
SSE實現(xiàn)比較簡單
時間間隔由服務(wù)器決定
SSE流程：
客戶端發(fā)送消息到服務(wù)器
服務(wù)器發(fā)送數(shù)據(jù)到客戶端（業(yè)務(wù)數(shù)據(jù)、間隔時間）
存在阻塞（接收到服務(wù)器發(fā)過來的數(shù)據(jù)才能開始下一次請求）
原理（流）：
嚴格地說，HTTP 協(xié)議無法做到服務(wù)器主動推送信息。
但是，有一種變通方法，就是服務(wù)器向客戶端聲明，
接下來要發(fā)送的是流信息（streaming）。
也就是說，發(fā)送的不是一次性的數(shù)據(jù)包，而是一個數(shù)據(jù)流，
會連續(xù)不斷地發(fā)送過來。這時，客戶端不會關(guān)閉連接，
會一直等著服務(wù)器發(fā)過來的新的數(shù)據(jù)流，視頻播放就是這樣的例子。
本質(zhì)上，這種通信就是以流信息的方式，完成一次用時很長的下載。
SSE 就是利用這種機制，使用流信息向瀏覽器推送信息。
它基于 HTTP 協(xié)議，目前除了 IE/Edge，其他瀏覽器都支持
2. sse代碼實現(xiàn)
js
<script
>var source
=new EventSource("地址");source
.onmessage=function(e
){};$(source
).on("message",function(e
){var data
=e
.data
;});</script
>
服務(wù)器servlet為例
String data
="data:數(shù)據(jù)內(nèi)容\n\n"; String retry
="retry:毫秒數(shù)\n\n"; response
.setContentType("text/event-stream");response
.setCharacterEncoding("utf-8");OutputStream out
=response
.getOutputStream();out
.write(data
.getBytes("utf-8"));out
.write(retry
.getBytes("utf-8"));out
.close();
3. 總結(jié)
取代了計時器不斷訪問服務(wù)器，由服務(wù)器控制訪問的時間。
sse的取代品websocket。
總結(jié)
以上是生活随笔為你收集整理的h5 server send event(sse)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
