大诚说:HTML5 Server-Sent Event+php实现服务器推送

2024-06-19 05:58

本文主要是介绍大诚说:HTML5 Server-Sent Event+php实现服务器推送,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

[说明:本文参考了张亚飞 著 JavaScript 权威指南]
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.phpPHP文件作为服务器端
代码:
<?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,并能和他通信。

下面我们就用代码示例演示如何使用WorkerEventSource对象实现单向服务器推
第一步、首先建立一个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都是配置较高的,相对用互用来讲几乎没有任何影响。
这样就解决了:服务器连接数量的限制。

下一次我们将探讨:套接字连接Web Socket可以使客户端Web应用程序与服务端进程实现双向通信,敬请期待。

原文地址:http://bbs.lampbrother.net/read-htm-tid-149631.html

<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>
阅读(108) | 评论(0) | 转发(0) |
0

上一篇:这过程叫成长

下一篇:【PHP面向对象技术】PHP 实现函数重载

相关热门文章
  • IP Sec VPN与NAT破镜重圆
  • 网站导航
  • GoAgent图文设置教程
  • UT2.0正式版下载
  • tomcat6.0配置(含配置视频下载...
  • 大家都是用什么来管理hadoop集...
  • 网站被人挂了吗,添加了些程序...
  • Nginx如何保证不走宕机的那个...
  • 大家谈谈MYSQL客户端和服务器...
  • 以下代码运行后为何会输出5?...
给主人留下些什么吧!~~
评论热议

这篇关于大诚说:HTML5 Server-Sent Event+php实现服务器推送的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1074196

相关文章

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.