簡介
server-sent實現(xiàn)的就是服務(wù)器向瀏覽器發(fā)送消息，根據(jù)這一特性，我們運用在文章更新推送的功能上，它基于HTTP協(xié)議，除了微軟的ie/edge瀏覽器不支持之外，其他的瀏覽器基本都支持。server-sent發(fā)送的是數(shù)據(jù)流，而不是數(shù)據(jù)包，流信息發(fā)送，就會使得客戶端不會關(guān)閉連接。
瀏覽器支持測試
if(typeof(EventSource)!=="undefined")
{
// Some code.....
}
else
{
alert("您的瀏覽器不支持server-sent");
}
2017-10-29_134058.png
基本用法
首先創(chuàng)建EventSource對象，用于接收服務(wù)器發(fā)送過來的消息，對象實例的readystate屬性：0表示未連接，1表示已連接，2表示連接斷開。它的api:open()連接建立的時候觸發(fā)，此時你可以寫回調(diào)函數(shù)。message()收到來自服務(wù)端的消息時觸發(fā)。error()連接出錯的時候觸發(fā)。close()用于關(guān)閉連接。
//客戶端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>serversent</title>
</head>
<body>
</body>
<script type='text/javascript'>
if(typeof(EventSource)!="undefined"){
//alert("您的瀏覽器支持server-sent");
var source=new EventSource("serversent.php");
source.onmessage=function (event) {
console.log(event.data);
}
}else{
alert("您的瀏覽器不支持server-sent");
}
</script>
</html>
服務(wù)端采用php實現(xiàn)簡單的消息發(fā)送。每條消息之間采用\n\n分開。
//服務(wù)端
<?php
//頭信息的設(shè)置
header('content-type:text/event-stream');
header('cache-control:no-cache');
//retry:設(shè)置重新連接的時間間隔
echo "retry:10000\n\n";
//data:發(fā)送的消息
echo "data:this is a test\n\n";
flush();
?>
參考資料
http://www.w3school.com.cn/html5/html_5_serversentevents.asp
http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
