大诚说: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

相关文章

Spring Boot 整合 SSE的高级实践(Server-Sent Events)

《SpringBoot整合SSE的高级实践(Server-SentEvents)》SSE(Server-SentEvents)是一种基于HTTP协议的单向通信机制,允许服务器向浏览器持续发送实... 目录1、简述2、Spring Boot 中的SSE实现2.1 添加依赖2.2 实现后端接口2.3 配置超时时

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2