html5 web worker 和serverSend使用
2013-01-07 12:10
756 查看
HTML5 规范定义了Server-Sent
Event 和WebSocket，为浏览器变成一个RIA客户端平台提供了强大的支持，使用这两个特性，可以帮助服务器将数据“推送”到客户端浏览器。
其中，Server-Sent
Event是一个从服务器到浏览器的单向推送。Web
Socket可以试想双向的通信。下表列出主流的浏览器目前对这两个技术的支持情况：
HTML5服务器推送技术是使用事件来实现的，英文全称是Server-Sent
Event,客户端使用
EventSource对象实现，服务端也有相应的要求，下面让我一一道来：
前戏闲话都省略，咱们直接上代码：
第一步：首先在自己的web目录创建一个serversent.html的页面（我的目录为localhost/eventserver/serversent.html）
代码：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
</head>
<body
onload="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中状态，如下表：
大家看到了EventSource对象是一个不间歇运行的程序，时间一长会大量的耗资源，甚至导致客户端浏览器崩溃，那么如何优化这段执行代码呢？
在HTML5中使用WebWorkers 优化JavaScript 执行复杂运算、重复运算和多线程；对于执行时间长、消耗内存多的JavaScript程序代码最为有用。
下面咱们就说说这个Web
Workers,下面先了解一下各个浏览器对Web
Workers的支持情况，
同时也可以是有代码去判断当前浏览器是否支持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
onload="init()">
<button
onClick="quit()">退出</button>
<div
id="msg" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>
如果你看到了如下结果：恭喜你，成功了!
其实，worker的作用是把JS代码运行在客户端的系统线程中，速度非常快不会导致浏览器崩溃，况且目前的用户PC都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
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+ |
Event,客户端使用
EventSource对象实现，服务端也有相应的要求，下面让我一一道来：
前戏闲话都省略，咱们直接上代码：
第一步：首先在自己的web目录创建一个serversent.html的页面（我的目录为localhost/eventserver/serversent.html）
代码：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
</head>
<body
onload="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 | 连接已经关闭 |
在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 |
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
onload="init()">
<button
onClick="quit()">退出</button>
<div
id="msg" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>
如果你看到了如下结果：恭喜你，成功了!
其实，worker的作用是把JS代码运行在客户端的系统线程中，速度非常快不会导致浏览器崩溃，况且目前的用户PC都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 Web Worker的使用
- HTML5——Web Worker使用方法
- HTML5 Web Worker的使用
- HTML5 Web Worker使用
- WebWorker和Server-Sent Events和HTML5 WebSocket
- Html5 Web worker 不能使用 web sql
- HTML5 Web Worker的使用
- 针对HTML5的Web Worker使用攻略
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用方法
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用
- HTML5 Web Worker的使用方法(转)
- HTML5 Web Worker的使用方法
- HTML5 Web Worker的使用
- HTML5 使用Web Worker处理线程
- 使用 HTML5 WebSocket 构建实时 Web 应用
- HTML5 Web SQL Database 数据库的使用方法
- 使用 WebSockets 进行 HTML5 视频直播
- html5 websoket 的使用方法