HTML5的服務器EventSource(server-sent event)發送事件

時間 2019-11-06

標籤 html5 html 服務器 eventsource server sent event 發送事件欄目 HTML5 简体版

原文原文鏈接

參考資料：php

HTML5的服務器(server-sent event)發送事件有什麼應用場景？html

W3school HTML 5 服務器發送事件前端

『後臺消息推送功能』，前端除了輪詢、scoket、第三方服務（如wilddog）外，暫時沒好方案。剛剛還真發現個新的了：HTML5的服務器 EventSource (server-sent event)發送事件html5

整體體驗就是簡化版的socket。並不能代替 socket ，適應場景是客戶端只須要監聽，不須要發送消息給服務端的狀況。git

目前還有一個問題：從效果上看，是3秒一次輪詢。但不知道有什麼API能夠設定頻率……github

index.html

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
</head>

<body>
    <div id='app'></div>
</body>
<script>
const app = document.getElementById('app')
const source = new EventSource('http://localhost/SSE.php')

/**
 * EventSource 支持的事件有三種 ...
 * 
    『名稱』    『說明』                      『事件處理方法』
    open     當成功與服務器創建鏈接時產生  onopen
    message  當收到服務器發送的事件時產生  onmessage
    error    當出現錯誤時產生             onerror
 */
source.onmessage = e => {
    app.innerHTML += e.data + '<br>'
}
</script>

</html>

SSE.php

<?php
header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 

$time = date('r'); 

/**
 * ⚠️ 須要注意的點
 * 1. php推送的信息一個使用了」\n\n」做爲結束標誌。
 * 通過測試，若是不以」\n\n」做爲結束標誌。
 * 那麼客戶端將不能接收到推送的值。
 * 
 * 2. 推送的信息格式必須爲"data:內容\n\n"
 */
echo "data: The server time is: {$time}\n\n"; 
flush();