html5之sse服务器发送事件EventSource介绍

w8484855@qq.com

本文和大家分享的主要是html5的sse服务器发送事件EventSource相关内容，一起来看看吧，希望对大家学习html5有所帮助。

　　Server-Sent Events使用

　　Server-Sent Events使用很简单，通过EventSource 对象来接受服务器端消息。有如下事件：

　　onopen 当通往服务器的连接被打开

　　onmessage 当接收到消息

　　onerror 当发生错误

　　检测 Server-Sent 事件支持

　　if(typeof(EventSource)!=="undefined")

　　{

　　// 浏览器支持 Server-Sent

　　// 一些代码.....

　　}else

　　{// 浏览器不支持 Server-Sent..

　　}

　　接收 Server-Sent 事件通知

　　var source=new EventSource("haorooms_sse.php");

　　source.onmessage=function(event){

　　document.getElementById("result").innerHTML+=event.data + "
";

　　};

　　服务器端代码实例

　　<?php

　　header('Content-Type: text/event-stream');

　　header('Cache-Control: no-cache');

　　$time = date('r'); echo "data: The server time is: {$time}\n\n";

　　flush(); ?>

　　链接事件和报错事件都加上

　　if(typeof(EventSource)!=="undefined")

　　{

　　var source=new EventSource("server.php");

　　source.onopen=function()

　　{

　　console.log("Connection to server opened.");

　　};

　　source.onmessage=function(event)

　　{

　　document.getElementById("result").innerHTML+=event.data + "
";

　　};

　　source.onerror=function()

　　{

　　console.log("EventSource failed.");

　　};

　　}else

　　{

　　document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";

　　}

　　我们会发现，控制台打印如下：

不停的进入链接、和错误，详情请点击

　　那是因为php代码只是简单的echo，并没有连续输出，我们把上面php代码做如下改进

　　<?php

　　header('Content-Type: text/event-stream');

　　header('Cache-Control: no-cache');

　　$time = date('r');

　　$i = 0;

　　$c = $i + 100;

　　while (++$i < $c) {

　　echo "id: " . $i . "\n";

　　echo "data: " . $time. ";\n\n";

　　ob_flush();

　　flush();

　　sleep(1);

　　}?>

　　就不会出现不停错误了！

　　IE浏览器兼容解决方案

　　我们知道，IE浏览器并不支持EventSource，有如下解决方案：

　　引入

　　eventsource.min.js

　　就可以完美解决。

来源：Haorooms