Server-Sent Events（SSE）是HTML5中用於實(shí)現(xiàn)服務(wù)器向客戶端高效單向通信的技術(shù)，適合通知推送和數(shù)據(jù)更新。它基於HTTP協(xié)議，支持自動(dòng)重連，消息格式簡(jiǎn)單，前端通過EventSource監(jiān)聽事件，後端需設(shè)置text/event-stream類型並保持連接，常見問題包括連接超時(shí)、消息丟失和並發(fā)限制，適用於輕量實(shí)時(shí)場(chǎng)景。

實(shí)時(shí)通信在現(xiàn)代網(wǎng)頁應(yīng)用中越來越重要，而HTML5 的Server-Sent Events（SSE）提供了一個(gè)輕量、高效的解決方案。相比WebSocket，它更適合服務(wù)器向客戶端的單向通信場(chǎng)景，比如通知推送、數(shù)據(jù)更新等。

什麼是Server-Sent Events？

Server-Sent Events 是HTML5 中的一部分，允許服務(wù)器通過HTTP 長(zhǎng)連接將數(shù)據(jù)推送給瀏覽器。與傳統(tǒng)的輪詢方式不同，SSE 使用持久連接，讓服務(wù)器能主動(dòng)發(fā)送更新，減少不必要的請(qǐng)求和延遲。

主要特點(diǎn)包括：

• 基於標(biāo)準(zhǔn)HTTP 協(xié)議，不需要特殊服務(wù)器支持
• 自動(dòng)重連機(jī)制，斷開後會(huì)嘗試重新建立連接
• 消息格式簡(jiǎn)單明了，易於解析
• 只支持服務(wù)器到客戶端的單向通信

如何使用SSE：前端部分

前端使用JavaScript 創(chuàng)建EventSource對(duì)象來監(jiān)聽服務(wù)器事件?；居梅ㄈ缦拢?/p>

 const eventSource = new EventSource('your-endpoint-url');

eventSource.onmessage = function(event) {
    console.log('收到消息:', event.data);
};

eventSource.onerror = function(err) {
    console.error('發(fā)生錯(cuò)誤:', err);
};

你還可以監(jiān)聽特定事件類型，比如：

 eventSource.addEventListener('customEvent', function(event) {
    const data = JSON.parse(event.data);
    updateUI(data);
});

需要注意幾點(diǎn)：

• 確保URL 支持跨域時(shí)正確設(shè)置CORS 頭
• 瀏覽器兼容性較好，主流現(xiàn)代瀏覽器都支持
• 不要忘記處理錯(cuò)誤和連接中斷的情況

後端如何實(shí)現(xiàn)SSE 接口

後端需要返回一個(gè)保持打開的響應(yīng)流，並設(shè)置正確的MIME 類型為text/event-stream 。不同語言有不同的實(shí)現(xiàn)方式，但核心思路一致。

以Node.js Express 為例：

 app.get('/sse', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    // 發(fā)送一條消息res.write(`data: ${JSON.stringify({ message: 'Hello from server' })}\n\n`);

    // 可以定時(shí)發(fā)送更新const interval = setInterval(() => {
        res.write(`data: ${JSON.stringify(getLatestData())}\n\n`);
    }, 5000);

    req.on('close', () => {
        clearInterval(interval);
        res.end();
    });
});

關(guān)鍵點(diǎn)：

• 設(shè)置正確的響應(yīng)頭
• 消息格式必須符合規(guī)範(fàn)： data: ... \n\n
• 保持連接開放，直到客戶端關(guān)閉或出錯(cuò)

常見問題與優(yōu)化建議

雖然SSE 簡(jiǎn)單易用，但在實(shí)際部署中仍有一些細(xì)節(jié)需要注意：

• 連接超時(shí)：某些代理或負(fù)載均衡器可能會(huì)中斷長(zhǎng)時(shí)間連接，可以定期發(fā)送註釋行（如:\n\n ）維持連接。
• 消息順序與丟失：SSE 不保證消息可靠傳遞，對(duì)要求嚴(yán)格順序和不丟消息的場(chǎng)景要考慮額外機(jī)制。
• 並發(fā)限制：瀏覽器通常對(duì)同一域名下的EventSource 數(shù)量有限制，注意合理復(fù)用。
• 性能考量：每個(gè)連接都會(huì)佔(zhàn)用一定資源，高並發(fā)下需評(píng)估服務(wù)器承載能力。

如果你只是想做簡(jiǎn)單的狀態(tài)更新或通知推送，SSE 是個(gè)不錯(cuò)的選擇；如果需要雙向通信，WebSocket 更合適。

基本上就這些。掌握好SSE 的使用，可以讓你的應(yīng)用在無需複雜協(xié)議的情況下實(shí)現(xiàn)流暢的實(shí)時(shí)更新體驗(yàn)。

以上是使用HTML5服務(wù)器量事件實(shí)施實(shí)時(shí)通信。的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！