Server-Sent Events（SSE）是一種基於HTTP的HTML5標(biāo)準(zhǔn)API，允許服務(wù)器向客戶端單向推送實(shí)時(shí)數(shù)據(jù)。 1. 它通過EventSource對象建立持久連接，服務(wù)器以text/event-stream格式發(fā)送數(shù)據(jù)，每次推送觸發(fā)客戶端事件處理；2. 使用簡單，前端只需監(jiān)聽message事件或特定事件類型即可接收並處理數(shù)據(jù)；3. 後端需設(shè)置Content-Type為text/event-stream，並持續(xù)輸出符合格式的消息；4. 常見註意事項(xiàng)包括解決跨域問題、控制推送頻率、測試瀏覽器兼容性等。相比WebSocket，SSE更輕量，適用於如通知、股票更新等僅需服務(wù)器推送的場景。

Server-Sent Events (SSE) 是一種讓服務(wù)器向?yàn)g覽器推送實(shí)時(shí)更新的技術(shù)。它不像傳統(tǒng)的請求-響應(yīng)模式那樣需要瀏覽器反復(fù)輪詢，而是建立一個(gè)持久連接，服務(wù)器可以隨時(shí)發(fā)送數(shù)據(jù)給客戶端。相比WebSocket，SSE 更輕量、更容易實(shí)現(xiàn)，特別適合只需要服務(wù)器單向推送的場景，比如實(shí)時(shí)通知、股票價(jià)格更新、日誌信息等。

什麼是Server-Sent Events？

簡單來說，SSE 是HTML5 提供的一種標(biāo)準(zhǔn)API，允許網(wǎng)頁從服務(wù)器接收自動(dòng)更新。它是基於HTTP 的，所以不需要特殊的協(xié)議或服務(wù)器設(shè)置。和WebSocket 不同的是，SSE 只支持服務(wù)器到客戶端的單向通信，也就是說客戶端只能監(jiān)聽，不能主動(dòng)發(fā)消息。

SSE 使用EventSource對象來創(chuàng)建連接，並通過監(jiān)聽message事件來接收數(shù)據(jù)。服務(wù)器返回的數(shù)據(jù)必須是特定格式（ text/event-stream ），並且每次有新數(shù)據(jù)時(shí)都會(huì)觸發(fā)一次事件。

如何在HTML 中使用SSE？

要使用SSE，只需幾行JavaScript 就可以搞定：

 <script>
const eventSource = new EventSource("your-server-endpoint");

eventSource.onmessage = function(event) {
    console.log("收到消息：", event.data);
};
</script>

這段代碼做了三件事：

• 創(chuàng)建了一個(gè)指向指定URL 的EventSource實(shí)例。
• 監(jiān)聽了onmessage事件，當(dāng)服務(wù)器發(fā)送數(shù)據(jù)過來時(shí)就會(huì)觸發(fā)。
• 打印出接收到的數(shù)據(jù)。

如果服務(wù)器發(fā)送的消息帶有事件類型（比如notification ），你還可以用.addEventListener()來監(jiān)聽特定事件：

 eventSource.addEventListener('notification', function(event) {
    document.getElementById('notifications').innerText = event.data;
});

這樣你可以根據(jù)不同類型的事件做不同的處理。

後端怎麼配合？

後端要做的主要是兩點(diǎn)：

1. 設(shè)置正確的響應(yīng)頭為Content-Type: text/event-stream 。
2. 持續(xù)輸出符合SSE 格式的消息。

比如一個(gè)簡單的Node.js Express 接口可能是這樣的：

 app.get('/stream', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    setInterval(() => {
        res.write(`data: ${new Date()}\n\n`);
    }, 1000);
});

這段代碼每秒會(huì)往客戶端發(fā)送當(dāng)前時(shí)間。注意\n\n表示一條完整的消息結(jié)束。

不同語言和框架的寫法略有差異，但核心邏輯都是一樣的：保持連接打開，持續(xù)發(fā)送以data:開頭的內(nèi)容。

常見問題與註意事項(xiàng)

• 跨域問題：如果前端和後端不在同一個(gè)域名下，記得設(shè)置CORS，否則可能連不上。
• 連接斷開重連：SSE 默認(rèn)會(huì)在連接斷開後自動(dòng)嘗試重連，但你可以通過eventSource.close()主動(dòng)關(guān)閉。
• 性能考慮：雖然SSE 是長連接，但對服務(wù)器資源消耗不大，不過也要注意控制發(fā)送頻率，避免頻繁推送造成壓力。
• 瀏覽器兼容性：現(xiàn)代瀏覽器基本都支持SSE，但在移動(dòng)端和老舊設(shè)備上要注意測試。

基本上就這些。 SSE 雖然功能不如WebSocket 強(qiáng)大，但在很多實(shí)際應(yīng)用場景中已經(jīng)足夠用了，而且實(shí)現(xiàn)起來更簡單，維護(hù)成本更低。

以上是什麼是服務(wù)器範(fàn)圍的事件（SSE），您如何將其與HTML一起使用？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！