搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 千锋深圳 > 干货:HTML5 服务器推送事件

干货:HTML5 服务器推送事件

千锋深圳 2018-02-28
干货:HTML5 服务器推送事件


目前客户端(浏览器)和服务端交互大致有以下几种方式:

1.form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,是客户端主动发起;

2.Ajax方式,特点是用户体验好,无需页面整体刷新,对服务器压力也小,有利于客户端和服务端的解耦,也是目前广为使用的一种客户端服务端交互方式,它也是通过客户端发起请求,服务端接受处理,通信方向和form表单相同;

3.server-sent-event,它是服务端主动向客户端(浏览器)发送数据,客户端监听并接受,然后处理,通信方向也是单向的,但是和上面两种相反,是服务端发起,客户端接受,但是其应用层协议还是基于http的。

4.web socket,这是将以前服务端通信的套接字原理实现在了浏览器上,使得浏览器和服务端可以相互发送消息,通信方向是双向的,只要连接一建立,双方都可以向对方发送数据,无需哪一方先来后来,应用层协议基于WS协议。

干货:HTML5 服务器推送事件

上面第3第4由于是HTML5中新添加的功能,所以在很多老版的浏览器中(如IE6-IE8)还不支持,因此应用还不够广泛。

这里主要实现的是第三种方式,即服务端推送事件,直接上代码客户端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    (function()
    {
        var source;
        if (!!window.EventSource) {
             source = new EventSource('http://localhost/server.php');
        }
       source.onmessage=function(e)
       {
        var oSpan=document.createElement('span');
           oSpan.innerHTML=e.data+"<br>";
 
        var oDiv=document.querySelector("#div1");
           oDiv.appendChild(oSpan);
       }
 
 
    })();
</script>
<div id="div1"></div>
</body>
</html>

以上代码构造一个eventSource对象,指向一个服务端后台PHP文件,这个对象是HTML5中的服务端推送事件API封装对象,然后添加onmessage事件,用来监听服务端发送过来的消息,服务端一有消息发送,就会执行这个事件的回调函数,这里让它接收到数据之后将其包裹在span中并将这个span插入到div中。

服务端代码server.PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
 
function sendMsg($id, $msg) {
echo "id: $id" . PHP_EOL;
echo "data: $msg" . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
 
for($i=0;$i<=1000;$i++)
{
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
sleep(2);
 
}

  首先要设定其发送给客户端http报文中的首部

1
header('Content-Type: text/event-stream');<span style="font-size: 14px;">这是服务端推送事件特定的MIME类型,</span>
1
header('Cache-Control: no-cache');<span style="font-size: 14px;">表示不让浏览器进行缓存</span><br><span style="font-size: 14px;">然后每隔两秒向客户端发送一个时间戳,客户端接收到之后,显示到div中,效果如下:</span>

干货:HTML5 服务器推送事件

1
<span style="font-size: 14px;">有了这种通信方式,我们制裁采用的Ajax长轮询的方式来模拟服务器端推送事件就可以不用了,如果服务端收到一些需要通知客户端的信息,那么可以直接发送给客户端,而不必等待其发送请求。</span><br><br><br><br>
干货:HTML5 服务器推送事件
关于千锋

千锋教育一直秉承“用良心做教育”的理念,是中国IT职业教育领先品牌,全力打造互联网技术型人研发人才服务优质平台。拥有全国的专业教学以及就业保障团队,做到了毕业学员业内最高薪水,成为学员最信赖的IT培训机构。

千锋深圳校区

做真实的自己,用良心做教育!

专供干货

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《干货:HTML5 服务器推送事件》的版权归原作者「深圳千锋」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注深圳千锋微信公众号

深圳千锋微信公众号:SZQFJY

深圳千锋

手机扫描上方二维码即可关注深圳千锋微信公众号

深圳千锋最新文章

精品公众号随机推荐