html5 web worker 和serverSend使用
本文共 3908 字，大约阅读时间需要 13 分钟。
HTML5 规范定义了Server-Sent Event 和WebSocket，为浏览器变成一个RIA客户端平台提供了强大的支持，使用这两个特性，可以帮助服务器将数据“推送”到客户端浏览器。其中，Server-Sent Event是一个从服务器到浏览器的单向推送。Web Socket可以试想双向的通信。下表列出主流的浏览器目前对这两个技术的支持情况：
| | IE | Firefox | Opera | Safari | Chnme |
| Server-Sent Evet | NO | NO | NO | 5.0+ | 5.0+ |
| Web Socket | NO | 4.0+ | NO | 5.0+ | 4.0+ |
HTML5服务器推送技术是使用事件来实现的，英文全称是Server-Sent Event,客户端使用
EventSource对象实现，服务端也有相应的要求，下面让我一一道来：
前戏闲话都省略，咱们直接上代码：
第一步：首先在自己的web目录创建一个serversent.html的页面（我的目录为localhost/eventserver/serversent.html）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body οnlοad="init()">
<button onClick="quit()">退出</button>
<div id="msg" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>
<script type="text/javascript">
//声明一个EventSource:source;
var source;
//初始化调用方法
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=null;
}
//信息输出方法
function p(msg){
document.getElementById("msg").innerHTML+="<br/>"+msg;
}
</script>
第二步：创建一个名为eventserver.php的PHP文件作为服务器端
代码：
<?php
error_reporting(E_ALL);
//注意： 发送包头定义MIMIE类型（header部分），是你实现服务器推必须的代码（MIMIE类型定义了事件框架格式）
header("Content-Type:text/event-stream");
//注意：输出的格式必须为data:value格式，不要问什么，是text/event-tream格式规定。
echo 'data:我是服务器端得第一条数据'."\n";
echo 'data:我是服务器端得第二条数据'."\n";
?>
再注意一下：Server-Sent Event通信数据的编码怎是UTF-8格式的，也就是说你所有的页面编码要统一为UTF-8，否则会乱码或无数据。
现在大家已经可以清楚的看到，服务器每隔一段时间推送一个此数据；那么我们在详细说明一下EventSource对象中的几个时间监听函数。
当EventSource对象被创建，就已可以定义事件监听函数来处理各种事件，主要有以下3个事件：
1，open事件：当连接打开时触发改事件
2，message事件：当收到信息时出发该时间。
3，close事件：当连接关闭时触发改事件。
在事件处理函数中，也可以通过使用readyState属性检测连接状态，主要有3中状态，如下表：
| 常量 | 值 | 描述 |
| CONNECTING | 0 | 正在建立连接 |
| OPEN | 1 | 连接已经建立，正在委派事件 |
| CLOSED | 2 | 连接已经关闭 |
大家看到了EventSource对象是一个不间歇运行的程序，时间一长会大量的耗资源，甚至导致客户端浏览器崩溃，那么如何优化这段执行代码呢？
在HTML5中使用WebWorkers 优化JavaScript 执行复杂运算、重复运算和多线程；对于执行时间长、消耗内存多的JavaScript程序代码最为有用。
下面咱们就说说这个Web Workers,下面先了解一下各个浏览器对Web Workers的支持情况，
| | IE | Firefox | Opera | Safari | Chrome |
| Workers | NO | 3.5 | 10.6 | 5.0 | 3.0 |
| SharedWorker | NO | NO | 10.6 | 5.0 | 5.0 |
同时也可以是有代码去判断当前浏览器是否支持Web Workers
If(window.Worker){
Alert(‘支持 Worker’);
}else{
Alert(‘不支持 Worker’);
}
If(window.SharedWorker){
//支持SharedWorker
}else{
//不支持SharedWorker
}
要注意：JavaScript代码的大小写问题哦。
上面还提到了SharedWorker，它称为共享Worker，该对象一点被创建，运行在同一个源的任何一个脚本都可以引用Worker,并能和他通信。
下面我们就用代码示例演示如何使用Worker和EventSource对象实现单向服务器推
第一步、首先建立一个JS文件命名为worker.js:
function messageHandler(evt){
var url="http://localhost/eventserver/index.php";
//声明一个EventSource:source;
var source;
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=null;
}
}
self.addEventListener('message',messageHandler,false);
第二步，创建一个worker.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
//声明一个worker;
var worker;
//初始化调用方法
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=null;
}
//信息输出方法
function p(msg){
document.getElementById("msg").innerHTML+="<br/>"+msg;
}
</script>
</head>
<body οnlοad="init()">
<button onClick="quit()">退出</button>
<div id="msg" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>
如果你看到了如下结果：恭喜你，成功了!
其实，worker的作用是把JS代码运行在客户端的系统线程中，速度非常快不会导致浏览器崩溃，况且目前的用户PC都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
转载地址：http://yysmb.baihongyu.com/
你可能感兴趣的文章
到你是你玩互联网还是互联网玩了你
查看>>
米洛修炼术：其实你的梦想应该从这里开始
查看>>
这个人的财富可超比尔盖茨，却为何富有争议
查看>>
Qt-不调用CoInitialize-实现SDL多线程运行
查看>>
webrtc如何进行错误恢复
查看>>
headfirst PMP学习笔记-项目经理的四个职责范围
查看>>
第一本docker书学习笔记1-3章
查看>>
headfirst PMP-项目管理的5个过程组
查看>>
速学python之headfirst python第三章学习笔记
查看>>
headfirst PMP-忽视项目职责范围会带来哪些问题？
查看>>
headfirst python第三章持久存储思维导图
查看>>
headfirst python第一章初始python速记卡
查看>>
米洛个人修炼术：情绪的四种常用处理方式，其实都是有问题的
查看>>
架构师米洛：不会汇报工作的员工不是好员工
查看>>
架构师米洛：你不经意的职场坏姿势会损坏你的身体
查看>>
创业能成功的通常是哪几种人
查看>>
架构师米洛：如何让你的同事对你越来越好
查看>>
说服他人的三大好用方法助你加薪升职
查看>>
你身边有爱抢功的同事么
查看>>
如何防止被互联网玩？
查看>>