SSE通過HTTP啟用實時的單向服務(wù)器對客戶更新；使用JavaScript中的EventSource連接，使用OnMessage處理消息，將服務(wù)器響應(yīng)類型設(shè)置為文本/事件流，格式數(shù)據(jù)，帶有“數(shù)據(jù)：”和“ \ n \ n”的格式數(shù)據(jù)，并可選地包含用于重新連接的事件ID。

HTML5中的服務(wù)器范圍事件（SSE）允許網(wǎng)頁從服務(wù)器中獲取自動更新而無需進(jìn)行輪詢。當(dāng)您需要實時數(shù)據(jù)（例如實時供稿，通知或股票）等實時數(shù)據(jù)時，這很有用。與WebSocket不同，SSE是單向的 - DATA從服務(wù)器到客戶端的流動 - 它可以通過標(biāo)準(zhǔn)HTTP進(jìn)行工作。

在JavaScript中啟用SSE

要使用SSE，請在JavaScript代碼中創(chuàng)建Eventsource對象。傳遞發(fā)送事件數(shù)據(jù)的服務(wù)器端點(diǎn)的URL。

例子：

 <code>if (typeof EventSource !== "undefined") { const source = new EventSource("/sse-updates"); source.onmessage = function(event) { document.getElementById("result").innerHTML = event.data "<br>"; }; source.onerror = function() { console.log("EventSource failed."); }; } else { document.getElementById("result").innerHTML = "SSE not supported"; }</code>設(shè)置服務(wù)器響應(yīng)<code>if (typeof EventSource !== "undefined") { const source = new EventSource("/sse-updates"); source.onmessage = function(event) { document.getElementById("result").innerHTML = event.data "<br>"; }; source.onerror = function() { console.log("EventSource failed."); }; } else { document.getElementById("result").innerHTML = "SSE not supported"; }</code><h3></h3><p>服務(wù)器必須使用特定格式發(fā)送數(shù)據(jù)并設(shè)置正確的MIME類型：<strong>文本/事件流</strong>。</p><font color="#000000"><ul>
<li>響應(yīng)內(nèi)容類型應(yīng)為<strong>文本/事件流</strong>
</li>
<li>數(shù)據(jù)行以<strong>數(shù)據(jù)開頭：</strong>隨后是消息</li>
<li>結(jié)束每個消息，每個消息都有兩個newline字符（\ n \ n）</li>
<li>可選：inclage <strong>ID：</strong>用于重新連接跟蹤或<strong>重試：</strong>用于重試間隔</li>
</ul></font><p>示例服務(wù)器響應(yīng)（node.js/express）：</p><pre class="brush:php;toolbar:false"> <code>app.get('/sse-updates', (req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); setInterval(() => { res.write(`data: ${new Date().toISOString()}\n\n`); }, 1000); });</code>處理連接狀態(tài)并重新連接<code>app.get('/sse-updates', (req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); setInterval(() => { res.write(`data: ${new Date().toISOString()}\n\n`); }, 1000); });</code><h3></h3><p> SSE自動嘗試重新連接連接是否下降。瀏覽器使用最后一個看到的事件ID恢復(fù)其關(guān)閉的位置 - 如果服務(wù)器支持它。</p><font color="#000000"><ul>
<li>發(fā)送一個<strong>ID：</strong>每個事件的字段，以便服務(wù)器可以跟蹤位置</li>
<li>使用<strong>source.close（）</strong>手動停止偵聽</li>
<li>監(jiān)視器readystate：0（連接），1（open），2（閉合）</li>
</ul></font><p>帶有事件ID的示例：</p><pre class="brush:php;toolbar:false">基本上，只需使用EventSource設(shè)置客戶端，將服務(wù)器配置為正確格式的事件，然后在到達(dá)時處理消息。它很簡單，建在HTTP上，并得到廣泛支持。 <code>res.write(`id: ${eventId}\ndata: Hello\n\n`);</code><p></p>

以上是如何在HTML5中使用服務(wù)器量事件（SSE）？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！