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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

服务器集群同步时间手记

1.时间服务器配置(必须root用户) (1)检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 (2)修改ntp配置文件 [r

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo