1. sse概述

概念：

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

輪詢:

頁面使用js的定時器，定時發送請求查詢最新數據 使用js將最新數據加載至頁面 每發送一次數據，需要建立新的連接 時間間隔由客戶端決定 優點：不需要刷新頁面、實時更新 缺點：定時器時間間隔間隔太長：數據不及時間隔太短：服務器壓力太大

SSE基于長輪詢：

建立一次連接即可 連接斷開會自動重連（需要保證客戶端沒關閉） 只能從服務器發送數據到客戶端 SSE實現比較簡單 時間間隔由服務器決定

SSE流程：

客戶端發送消息到服務器 服務器發送數據到客戶端（業務數據、間隔時間） 存在阻塞（接收到服務器發過來的數據才能開始下一次請求）

原理（流）：

嚴格地說，HTTP 協議無法做到服務器主動推送信息。 但是，有一種變通方法，就是服務器向客戶端聲明， 接下來要發送的是流信息（streaming）。 也就是說，發送的不是一次性的數據包，而是一個數據流， 會連續不斷地發送過來。這時，客戶端不會關閉連接， 會一直等著服務器發過來的新的數據流，視頻播放就是這樣的例子。 本質上，這種通信就是以流信息的方式，完成一次用時很長的下載。 SSE 就是利用這種機制，使用流信息向瀏覽器推送信息。 它基于 HTTP 協議，目前除了 IE/Edge，其他瀏覽器都支持

2. sse代碼實現

js

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

服務器servlet為例

String data="data:數據內容\n\n"; //返回給瀏覽器的數據String retry="retry:毫秒數\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. 總結

取代了計時器不斷訪問服務器，由服務器控制訪問的時間。 sse的取代品websocket。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。