HTML5服务器推送事件EventSource无法open也无法从PHP服务器接收数据

NgaiBun 2015-09-11 02:47:20
server.php
<?php
/**
* Created by PhpStorm.
* User: sony
* Date: 2015/9/10
* Time: 21:34
*/

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


for ($i = 0; $i < 100; $i++) {
date_default_timezone_set("Asia/Shanghai");
echo 'data:' . date('Y-m-d H-i-s');
echo "\n\n";
ob_flush();
sleep(1);
}


index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5服务器推送事件</title>
<script src="indexJs.js"></script>
</head>
<body>
<h1>Status:</h1>

<div id="statusDiv"></div>

<h1>Server Data:</h1>

<div id="serverData"></div>
</body>
</html>


indexJS.js
/**
* Created by sony on 2015/9/11.
*/

var statusDiv, serverData;
var SERVER_URL = "server.php";

window.onload = function () {
statusDiv = document.getElementById("statusDiv");
serverData = document.getElementById("serverData");
startListenServer();
}

function startListenServer() {
statusDiv.innerHTML = "connecting server";
var es = new EventSource(SERVER_URL);
es.onopen = openHandler;
es.onerror = errorHandler;
es.onmessage = messageHandler;
}

function openHandler(e) {
statusDiv.innerHTML = "server open";
}

function errorHandler(e) {
statusDiv.innerHTML = "Error";
}

function messageHandler(e) {
serverData.innerHTML = e.data;
}


server.php在chrome上的运行结果:


index.html在chrome上的运行结果:
...全文
249 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
街头小贩 2015-09-11
  • 打赏
  • 举报
回复
text/event-stream不被apache支持,在apache中增加对event stream的支持 把php中的head换成这样试试

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
NgaiBun 2015-09-11
  • 打赏
  • 举报
回复
引用 1 楼 xiaofanku 的回复:
text/event-stream不被apache支持,在apache中增加对event stream的支持 把php中的head换成这样试试

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
还是不行,php单独运行是可以的,但是html运行的时候就Error了
课程介绍:第一章:正则表达式(regularexpression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。第二章:http协议是一种无状态协议,不记录用户行为,我们可以利用cookie记录数据,方便用户操作,提升用户体验。第三章:ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。第四章:本章主要讲解JS动画原理、动画函数封装和轮播。第五章:本章主要讲解面向对象、构造函数和继承、原型链和继承。第六章:本节课程主要讲解了什么是Ajax、如何使用Ajax发送get请求、如何使用Ajax发送post请求、JSON数据格式、回调地狱、Promise和Ajax的同源策略、跨域请求。第七章:本章主要讲解html、val、attr、prop、class、全选框、动画、节点遍历、ajax、sonp、event、multiple、plugin、plugin、magnifier。第八章:本章主要讲解UML类图、单例模式、工厂模式、策略模式、代理模式、观察者模式。第九章:本章主要讲解为什么要模块化、原生JS中,模块的写法、AMD、CommonJS&Webpack。第十章:本节课程主要讲解了服务器安装环境配置、端口及ip基本常识、简单认识PHP(helloworld)、基本语法和动态网页原理。第十一章:本节课程主要讲解了什么是SASS、SASS的预处理、ass语法(变量、嵌套、导入、mixin、扩展、function、expression)。第十二章:本节课程主要讲解了什么是GULP、GULP环境配置、GULP基本使用及GULP的插件安装与使用。

39,087

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧