|||||||||||||||||
大诚说：HTML5
Server-Sent Event+php实现服务器推送
&[说明：本文参考了张亚飞 著 JavaScript 权威指南]
HTML5 规范定义了Server-Sent Event
和WebSocket，为浏览器变成一个RIA客户端平台提供了强大的支持，使用这两个特性，可以帮助服务器将数据&推送&到客户端浏览器。
其中，Server-Sent Event是一个从服务器到浏览器的单向推送。Web
Socket可以试想双向的通信。下表列出主流的浏览器目前对这两个技术的支持情况：
Server-Sent Evet
Web Socket
HTML5服务器推送技术是使用事件来实现的，英文全称是Server-Sent Event,客户端使用
EventSource对象实现，服务端也有相应的要求，下面让我一一道来：
前戏闲话都省略，咱们直接上代码：
第一步：首先在自己的web目录创建一个serversent.html的页面（我的目录为localhost/eventserver/serversent.html）
&!DOCTYPE html&
&meta charset=&UTF-8&&
&body onload=&init()&&
&&&&&button onClick=&quit()&&退出&/button&
&&&&&div id=&msg& style=&border:1px dashed
#c3c3c3;&&&/div&
&script type=&text/javascript&&
//声明一个EventSource:
&&&&//初始化调用方法
&&&&function init(){
&&&&&&&&var
url=&http://localhost/eventserver/index.php&;
&&&&&&&&&&&&source=new EventSource(url);
&&&&&&&&&&&&try{
&&&&&&&&&&&&&&&&source.onopen=function(event){
&&&&&&&&&&&&&&&&&&&&p(&连接已经建立，状态号：&+this.readyState);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&source.onmessage=function(event){
&&&&&&&&&&&&&&&&&&&&p('客户端收到服务器推送的数据是：'+event.data);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&source.onerro=function(event){
&&&&&&&&&&&&&&&&&&&&&&&&p(&出错，信息状态号是：&+this.readyState);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}catch(err){
&&&&&&&&&&&&&&&&alert('出错啦，错误信息：'+err.message);
&&&&&&&&&&&&}
&&&&//退出方法，关闭EventSource
&&&&function quit(){
&&&&&&&&p(&已经成功退出啦！&);
&&&&&&&&source.close();
&&&&&&&&source=
&&&&//信息输出方法
&&&&function p(msg){
&&&&&&&&document.getElementById(&msg&).innerHTML+=&&br/&&+
第二步：创建一个名为eventserver.php的PHP文件作为服务器端
error_reporting(E_ALL);
//注意： 发送包头定义MIMIE类型（header部分），是你实现服务器推必须的代码（MIMIE类型定义了事件框架格式）
header(&Content-Type:text/event-stream&);
//注意：输出的格式必须为data:value格式，不要问什么，是text/event-tream格式规定。
echo 'data:我是服务器端得第一条数据'.&
echo 'data:我是服务器端得第二条数据'.&
再注意一下：Server-Sent Event通信数据的编码怎是UTF-8格式的，也就是说你所有的页面编码要统一为UTF-8，否则会乱码或无数据。
现在大家已经可以清楚的看到，服务器每隔一段时间推送一个此数据；那么我们在详细说明一下EventSource对象中的几个时间监听函数。
当EventSource对象被创建，就已可以定义事件监听函数来处理各种事件，主要有以下3个事件：
1，open事件：当连接打开时触发改事件
2，message事件：当收到信息时出发该时间。
3，close事件：当连接关闭时触发改事件。
在事件处理函数中，也可以通过使用readyState属性检测连接状态，主要有3中状态，如下表：
CONNECTING
正在建立连接
连接已经建立，正在委派事件
连接已经关闭
大家看到了EventSource对象是一个不间歇运行的程序，时间一长会大量的耗资源，甚至导致客户端浏览器崩溃，那么如何优化这段执行代码呢？
在HTML5中使用WebWorkers 优化JavaScript 执行复杂运算、重复运算和多线程；对于执行时间长、消耗内存多的JavaScript程序代码最为有用。
下面咱们就说说这个Web Workers,下面先了解一下各个浏览器对Web
Workers的支持情况，
SharedWorker
同时也可以是有代码去判断当前浏览器是否支持Web
If(window.Worker){
&&Alert(&支持 Worker&);
&&Alert(&不支持 Worker&);
If(window.SharedWorker){
//支持SharedWorker
//不支持SharedWorker
要注意：JavaScript代码的大小写问题哦。
上面还提到了SharedWorker，它称为共享Worker，该对象一点被创建，运行在同一个源的任何一个脚本都可以引用Worker,并能和他通信。
下面我们就用代码示例演示如何使用Worker和EventSource对象实现单向服务器推
第一步、首先建立一个JS文件命名为worker.js:
messageHandler(evt){
url=&http://localhost/eventserver/index.php&;
&&&&//声明一个EventSource:
&&&&if(evt.data){
&&&&&&&&try{
&&&&&&&&&&&&&&&&source=new EventSource(url);
&&&&&&&&&&&&&&&&source.onopen=function(event){
&&&&&&&&&&&&&&&&&&&&postMessage(&连接已经建立，状态号：&+this.readyState);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&source.onmessage=function(event){
&&&&&&&&&&&&&&&&&&&&postMessage('客户端收到服务器推送的数据是：'+event.data);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&source.onerro=function(event){
&&&&&&&&&&&&&&&&&&&&&&&&postMessage(&出错，信息状态号是：&+this.readyState);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}catch(err){
&&&&&&&&&&&&&&&&postMessage('出错啦，错误信息：'+err.message);
&&&&&&&&&&&&}
&&&&}else{
&&&&&&&&postMessage('已经退出！');
&&&&&&&&source.close();
&&&&&&&&source=
self.addEventListener('message',messageHandler,false);
第二步，创建一个worker.html页面
charset=&UTF-8&&
&script type=&text/javascript&&
//声明一个
&&&&//初始化调用方法
&&&&function init(){
&&&&&&&&if(window.Worker){
&&&&&&&&&&&&worker=new
Worker('worker.js');
&&&&&&&&&&&&worker.onmessage=function(event){
&&&&&&&&&&&&&&&&p(event.data);
&&&&&&&&&&&&};
&&&&&&&&&&&&worker.postMessage(true);
&&&&&&&&}else{
&&&&&&&&&&&&alert(&浏览器不支持Web
Workers!&);
&&&&//退出方法，关闭EventSource
&&&&function quit(){
&&&&&&&&p(&已经成功退出啦！&);
&&&&&&&&source.close();
&&&&&&&&source=
&&&&//信息输出方法
&&&&function p(msg){
&&&&&&&&document.getElementById(&msg&).innerHTML+=&&br/&&+
onload=&init()&&
&&&&&button onClick=&quit()&&退出&/button&
&&&&&div id=&msg& style=&border:1px dashed
#c3c3c3;&&&/div&
如果你看到了如下结果：恭喜你，成功了!
其实，worker的作用是把JS代码运行在客户端的系统线程中，速度非常快不会导致浏览器崩溃，况且目前的用户PC都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
下一次我们将探讨：套接字连接Web Socket可以使客户端Web应用程序与服务端进程实现双向通信，敬请期待。
原文地址：
责任编辑：贾海峰
48小时点击排行
共青团中央主办　共青团中央网络影视中心承办　版权所有：中国青年网网站修改,HTML5网站设计和建站,网站服务器租用和配置和WEB环境架设和维护 - 独步天下合肥独步天下网络科技有限公司成立于2014年，由多年开发经验程序员、资深前端设计人员和大型网络科技公司运维经理联合组成。我们擅长前端设计、后端开发及服务器运维...独步能为您提供最新技术HTML5网站设计和网站功能修改或扩展,能提供网站建设后的内容更新和维护工作,也能提供网站服务器解决方案及WEB环境的配置和维护...提供从前端设计到后端开发，以及服务器购买租赁配置的一条龙解决方案。此外，还有少量的网站修改，主要面向WordPress、ECshop、Zencart等网店程序... 合肥独步天下网络科技有限公司能为您提供最新技术HTML5网站设计和网站功能修改或扩展,能提供网站建设后的内容更新和维护工作,也能提供网站服务器解决方案及WEB环境的配置和维护。我们擅长前端设计、后端开发及服务器运维。提供从前端设计到后端开发，以及服务器购买租赁配置的一条龙解决方案。此外，还有少量的网站修改，主要面向WordPress、ECshop、Zencart等网店程序。 12-3012-2912-3012-2911-1211-1211-1111-1111-1011-1011-1011-0701-0212-2212-1912-1912-1912-1412-1312-0912-0912-0901-1601-1401-1601-1601-1401-1401-1301-1012-3112-2912-2912-29......Haijun's blog，记录无线互联网新闻，分享人生感悟励志格言。采用响应式设计，自适应手机端和电脑端浏览器。...静怡家园即海军博客,分享linux运维经验和交流技术...摩托车配件外贸网站。摩托车及其配件，全球航运。Aftermarket Motorcycle Fairings,ABS Fairings,Fairing Kit...韩都衣舍（集团）创立于2006年，韩都衣舍官网，韩都衣舍网上商城支持货到付款，7天无理由退换货。...上海三菱电机o上菱空调机电器有限公司（简称SAEC）是三菱电机株式会社和上海电气实业有限公司共同出资组建的中日合资企业...宝贝第一作为国内儿童安全座椅行业的领航者，一直努力将最好的育儿方式、值得信赖的产品推介给所有的家庭...友情链接 |
| Powered by dbtxCMS V1.1亲，开发一个iOS应用没有那么容易
陈远|来自: |
摘要: 这是来自新加坡的 iOS 开发者 Kent Nguyen 发表在 1 月底的一篇博文。这篇吐槽文在 iOS 开发圈子里流传甚广，从原文 150 多个评论就可见一斑，现翻译如下。 ... ...
英文原文：　　让我们开门见山吧：做一个 iPhone 应用需要花多少钱？　　就是这个最常见的问题，我的很多朋友（大多是些西装革履的商务人士），还有我那些个对技术一知半解的客户们，他们都问过我这个的问题。通常，我会先给出一个大致的报价，这个报价并没有细致到需要签合同确认每一个功能点的地步。即便是这样，每当的我报价一出口，对方都毫无例外的给惊着了（当然不是因为便宜）。　　说实话，我没有狮子大开口。看看&吧，讨论的是开发&这样一款应用需要多少钱，后来讨论范围扩展到开发一个 iOS 应用的合理费用范围。虽然这个帖子是在 2008 年发布的，而帖子的最佳答案是由一名来自 Twitteriffic 的开发人员于 2010 年回答的，但是时至今日，帖子里面讨论的数字仍然是很靠谱的，而且我预计到 2012 年底依然有效。而我的报价和这个帖子里面的数字比起来，简直是小巫见大巫了。　　现在的趋势是，什么公司什么业务都想搞个 iOS 客户端，并且这种趋势在 2012 年看似依然火爆。所以我想起来写这篇博文，我想说一下开发一个 iOS 应用会碰到的各种细节问题和横生的变数，借此解释为什么 iOS 应用开发成本这么贵。如果你在考虑搞一个 iOS 应用，而你本身是搞业务而不是做技术的，如果你目前正在招标或者仅仅是想了解一下，那我这篇博会对你有帮助。当然，我说的东西并不局限于 iOS 应用开发，对 Android、Windows Phone 或者是 Blackberry（如果 RIM 还能活的话）等移动应用平台基本上也是适用的。　　开发之前需要仔细考虑的　　别做拍脑瓜的决策，在开工之前你需要考虑的比你想象的要多。我通常会帮助或者指导客户把以下几个要素都过一遍：　　一：和客户谈他们的移动应用，最让我吃惊的是他们从来没有想过支撑一个 iPhone 应用运行，背后需要涉及到的方方面面。他们想象中的 iPhone 是独立存在于这个宇宙的，是如此的简单，以至于他们要我很快就给出一个项目预算报价，而不用讨论诸多细节。我问他们：“你们是否考虑过后台服务器的事情？你们的应用需要和后端服务器做数据通讯？” 什么，听不懂？好吧，我用地球人的语言再把这个问题讲一遍：“你们的应用不是需要用户注册嘛，你们考虑过把用户的数据存放在哪里了吗？我们需要一个地方去保存这些以后会用到的数据。” 第一次碰到这样的客户时，哥简直就怒了。后来我发现这不是客户的错：我是搞编程的，CS 架构对我来说就像吃饭睡觉一样是不假思索的东西，而我的客户尽是些高富帅，他们懂个毛 CS 架构！　　所以，如果你不大懂技术，那请仔细听我说：如果你想做的移动应用需要用户注册和登录，或者你想随时控制移动应用的一些输出，甚至是你仅仅是需要一个用户反馈意见调查表这么简单的功能，那么，你得搞一台后端服务器。　　二：好了，现在你知道你需要一台后端服务器。同时你还需要想办法让你的 iOS 应用和你的服务器能够对话，就是相互间接收数据什么的。不，这个问题不是简答靠什么标准的即插即用的东东就能解决的，不是你们想象的那样！所有的东西都需要定制化开发，这就好比发明一门语言：你希望你的服务器和你的应用之间能够通过一种语言沟通，但是你不希望其他人听得懂这门语言。　　用行话说这就是制定服务器端 API 接口，或简称 API。这些 API 应该在开发 iPhone 客户端之前就到位了。为什么？因为你必须先规定好一门语言的单词和语法，然后才能用这门语言说话吧！？好了，这就带出了第三点—如何开发这些 API。　　三：API 的成功定制是项目成功的一半（反之亦然），所以千万不要掉以轻心。你要考虑你的业务数据模型、业务流程、调用业务需要提供的参数、特定事件发生时数据间该如何互动等等。简单来说，我们要做的就是开发一个网站，上门跑着你的业务流程，只不过这个网站的所有运行结果都不是通过网页形式展现出来，而是呈现在一行行的文本和数字中。举个例子：一个登录成功的反馈页面仅仅包含 YES 一个单词。　　iPhone 应用需要访问这些预先定义好的接口，并且按预定义格式提供必要的输入（比如用户名和密码），然后要对服务器端的反馈（YES 或者 NO）做出解析处理。所以，没有什么移动应用能够自动的含有用户注册和登录功能。　　服务器端开发需要考虑的问题太多了：选择服务器，选择用什么语言开发，主机放在哪里才能增加访问速度，等等，这里我就不展开了。如果这一切对你来说很陌生，那么你最好去问问团队里的技术负责人，或者干脆让开发人员做决策。　　四: 所以，关于服务器端 API，你或者让自己的技术团队把它开发好，再将完善的 API 文档交给 iPhone 应用开发人员；或者你支付 iPhone 应用开发人员额外的报酬来搞定这些。你找的 iPhone 应用开发人员可能会服务器端开发也可能不会。如果他会的话，我建议最好让他也同时负责服务器端开发，因为他最清楚 iPhone 应用中需要哪些服务器端 API。　　如果你的服务器端 API 已经存在了，那么除了向 iPhone 应用开发人员提供相关文档之外，你还要考虑让他能够便捷的同服务器开发团队沟通，因为大多数情况下，iPhone 应用需要在已有 API 基础上增加一些新的接口。　　现在我们来看看 iPhone 应用开发本身　　扯了大半天，我们终于开始谈 iPhone 应用开发本身了。一般来说，iOS 平台上做所有事情都不能随心所欲。你最好在开发人员写代码之前把所有的需求都确认好好。这和开发网站不一样，按照实现签订的合同开发 iOS 应用，开发过程中对需求变更的容纳度可能很低：　　用户界面：无论你打算采用 iOS 标准界面还是自定义元素，在开发开始前一定要确认清楚，因为应用的程序架构是根据界面和用户使用流程来设计的。一个很好的例子就是在界面底部使用了 iOS 标准的标签栏（Tab Bar），此后如果你想让标签栏里面的图标变成彩色的，这个代码改动量可没你想象的那么小！　　代码之间的耦合：如果是开发网站，你可以随意的添加一个页面或者一处链接。做 iOS 应用就没有那么简单了，很多东西一开始都要设计好，后期的一处改动会牵连很多东西，具体原因是你无法理解的。iOS 应用的代码写好之后，再改动行不行？行！但必须小心。 这就像设计电路板一样， 如果你不小心把那根线搭错了，整块电路板就会不工作。有人说架构优良的程序可以有很高的延展性，那纯属纸上谈兵。在 About 屏幕上添加一个电子邮件按钮可能只需要几行代码的工作量，而添加一个转发到新浪微薄的按钮（译者注：原文是添加一个 Facebook Like）就完全不是那么简单的事儿了！　　让一个 iPhone 应用同时也支持 iPad：如果要评选最坑爹“需求变更”，那么这个绝对是当之无愧的。理由很简单：支持 iPad 根本不是 TMD 什么附加功能！iPad 应用基本上都比 iPhone 应用来得要复杂，界面设计和用户体验也大不一样。我问你，制造一辆电动自行车，然后把它改装成一部烧汽油的摩托车，这能是一回事儿吗！？电动自行车跟摩托车看起来是很像，但是制造它们完全是两码事。　　拿广受欢迎的 Facebook 官方应用来说，它的 iPhone 和 iPad 版本看似相似，实际用户操作流程完全不同。不仅仅是界面上的不同会带来额外的工作，对后台服务器 API 的需求也可能不一样。拿我熟悉的一个应用&&来说（我熟悉它因为这是我开发的），它的 iPad 版本比 iPhone 多了几个功能，这些都需要额外的服务器端 API 来支持。记住，iPhone 和 iPad 应用的用户体验需求是完全不一样的。　　准备好开始了吗？　　希望此文能够帮助你和你的团队了解移动应用开发幕后的方方面面。除非你们要做一个像计算器那么简单的单机应用，否则你们很难用极低的成本搞定。综上所述，如果你觉得外包成本太高，那你只好招人自己开发。　　当然，如果你决定了要外包移动应用开发，那么我还要提醒一点：公司政治。如果你是在一家大公司或者有着严格制度的机构里面干活，那么帮助合同开发者搞定那些个规章制度上的繁文缛节，对你来说是非常重要的一项工作，必要的时候甚至可以做一些政策上的变通。 我同几个大型企业客户接触过，当我要求看他们的服务器端数据接口的时候，他们流露出很不安的表情。我想这或许是因为他们受制于公司规定而不能透露信息，这无可厚非；或者他们还没有想好这种情况下该如何操作；或者他们的品牌制度蛋疼到需要在移动应用的每个屏幕上都摆着公司 logo！最终我没有和这样的企业客户合作，因为我无法想象如果有一天我需要增加一些服务器端 API 接口的话，和他们的规章和流程折腾，那将会是多么悲剧的事情。　　PS：开发移动应用很耗费时间，你最好有耐心。　　英文原文：&& 编译：在线 –&
本站资讯均由 HTML5中国 编辑从其他媒体精选HTML5相关资讯转载，以供网友参阅，投稿： admin@html5cn.org
刚表态过的朋友 ()
扫一扫 HTML5中国官方微信
All Right Reserved. Powered by
京ICP备号-7
京公网安备: 京公网安备：83号解决HTML5在IIS6下无法正常显示的问题_服务器_MHZG
解决HTML5在IIS6下无法正常显示的问题
前段时间，一个客户要求使用HTML5制作一个网站，网站在本地测试的时候，显示正常。本地使用的是Win7+IIS7。但是将网站上传到服务器上时(服务器是windows 2003+iis6
前段时间，一个客户要求使用HTML5制作一个网站，网站在本地测试的时候，显示正常。本地使用的是Win7+IIS7。但是将网站上传到服务器上时(服务器是windows 2003+iis6)。在IE 8中始终无法正常显示。但是在火狐及谷歌浏览器中可以正常显示。百思不得其解。在百度、谷歌了大半天之后，还是没有解决问题，迫不得已的情况下，还尝试了搜狗和360搜索。问题一直存在着。无意间在IE下按了F12，发现一个问题。就是在IE 8下的开发人员工具下，显示的文本模式始终是IE7标准。但是本地显示的是IE8标准。然后又在谷歌中找到了答案。答案来自微软官方。如果想在IIS6下显示正常的HTML5代码。那么必须将IIS6中设置HTTP头。在IIS6中，新建的站点HTTP头下，会有这么一个定义：X-UA-Compatible:IE=EmulateIE7。作用是将网站解析成IE7兼容模式。从而导致无法正常显示HTML5代码。
最终解决办法如下：
依次单击&开始&、&运行&，然后键入 inetmgr.exe 并单击&确定&。
展开所需服务器，然后展开&网站&。
右键单击所需网站，然后单击&属性&。
单击&HTTP 标头&选项卡。
在&自定义 HTTP 标头&下选择&X-UA-Compatible:IE=EmulateIE7&
单击&删除&。
点击确定。
第一时间获取行业新鲜资讯和编程技术，请在微信公众账号中搜索「mhzg」，或用手机扫描左方二维码，即可获得mhzg每日精华内容推送。mhzg.net是一个着重于科技资讯、电商资讯、编程技术的交流平台。核心关注对象是编程技术中的extjs教程，extjs开发等编程语言。
Copyright (C) mhzg ()}