}
<?php
//指定发送事件流的MIME为text/event-stream
header('Content-Type:text/event-stream');
//不缓存服务端发送的数据
header('Cache-Control:no-cache');
//指定服务器发送的事件名
echo "event:test\n\n";
// 定义服务器向客户端发送的数据
echo "data:服务器当前时间为：".date('Y-m-d H:i:s')."\n\n";
//向客户端发送数据流
flush();
?>
- 把报头 “Content-Type” 设置为 “text/event-stream”
- 规定不对页面进行缓存
- 输出发送日期（始终以 “data: ” 开头）
- 向网页刷新输出数据
也许大家应该注意到，就是php推送的信息一个使用了”\n\n”作为结束标志，经过测试，如果不以”\n\n”作为结束标志，那么客户端将不能接收到推送的值。还有需要特别声明一下：推送的信息格式必须为**”data:内容\n\n“**，否则。。。
事件流格式
事件流仅仅是一个简单的文本数据流,文本应该使用UTF- 8格式的编码.每条消息后面都由一个空行作为分隔符.以冒号开头的行为注释行,会被忽略.
每条消息是由多个字段组成的,每个字段由字段名,一个冒号,以及字段值组成.
字段
- event
事件类型.如果指定了该字段,则在客户端接收到该条消息时,会在当前的EventSource对象上触发一个事件,事件类型就是该字段的字段值,你可以使用addEventListener()方法在当前EventSource对象上监听任意类型的命名事件,如果该条消息没有event字段,则会触发onmessage属性上的事件处理函数. - data
消息的数据字段.如果该条消息包含多个data字段,则客户端会用换行符把它们连接成一个字符串来作为字段值. - id
事件ID,会成为当前EventSource对象的内部属性”最后一个事件ID”的属性值. - retry
一个整数值,指定了重新连接的时间(单位为毫秒),如果该字段值不是整数,则会被忽略.
除了上面规定的字段名,其他所有的字段名都会被忽略. Chrome每隔3秒向客户端推送一次，而FF是每5秒推送一次。
注: 如果一行文本中不包含冒号,则整行文本会被解析成为字段名,其字段值为空.
EventSource 对象提供的标准事件
| 名称 | 说明 | 事件处理方法 |
|---|---|---|
| open | 当成功与服务器建立连接时产生 | onopen |
| message | 当收到服务器发送的事件时产生 | onmessage |
| error | 当出现错误时产生 | onerror |
<!DOCTYPE html>
<html>
<head>
<title>sever Sent Event实例1</title>
</head>
<body>
<h2>sever Sent Event实例1</h2>
<button onclick="closeCnt()">断开连接</button>
<div id="result"></div>
<script type="text/javascript">
var result = document.getElementById('result');
if (typeof (EventSource) !== 'undefined') {
//创建事件源
var source = new EventSource('test.php');
//监听事件源发送过来的数据
source.onmessage = function(event){
result.innerHTML +=event.data +'<br>';
}
source.onopen = connectionOpen;
source.onclose = connectionClose;
function connectionOpen(){
if (source.readyState == 0) {
result.innerHTML +='未建立连接<br>';
}
if (source.readyState == 1) {
result.innerHTML +='连接成功<br>';
}
}
function connectionClose(){
result.innerHTML += "关闭连接，readyState属性值为：" + source.readyState + '<br>';
}
function closeCnt(){
source.close();
result.innerHTML += "断开连接，readyState属性值为：" + source.readyState + '<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
}
</script>
</body>
</html>
在指定 URL 创建出 EventSource 对象之后，可以通过 onmessage 和 addEventListener 方法来添加事件处理方法。当服务器端有新的事件产生，相应的事件处理方法会被调用。EventSource 对象的 onmessage 属性的作用类似于 addEventListener( ‘ message ’ )，不过 onmessage 属性只支持一个事件处理方法。
<!DOCTYPE html>
<html>
<head>
<title>sever Sent Event实例1</title>
</head>
<body>
<h2>sever Sent Event实例1</h2>
<div id="result"></div>
<script type="text/javascript">
var result = document.getElementById('result');
if (typeof (EventSource) !== 'undefined') {
//创建事件源
var source = new EventSource('test.php');
//自定义事件源发送过来的数据,事件名和php中事件名对应
source.addEventListener('myevent', 'updateRequests', false);
// source.onmessage = function() {
// result.innerHTML = event.data + '<br>';
// }
function updateRequests(event){
result.innerHTML = event.data + '<br>';
}
}else{
result.innerHTML += "您的浏览器不支持server sent Event";
}
</script>
</body>
</html>
最后
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
