摘要

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

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

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

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

1.AJAX

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

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

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

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

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

此时我们可以了解一下XmlHttpRequest组件,这个组件提供我们手动创建一个HTTP请求,发送我们想要的数据,服务器也可以只返回我们想要的结果,最大的好处是,当我们收到服务器的响应时,原来的页面没有被摧毁。这就好比,我喊一句"我的咖啡喝完了,我要续杯",然后服务员就拿了一杯咖啡过来,而不是会把我没吃完的套餐全部倒掉。

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

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

通过上面的代码,可以每隔5秒询问一次服务器是否有需要处理的消息,通过这种方式可以达到推送的效果,但是会存在一个问题:

  1. 间隔时间越快,推送的及时性越好,服务器的消费越大;
  2. 间隔时间越慢,推送的及时性越低,服务器的消费越小。

而且严格地来说,这种实际方式,并不是真正意义上的服务器主动推送消息,但由于早期技术手段缺乏,所以AJAX轮循成为了一种很普遍的手段。

51220网站目录 https://www.51220.cn

2.Comet

我们知道HTTP请求其实是基于TCP连接实现的,再看看之前说的HTTP请求处理过程:

  1. 客户端与服务器建立TCP连接
  2. 服务器根据客户端提交的报文处理并生成HTML文本
  3. 将HTML封闭成为HTTP协议报文并返回给客户端
  4. 关闭链接。

看到这个处理过程,我们不难联想到,如果把第4步——关闭连接给省掉,那不就相当于有一个长连接一直被维持住了么。通过对服务端的一些操作,我们可以直接将数据从这个TCP连接发送客户端了。

通过这种技术,我们可以大大提高服务器推送的实时性,还可以减去服务端不停地建立、施放连接所形成的开销。

目前市面上有不少基于AJAX实现的Comet机制,但主要有两种方式:

  1. 建立连接后依然使用"询问"+"应答"的模式。虽然工作方式没变,但是因为减去了每次建立与施放连接的工作,所以性能上提升了很多。而且服务器对TCP连接可以有上下文的定义,而不像以前的AJAX完全是无状态的。
  2. 通过对Stream的写入实现服务器将数据主动发送到客户端。因为是TCP连接,所以通过对服务器的编程,我们可以主动的把数据从服务端发送给客户端,从模式上真正建立起了推送的概念。

3.Server-Sent

Server-Sent是HTML5提出一个标准,它延用了Comet的思路,并对其进行了一些规范。使得Comet这项技术由原来的分支衍生技术转成了正统的官方标准。

它的原理与Comet相同,由客户端发起与服务器之间创建TCP连接,然后并维持这个连接,至到客户端或服务器中的做任何一放断开,ServerSent使用的是"问"+"答"的机制,连接创建后浏览器会周期性地发送消息至服务器询问,是否有自己的消息。

这项标准不仅要求了支持的浏览器能够原生态的创建与服务器的长连接,更要求了对JavaScript脚本的统一性,使得兼程该功能的浏览器可以使用同一套代码完成Server-Sent的编码工作。

创建代码非常简单:

//定义一个ServerSent对象
var s = new EventSource("Handler.ashx");
//当收到一个非自定义事件时的回调函数
s.onmessage = function (e) {
alert(e.data);
};
//当收到一个被服务器命名为MyEvent事件消息时的回调函数
s.addEventListener("MyEvent", function (e) {
alert(e.data);
});

而服务器的代码也很简单:

public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/event-stream";
context.Response.Expires = -1;
context.Response.Write("event: MyEvent\r\n"); //事件类型,使用\r\n结尾
context.Response.Write("data: HelloWorld!\r\n"); //事件数据,换行时使用\r\n,并在新行再加上data:
context.Response.Write("data: I'm server!\n\n"); //事件数据结束,使用\n\n
context.Response.Flush(); //这里不能用End,否则是关闭连接的
}
public bool IsReusable
{
get
{
return true;
}
}
}

两小段代码,就已经具备了服务器消息推送了。

总得来说SeverSent就是HTML5规范下的Comet,具有更好的统一性,而且简单好用。

4.WebSocket

看名字就知道了,这是一个可以用在浏览器上的Socket连接。

这也是一个HTML5标准中的一项内容,他要求浏览器可以通过JavaScript脚本手动创建一个TCP连接与服务端进行通讯。

WebSocket不包含太多的额外功能,仅仅就是TCP连接的几项基本功能:建立,临时以及发送。

另外WebSocket使用了ws和wss协议,需要服务器有与之握手的算法才能将连接打开。

所以WebSocket相对于之前几种手段来说,其编码量是最大的,但由于没有其它的约束,因此它也可以自由地实现所有可能的功能。

即可以满足"问"+"答"的响应机制,也可以实现主动推送的功能。

与ServerSent相同,HTML5也对WebSocket调用的JavaScript进行规范,我们可以弄过很简单的一代码构建一个WebSocket连接

var ws = new WebSocket("ws://192.168.0.105:10080"); //连接服务器
ws.onopen = function (event) { alert("已经与服务器建立了连接\r\n当前连接状态:" + this.readyState); };
ws.onmessage = function (event) { alert("接收到服务器发送的数据:\r\n" + event.data); };
ws.onclose = function (event) { alert("已经与服务器断开连接\r\n当前连接状态:" + this.readyState); };
ws.onerror = function (event) { alert("WebSocket异常!"); };

还可以通过send的方式发送消息

ws.send("Hello World");

WebSocket具有较为复杂的协议,需要在服务端做额外编程才能进行数据通讯。有关协议的详细内容,我会在以后的文章中进行解释。

5.WebSocket + MessageQueue

MessageQueue,简称MQ,也就是消息列队。是一种常常用于Tcp服务端的技术。通过生产和访问各种消息类型,MQ服务器会将生产者所生成的消息发给感兴趣的客户端。市面上有很多的MQ框架,比如:ActiveMQ。

ActiveMQ已经支持了WebSocket协议,也就意味着,WebSocket已经可以作为一个生产者或一个消费者,与MQ服务器连接。

开发者可以通过MQTT的JS脚本,连接上MQ服务器,同时将Web服务器也连上MQ服务器,从此可以告别了Http通讯协议,完完全全使用Socket通讯来完成数据的交换。


总结:

总得来说,在HTML5规范下,最推荐使用ServerSent和WebSocket的方式进行服务器消息的推送。

对比这两种方式。

ServerSent的方式,可以使服务端的开发依然依用以前的方式,但是其工作方式与Comet类似。

而WebSocket的方式,则对服务端的开发有着较高的要求,但其工作方式是完全的推送。

我本人其实挺偏向WebSocket + MQ的工作方式,但是对于老项目的翻新,还是用SeverSent比较好

web消息推送的各种解决办法的更多相关文章

  1. WEB消息推送-框架篇

    WEB消息推送-comet4j 一.comet简介: comet :基于 HTTP长连接的“服务器推”技术,是一种新的 Web 应用架构.基于这种架构开发的应用中,服务器端会主动以异步的方式向客户端程 ...

  2. 实现web消息推送的技术和采用长轮询corundumstudio介绍

    实时消息的推送,PC端的推送技术可以使用socket建立一个长连接来实现.传统的web服务都是客户端发出请求,服务端给出响应.但是现在直观的要求是允许特定时间内在没有客户端发起请求的情况下服务端主动推 ...

  3. WEB消息推送-原理篇

    这篇文章主要讲述B/S架构中服务器“推送”消息给浏览器.内容涉及ajax论询(polling),comet(streaming,long polling).后面会附上源代码. 最近在工作有这么一个需求 ...

  4. web消息推送-goesay

    原文:http://www.upwqy.com/details/22.html 1 GoEasy简介: GoEasy - Web实时消息推送服务专家 最简单的方式将消息从服务器端推送至客户端 最简单的 ...

  5. SSM项目使用GoEasy 实现web消息推送服务

      一.背景 之前项目需要做一个推送功能,最开始我用websocket实现我的功能.使用websocket的好处是免费自主开发,但是有几个问题:1)浏览器的兼容问题,尤其是低版本的ie:2)因为是推送 ...

  6. Web消息推送框架windows部署实践

    一.官方下载地址:https://www.workerman.net/web-sender 二.解压至任意目录下,双击start_for_win.bat,效果如下图: 三.打开Chrome浏览器访问: ...

  7. WEB消息推送-comet4j

    一.comet简介: comet :基于 HTTP长连接的“服务器推”技术,是一种新的 Web 应用架构.基于这种架构开发的应用中,服务器端会主动以异步的方式向客户端程序推送数据,而不需要客户端显式的 ...

  8. 使用SuperWebSocket实现Web消息推送

    在大部分Web系统中,我们可能遇到需要向客户端推送消息的需求.SuperWebSocket第三方库能让我们轻松的完成任务.SuperWebSocket第三方库可以从网上下载,不过通过Visual St ...

  9. 关于php使用基于socket Web消息推送(未完)

    转:http://blog.csdn.net/young_phper/article/details/52441143 http://www.workerman.net/ http://blog.cs ...

随机推荐

  1. java实现第五届蓝桥杯等额本金

    等额本金 题目描述 小明从银行贷款3万元.约定分24个月,以等额本金方式还款. 这种还款方式就是把贷款额度等分到24个月.每个月除了要还固定的本金外,还要还贷款余额在一个月中产生的利息. 假设月利率是 ...

  2. 一文带你了解ANR(测试人员)

    一.首先,了解一下什么是ANR ANR,是"Application Not Responding"的缩写,即"应用程序无响应".系统会向用户显示一个对话框,用户 ...

  3. 重学 Java 设计模式:实战桥接模式(多支付渠道「微信、支付宝」与多支付模式「刷脸、指纹」场景)

    作者:小傅哥 博客:https://bugstack.cn - 编写系列原创专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 为什么你的代码那么多ifelse 同类的业务.同样的功能, ...

  4. JDBC连接泄露问题的排查过程总结

    当前使用的Spring JDBC版本是5.0.0.RC1,HikariCP版本是3.1.0. 今天测试同学反馈在前端页面点击次数多了,就报500错误,数据显示不出来.于是我在后台服务日志中观察发现Hi ...

  5. 曹工说JDK源码(3)--ConcurrentHashMap,Hash算法优化、位运算揭秘

    hashcode,有点讲究 什么是好的hashcode,一般来说,一个hashcode,一般用int来表示,32位. 下面两个hashcode,大家觉得怎么样? 0111 1111 1111 1111 ...

  6. win10 设置开机启动VMware虚拟机并打开指定镜像

    1.设置win10开机启动应用 把应用程序的‘快捷方式’放到“系统启动文件夹”里即可. 2.开机启动VMware虚拟机并打开指定镜像 a.右键VMware Workstation快捷方式,看属性 b. ...

  7. Jenkins入门教程(一):Windos下Jenkins的安装教程

    Jenkins的安装教程 Jenkins安装前的准备 1.安装jenkins前首先确保你的电脑已经安装了JDK,由于jenkins是基于java开发的 JDK下载地址 2.下载jenkins的安装包 ...

  8. 关于微信小程序的文档-手撸

    学习小程序的人如果有vue基础的话应该有很好的帮助作用.没有也关系,反正很简单. 首先理解一个完整的小程序app都有什么页面: pages页面放置所有的页面文件. 一个完整的小程序页面文件包括: in ...

  9. 使用Docker构建企业Jenkins CI平台

    在如今的互联网时代,随着软件开发复杂度的不断提高,软件开发和发布管理也越来越重要.目前已经形成一套标准的流程,最重要的组成部分就是持续集成(Continuous Integration,CI)及持续部 ...

  10. JDBC——什么是JDBC?

    JDBC:Java数据库连接(Java DataBase Connectivity),是Java语言中用来规范客户端如何程序如何来访问数据库的应用程序接口(API),提供了诸如查询和更新数据库中数据的 ...