1. sse概述

概念：

H5支持使用JS腳本不間斷的訪問(wèn)服務(wù)器(推送)

輪詢:

頁(yè)面使用js的定時(shí)器，定時(shí)發(fā)送請(qǐng)求查詢最新數(shù)據(jù) 使用js將最新數(shù)據(jù)加載至頁(yè)面 每發(fā)送一次數(shù)據(jù)，需要建立新的連接 時(shí)間間隔由客戶端決定 優(yōu)點(diǎn)：不需要刷新頁(yè)面、實(shí)時(shí)更新 缺點(diǎn)：定時(shí)器時(shí)間間隔間隔太長(zhǎng)：數(shù)據(jù)不及時(shí)間隔太短：服務(wù)器壓力太大

SSE基于長(zhǎng)輪詢：

建立一次連接即可 連接斷開會(huì)自動(dòng)重連（需要保證客戶端沒(méi)關(guān)閉） 只能從服務(wù)器發(fā)送數(shù)據(jù)到客戶端 SSE實(shí)現(xiàn)比較簡(jiǎn)單 時(shí)間間隔由服務(wù)器決定

SSE流程：

客戶端發(fā)送消息到服務(wù)器 服務(wù)器發(fā)送數(shù)據(jù)到客戶端（業(yè)務(wù)數(shù)據(jù)、間隔時(shí)間） 存在阻塞（接收到服務(wù)器發(fā)過(guò)來(lái)的數(shù)據(jù)才能開始下一次請(qǐng)求）

原理（流）：

嚴(yán)格地說(shuō)，HTTP 協(xié)議無(wú)法做到服務(wù)器主動(dòng)推送信息。 但是，有一種變通方法，就是服務(wù)器向客戶端聲明， 接下來(lái)要發(fā)送的是流信息（streaming）。 也就是說(shuō)，發(fā)送的不是一次性的數(shù)據(jù)包，而是一個(gè)數(shù)據(jù)流， 會(huì)連續(xù)不斷地發(fā)送過(guò)來(lái)。這時(shí)，客戶端不會(huì)關(guān)閉連接， 會(huì)一直等著服務(wù)器發(fā)過(guò)來(lái)的新的數(shù)據(jù)流，視頻播放就是這樣的例子。 本質(zhì)上，這種通信就是以流信息的方式，完成一次用時(shí)很長(zhǎng)的下載。 SSE 就是利用這種機(jī)制，使用流信息向?yàn)g覽器推送信息。 它基于 HTTP 協(xié)議，目前除了 IE/Edge，其他瀏覽器都支持

2. sse代碼實(shí)現(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ù)器訪問(wèn)失敗之后//var ele="<div></div>";//$(ele); //變成了一個(gè)對(duì)象</script>

服務(wù)器servlet為例

String data="data:數(shù)據(jù)內(nèi)容\n\n"; //返回給瀏覽器的數(shù)據(jù)String retry="retry:毫秒數(shù)\n\n"; //指定下次嘗試的間隔時(shí)間//可選，不寫表示沒(méi)有間隔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é)

取代了計(jì)時(shí)器不斷訪問(wèn)服務(wù)器，由服務(wù)器控制訪問(wèn)的時(shí)間。 sse的取代品websocket。

總結(jié)

以上是生活随笔為你收集整理的h5 server send event(sse)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。