當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EventSource

發(fā)布時(shí)間：2024/8/26 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 EventSource 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

從服務(wù)端接受事件，下面是html代碼

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>comet</title> 5 </head> 6 <body> 7 <ul></ul> 8 <script> 9 var eventList=document.body; 10 var evtSource = new EventSource("sendMessage"); 11 //var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); 12 /* evtSource.onmessage = function(e) { 13 var newElement = document.createElement("li"); 14 newElement.innerHTML = "message: " + e.data; 15 eventList.appendChild(newElement); 16 // alert( "message: " + e.data); 17 }*/ 18 19 evtSource.addEventListener("ping", function(e) { 20 var newElement = document.createElement("li"); 21 22 var obj = JSON.parse(e.data); 23 newElement.innerHTML = "ping at " + obj.time; 24 eventList.appendChild(newElement); 25 }, false); 26 27 evtSource.onerror = function(e) { 28 alert("EventSource failed."); 29 }; 30 31 </script> 32 </body> 33 </html> View Code

注意eventSource對象的事件：

1.onopen：和服務(wù)器之間的鏈接打開時(shí)觸發(fā)

2.onmessage：當(dāng)接收到信息時(shí)觸發(fā)

3.onerror:當(dāng)發(fā)生錯(cuò)誤時(shí)候觸發(fā)
下面是php代碼?

1 function sendMessage(){ 2 date_default_timezone_set("America/New_York"); 3 header("Content-Type: text/event-stream\n\n"); 4 5 $counter = rand(1, 10); 6 while (1) { 7 // Every second, sent a "ping" event. 8 9 echo "event: ping\n"; 10 $curDate = date(DATE_ISO8601); 11 echo 'data: {"time": "' . $curDate . '"}'; 12 echo "\n\n"; 13 14 // Send a simple message at random intervals. 15 16 $counter--; 17 18 if (!$counter) { 19 echo 'data: This is a message at time ' . $curDate . "\n\n"; 20 $counter = rand(1, 10); 21 } 22 23 ob_end_flush(); 24 flush(); 25 sleep(1); 26 } 27 } View Code

注意服務(wù)端代碼一定要設(shè)置Content-Type為text/event-stream類型。

默認(rèn)的事件會一直執(zhí)行，所以你要手動的關(guān)閉

evtSource.close();

注意瀏覽器兼容性：

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari

EventSource support

6.0?(6.0)

Not?supported

當(dāng)然，可以在代碼執(zhí)行的時(shí)候判斷是否兼容

1 if(typeof(EventSource) !== "undefined") { 2 // Yes! Server-sent events support! 3 // Some code..... 4 } else { 5 // Sorry! No server-sent events support.. 6 }

注意返回的數(shù)據(jù)的形式：

基本的形式如下:

data: My message\n\n

多行數(shù)據(jù)的話每一行前面都要data:之后加上一個(gè)\n，最后一行是兩個(gè)\n。

data: first line\n data: second line\n\n

上面返回的結(jié)果e.data是"first line\nsecond line"。接著e.data.split('\n').join('')?來去掉所有\(zhòng)n之后組成的新的string

//split(分割符)通過分割符將string變成數(shù)組

//jion將數(shù)組鏈接成string

發(fā)送json數(shù)據(jù)使用格式如下：

data: {\n data: "msg": "hello world",\n data: "id": 12345\n data: }\n\n

在客戶端使用如下：

source.addEventListener('message', function(e) {var data = JSON.parse(e.data);console.log(data.id, data.msg); }, false);

在發(fā)送的數(shù)據(jù)中添加id

可以為每次推送的信息中添加唯一的id（添加在信息開始處）:

id: 12345\n data: GOOG\n data: 556\n\n

設(shè)置id可以讓瀏覽器追蹤最后一次被觸發(fā)的事件，因?yàn)閑.lastEventId?屬性存在。

控制重新鏈接的時(shí)間：瀏覽器會每3秒鐘進(jìn)行一次重新連接

可以在data之前設(shè)置"retry:重新鏈接的毫秒數(shù)\n"來自定義重新連接的毫秒數(shù).

下面設(shè)置重新鏈接的時(shí)間是10秒：

retry: 10000\n data: hello world\n\n

指定事件名稱：

通過給事件名稱可以讓一個(gè)事件對象產(chǎn)生不同的時(shí)間類型。

"event:事件名"后面的data將和事件名相關(guān)聯(lián)。

例如下面的服務(wù)器輸出了三個(gè)事件類型，分別是：message，userlogon，update

data: {"msg": "First message"}\n\n event: userlogon\n data: {"username": "John123"}\n\n event: update\n data: {"username": "John123", "emotion": "happy"}\n\n

客戶端的監(jiān)聽是：

source.addEventListener('message', function(e) {var data = JSON.parse(e.data);console.log(data.msg); }, false);source.addEventListener('userlogon', function(e) {var data = JSON.parse(e.data);console.log('User login:' + data.username); }, false);source.addEventListener('update', function(e) {var data = JSON.parse(e.data);console.log(data.username + ' is now ' + data.emotion); }, false);

轉(zhuǎn)載于:https://www.cnblogs.com/RachelChen/p/5431847.html

總結(jié)

以上是生活随笔為你收集整理的EventSource的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

EventSource