EventSource
2016-04-25 17:50
169 查看
从服务端接受事件,下面是html代码
View Code
注意服务端代码一定要设置
默认的事件会一直执行,所以你要手动的关闭
注意浏览器兼容性:
当然,可以在代码执行的时候判断是否兼容
注意返回的数据的形式:
基本的形式如下:
多行数据的话每一行前面都要data:之后加上一个\n,最后一行是两个\n。
上面返回的结果e.data是"first line\nsecond line"。接着
//split(分割符)通过分割符将string变成数组
//jion将数组链接成string
发送json数据使用格式如下:
在客户端使用如下:
设置id可以让浏览器追踪最后一次被触发的事件,因为
控制重新链接的时间:浏览器会每3秒钟进行一次重新连接
可以在data之前设置"
下面设置重新链接的时间是10秒:
"
例如下面的服务器输出了三个事件类型,分别是:message,userlogon,update
客户端的监听是:
function sendMessage(){ date_default_timezone_set("America/New_York"); header("Content-Type: text/event-stream\n\n"); $counter = rand(1, 10); while (1) { // Every second, sent a "ping" event. echo "event: ping\n"; $curDate = date(DATE_ISO8601); echo 'data: {"time": "' . $curDate . '"}'; echo "\n\n"; // Send a simple message at random intervals. $counter--; if (!$counter) { echo 'data: This is a message at time ' . $curDate . "\n\n"; $counter = rand(1, 10); } ob_end_flush(); flush(); sleep(1); } }
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 |
if(typeof(EventSource) !== "undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }
注意返回的数据的形式:
基本的形式如下:
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);
相关文章推荐
- 文件下载第二种方式--打包下载
- 虚拟机增加Ubuntu磁盘空间的方法
- Mybatis逆向工程的使用方法
- Android捕获全局异常信息并实现上传
- 欢迎使用CSDN-markdown编辑器
- python_笔记8_生成列表,列表表达式
- Linux 安装Mysql
- python和shell变量互相传递的几种方法
- 功率谱估计(转载)
- BOMStream BOMStreamWithFileAndSys
- Understanding G1 GC Logs
- 【图标管理工具】作为设计师,你不应该错过这个图标管理工具
- 通过ajax异步向后端发送请求,响应请求向前端传送json格式数据的实现思路
- [iOS适配-- launchImage]
- ListView 和CheckBox的批量删除问题的解决。
- 第三方库使用配置
- 个人冲刺03
- JAVA验证身份证格式及合法性
- 剑指offer-面试题51:数组中重复的数字
- 同前端联调过程中遇到的坑