什麼是Server-Sent Event?
因為有個功能更強大的Websocket Api的存在, 很多人應該都沒聽過Server-Sent Event. 其實它跟 Long polling 是很類似的. 主要的差別在於 Server-Sent Event 的事件是由browser處理的, client 端只需要listen for messages.
Server-Sent Event 比較 Websocket
Websocket雖然功能強大, 但有些情況, 用Server-Sent Event會比較符合效益.例如:
- 像是資訊交換是非雙向, 單純只是client端在接收資料, 而client不需要回傳資料.
- 資源不足. 例如: Server 是虛擬主機, 沒有root的權限或是不能執行特定程式來架起Websocket server.
Server-Sent Event 屬性/方法
| 屬性/方法 | 說明 |
|---|---|
| url | EventSource 中指定的 URL |
| readystate | EventSource 的狀態 |
| CONNECTING | 0 : 代表試著與SERVER連線 |
| OPEN | 1 : 連線成功 |
| CLOSE | 2 : 關閉連線 |
| onopen | 連線成功時會呼叫的事件 |
| onmessage | 接收到資料的時候會呼叫的事件 |
| error | 發生錯誤時會呼叫的事件, 發生錯誤後不會重試連線 |
| close() | 中斷與SERVER的連線, 中斷後不會再重試連線 |
Server-Sent Even 範例
client.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="body">
<div class="container">
<header>
<button onclick="stop();">stop</button>
</header>
<main>
<div id="result"></div>
<div id="ce"></div>
</main>
</div>
</div>
<script>
var source = new EventSource("serverside.php");
source.onmessage = function(event) {
console.log('new message, msg type', typeof(event.data));
document.getElementById("result").innerHTML = event.data + "<br>";
};
function stop(){
source.close();
}
</script>
</body>
</html>
serverside.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
?>
格式說明:
- serverside 一定要把header定義為 Content-Type: text/event-stream
- 要推送的資料前面一定要加 data:
- 結尾一定要多斷一行
自定義事件
Server-Sent Event可以同時推送不同的資料. 假設, 同一個頁面要更新的資料有好友線上狀態跟新通知, 我們可以在serverside 定義出兩個事件
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "event: myEvent_1\n";
echo "data: my Custom event msg {$time}\n";
echo 'data:' . json_encode(array("username"=> "John123", "status"=> "online")) . "\n\n";
echo "event: myEvent_2\n";
echo "data: my Custom event msg {$time}\n";
echo 'data:' . json_encode(array("title"=> "notification", "msg"=> "You've got mail")) . "\n\n";
?>
然後在client.html用addlistener來監聽這兩個事件
<script>
source.addEventListener('myEvent_1', function(event){
var obj = JSON.parse(event.data.split('\n')[1]);
document.getElementById("ev1").innerHTML += obj.username+" : "+obj.status+"<br>";
}, false)
source.addEventListener('myEvent_2', function(event){
var obj = JSON.parse(event.data.split('\n')[1]);
document.getElementById("ev2").innerHTML += obj.title +" : "+obj.msg+"<br>";
}, false)
</script>
