你的位置:首页 > 软件开发 > 网页设计 > HTML5服务器推送消息的各种解决办法

HTML5服务器推送消息的各种解决办法

发布时间:2016-05-06 16:00:03
摘要在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件、消息、待办事项等通知。往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制。这就意味着如果客户端不主动地向服务器发送消息,服务器就无法得知如何给客户端推送消息。随着HTML ...

摘要

在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件、消息、待办事项等通知。

往BS架构本身存在的问题就是,服务器一直采用的是一问一答的机制。这就意味着如果客户端不主动地向服务器发送消息,服务器就无法得知如何给客户端推送消息。

随着HTML、浏览器等各项技术、标准的发展,依次生成了不同的手段与方法能够实现服务端主动推送消息,它们分别是:AJAX,Comet,ServerSent以及WebSocket。

本篇文章将对上述提及到的各种技术手段进行直白化的解释。


AJAX

正常的一个页面在浏览器中是这样工作的:

  1. 用户向给予浏览器一个需要访问的地址
  2. 浏览器根据这个地址访问服务器,并与服务器之间创建一个TCP连接(HTTP请求)
  3. 服务器根据这个地址和一些其它数据,组建一段HTML文本,将写入TCP连接,然后关闭连接
  4. 浏览器得到了来自服务器的HTML文本,解析并呈现了浏览器上给用户浏览

此时,用户点击了网站上任何一个<a>或触发任何一个<form>提交时:

  1. 浏览器根据form的参数或者a的参数,作为访问的地址
  2. 与服务器创建TCP连接
  3. 服务器组建HTML文本,然后关闭连接
  4. 浏览器将当前显示的页面摧毁,并按照新的HTML文本呈现一个新的页面给用户

我们不难发现的是整个过程中间,一旦建立了一个连接,页面就无法再维护住了。整个过程看上去有点强买强卖,也许我只要一杯新的可乐,但你非要给我一整个套餐组合。

此时我们可以了解一下

当我们利用AJAX实现服务器推送时,其实质是客户端不停地向服务器询问"有没有给我的消息呀?",然后服务器回答"有"或"没有"来达到的实现效果。它的实现方法也很简单,利用jQuery框架封装好的AJAX调用也很方便:

function getMessage(fn) {  $.ajax({    url: "Handler.ashx", //一个能够提供消息的页面    dataType: "text",  //响应类型,可以是JSON,    type: "get",     //HTTP请求类型,还可以是post    success: function (d, s) {      fn(d);      //得到了正常的响应时,利用回调函数通知外部    },    complete: function (x, s) {      setTimeout(function () {        getMessage(fn);      }, 5000);    //无论响应成功或失败,在若干秒后再询问一次服务器    }  });}

原标题:HTML5服务器推送消息的各种解决办法

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。