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ù)才能開始下一次請求）

原理（流）：

嚴(yán)格地說，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>// 原生jsvar source=new EventSource("地址");source.onmessage=function(e){//e參數(shù)就是事件參數(shù)// e.data 就表示服務(wù)器返回的數(shù)據(jù)};// jQuery$(source).on("message",function(e){//e參數(shù)是包裝之后的事件參數(shù)//var data=$(e).attr("data");var data=e.data;});//open 連接打開之后//message 服務(wù)器返回之后//error 服務(wù)器訪問失敗之后//var ele="<div></div>";//$(ele); //變成了一個對象</script>

服務(wù)器servlet為例

String data="data:數(shù)據(jù)內(nèi)容\n\n"; //返回給瀏覽器的數(shù)據(jù)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)容還不錯，歡迎將生活随笔推薦給好友。