介紹
Server-Sent Events(簡(jiǎn)稱(chēng)SSE)
SSE是一種能讓瀏覽器通過(guò)http連接自動(dòng)收到服務(wù)器端更新的技術(shù),SSE EventSource 接口被W3C制定為HTML5的一部分益咬。
它是能完成服務(wù)器端向客戶(hù)端單向推送消息纵顾,但是IE不支持……
服務(wù)器端
php代碼
<?php
// 以event-steam的方式輸出
header("Content-Type:text/event-stream;charset='utf-8'");
// 指定哪個(gè)域來(lái)訪問(wèn)
header("Access-Control-Allow-Origin:http://127.0.0.1/");
echo "data:現(xiàn)在北京時(shí)間是".date('H:i:s')."\r\n\r\n";
?>
html代碼
<script>
var source;
function init(argument){
source = new EventSource('http://localhost/sse/data.php');
// 建立連接
source.onopen = function (){
console.log('連接已建立',this.readyState)
}
// 后端實(shí)時(shí)推送的數(shù)據(jù)
source.onmessage = function(event){
console.log('從服務(wù)器實(shí)時(shí)獲取的數(shù)據(jù)',event.data);
}
// 出錯(cuò)的監(jiān)聽(tīng)
source.onerror = function(){
}
}
init();
</script>
這里主要是new一個(gè)EventSource實(shí)例著洼,然后監(jiān)聽(tīng)onopen事件仇冯,這個(gè)事件是監(jiān)聽(tīng)連接已建立宛瞄,然后通過(guò)onmessage事件來(lái)監(jiān)聽(tīng)后端推送過(guò)來(lái)的消息逊拍。