EventSource

从服务端接受事件，下面是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：和服务器之间的链接打开时触发

2.onmessage：当接收到信息时触发

3.onerror:当发生错误时候触发
下面是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

注意服务端代码一定要设置Content-Type为text/event-stream类型。

默认的事件会一直执行，所以你要手动的关闭

evtSource.close();

注意浏览器兼容性：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
EventSource support	9	6.0 (6.0)	Not supported	11	5

当然，可以在代码执行的时候判断是否兼容

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

注意返回的数据的形式：

基本的形式如下:

data: My message\n\n

多行数据的话每一行前面都要data:之后加上一个\n，最后一行是两个\n。

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

上面返回的结果e.data是"first line\nsecond line"。接着e.data.split('\n').join('') 来去掉所有\n之后组成的新的string

//split(分割符)通过分割符将string变成数组

//jion将数组链接成string

发送json数据使用格式如下：

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);

在发送的数据中添加id

可以为每次推送的信息中添加唯一的id（添加在信息开始处）:

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

设置id可以让浏览器追踪最后一次被触发的事件，因为e.lastEventId 属性存在。

控制重新链接的时间：浏览器会每3秒钟进行一次重新连接

可以在data之前设置"retry:重新链接的毫秒数\n"来自定义重新连接的毫秒数.

下面设置重新链接的时间是10秒：

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

指定事件名称：

通过给事件名称可以让一个事件对象产生不同的时间类型。

"event:事件名"后面的data将和事件名相关联。

例如下面的服务器输出了三个事件类型，分别是：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

客户端的监听是：

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);

转载于:https://www.cnblogs.com/RachelChen/p/5431847.html

EventSource相关推荐

eventsource 服务器发送事件
参见: http://javascript.ruanyifeng.com/htmlapi/eventsource.html
SSE eventSource简介
eventSource简单介绍 eventSource是用来解决web上服务器端向客户端推送消息的问题的.不同于ajax轮询的复杂和websocket的资源占用过大,eventSource(sse)是 ...
Html5实践之EventSource
最近尝试了一下服务器端的推送,之前的做法都是客户端轮询,定时向服务器发送请求.但这造成了我的一些困扰: 1:轮询是由客户端发起的,那么在服务端就不能判别我要推送的内容是否已经过期,因为我很难判断某个信 ...
自定义EventSource（三）IncrementingEventCounter
在自定义EventSource时,可以使用四种EventCounter: EventCounter:统计指标收集器,比如平均值,最大值,最小值 PollingCounter:自定义统计指标收集器,通过 ...
自定义EventSource（二）PollingCounter
在自定义EventSource时,可以使用四种EventCounter: EventCounter:统计指标收集器,比如平均值,最大值,最小值 PollingCounter:自定义统计指标收集器,通过 ...
自定义EventSource（一）EventCounter
之前的Counters都是系统内置的,我们只需在进程外,或进程内采集,然后交给专门的展示指标工具即可.本篇说一下自定义EventSource,来采集自己业务中,或自己产品中的指标收集方式. 自定义Ev ...
来自网页的消息服务器繁处理忙,EventSource 对象用于接收服务器发送事件通知,是网页自动获取来自服务器的更新...
//--------------------------------客户端代码----------------------------- if(typeof(EventSource) !== &quo ...
WebSockets与服务器发送的事件/ EventSource
WebSockets和服务器发送事件都能够将数据推送到浏览器. 在我看来,它们似乎是竞争技术. 它们之间有什么区别? 您何时会选择一个? #1楼根据caniuse.com: 96%的全球用户本机支持 ...
EventSource+eggjs
最近看了chartGpt的请求,发现了EventSource的事件,之前没用过,所以学习下前端代码 const evtSource = new EventSource("/test/see ...

EventSource

在发送的数据中添加id

指定事件名称：

EventSource相关推荐

最新文章

热门文章