HTML5下服务器与客户端的4种通信方式

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

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

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

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

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

上面第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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值