webserver端push之消息推送

webserver端push之消息推送

HTML5新技术

• H5的桌面通知Notification，弹框消息提醒
• H5的web push，用户订阅了一个站点的web push服务后，即使用户关闭了浏览器，一旦站点主动发送推送消息，用户都能收到，只要你的电脑是开着的。这是目前谷歌和苹果在chrome和safari上都力推的一种全新推送服务，firefox最近也加入了这个阵营。

服务器发送事件server-sent events sse html5之sse服务器发送事件eventsource介绍html5提供了server-sent events方法，通过服务器发送事件，更新能够自动到达。server-sent events使用很简单，通过eventsource对象来接受服务器消息。有如下事件：

* onopen 当通往服务器的连接被打开
* onmessage 当接受到消息
* onerror 当发生错误

传统ajax轮询、http长连接、websocket的对比

• ajax轮询是通过客户端不断向服务端发送http请求，若有新消息就取回的模式保持数据实时更新，但这种方式需要服务器有很快的处理速度和资源
• http长连接(阻塞request)，http连接时客户端向服务端发送请求后，若服务器没有新数据要发送，就不返回response，一旦有了新数据返回了response，客户端就立刻在发送一个request，周而复始。事实上这就是把http协议的不对称性从客户端转移到服务端。
• websocket是html5提出的一个新标准(也可称之为协议)，客户端在发送请求时在请求头加入额外的字段，以标识这是一个基于websocket协议的连接，服务器根据这个请求头生成响应，与客户端建立起websocket连接，之后服务端有消息时，直接向客户端推送即可

说明：

ajax轮询 需要服务器有很快的处理速度和资源(速度)

long poll：需要有很高的并发，也就是说同时接待客户的能力(并发)

怎么在不支持websocket的客户端上使用websocket。不能，但是可以通过上面的long poll 和ajax轮询来模拟出类似的效果

轮询、长轮询、长连接、websocket

web端即时通讯技术：即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时的将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。但是在web中，由于浏览器的限制，实现即时通讯需要借助一些方法。这些限制出现的主要原因是，一般的web通讯都是浏览器先发送请求到服务器，服务器再进行响应完成数据的现实更新。

实现web端即时通讯的方法：实现即时通讯主要有四种方式，他们分别是轮询、长轮询(comet)、长连接(sse)、websocket。它们大体可以分为两类，一种是http基础上实现的，包括短轮询、comet和sse；另一种不是在http基础上实现的，即websocket。下面分别介绍一下这四种轮询方式，以及它们各自的优缺点。

• 轮询

  短轮询的基础思路是浏览器每隔一段时间向浏览器发送http请求，服务器端在收到请求后，不论是否数据更新，都直接进行响应。这种方式实现的即时通信，本质上还是浏览器发送请求，服务器接受请求的一个过程，通过让客户端不断地进行请求，使得客户端能够模拟实时的收到服务端的数据的变化。
  这种方式的优点是比较简单，易于理解，实现起来也没有什么技术难点。缺点是显而易见的，这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。尤其是在客户端，距离来说，如果有数量级想对比较大的人同时位于基于短轮询的应用中，那么每一个用户的客户端都会疯狂的向服务器端发送http请求，而且不会间断。人数越多，服务器端压力越大，这是很不合理的。
  因此短轮询不适用于那些同时在线用户数量比较大，并且很注重性能的web应用。
  
  var xhr = new XMLHttpRequest();
    setInterval(function(){
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){

        };
        xhr.send();
    },1000)  # 也就是ajax 的定时任务

• 长轮询(comet)

  当服务器收到客户端发来的请求后，服务器端不会直接进行响应，而是先将这个请求挂起，然后判断服务器端数据是否有更新。如果有更新，则进行响应，如果一直没有数据，则到达一定的时间限制(服务器端设置)才返回。客户端JavaScript响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。
  
  长轮询和短轮询比起来，明显减少了很多不必要的http请求次数，相比之下节约了资源。长轮询的缺点在于，连接挂起也会导致资源的浪费
  
   function ajax(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET','/user');
        xhr.onreadystatechange = function(){
              ajax();
        };
        xhr.send();
    }

轮询和长轮询都是基于http的，两者本身存在着缺陷：轮询需要更快的处理速度，长轮询则更要求处理并发的能力，两者都是被动型服务器的提现：服务器不会主动推送消息，而是在客户端发送ajax请求后进行返回的响应。而理想的模型是在服务器端数据有了变化后，可以主动推送给客户端，这种主动性服务器是解决这类问题的很好的方案。websockets就是这样的方案。

• 长连接(sse)

sse是html5新增的功能，全程为server-sent events。它可以允许服务推送数据到客户端。sse在本质上就与之前的长轮询、短轮询不同，虽然都是基于http协议的，但是轮询需要客户端先发送请求。而sse最大的特点就是不需要客户端发送请求，可以实现只要是服务器数据有更新，就可以马上发送到客户端。

sse的优势很明显，它不需要建立或保持大量的客户端发送服务器端的请求，节约了很多资源，提升应用性能。并且后面会介绍到，sse的实现非常简单，并且不需要依赖其他插件。

• websocket

websocket是html5定义的一个新协议，与传统的http协议不同，该协议可以实现服务器与客户端之间全双工通信。简单来说，首先需要再客户端和服务器端建立起一个连接，这部分需要http。连接一旦建立，客户端和服务器端就处于平等的地位，可以相互发送数据，不存在请求和响应的区别。

websocket的优点是实现了双向通信，缺点是服务器端的逻辑非常复杂。现在针对不同的后台语言有不同的插件可以使用。

四种web即使通讯技术比较

• 从兼容性角度考虑，短轮询>长轮询>长连接sse>websocket；
• 从性能方面考虑，websocket>长连接sse>长轮询>短轮询。

web push使用动机与原理简述

相对于移动端本地应用，web站点常常缺少一项常用的功能：推送通知。此处的推送通知一般指由浏览器实现的消息推送，换个说法，就是用户在打开浏览器时，不需要进入特定的网站，就能收到该网站推送而来的消息，例如：新评论、新动态等。

那么web push究竟是怎么样的一个流程，简单的说，可以分为三个步骤：

• 客户端完成请求订阅一个用户的逻辑
• 服务器调用遵从web push协议的接口，传送消息推送(push message)到推送服务器(该服务器由浏览器决定，开发者能做的只有控制发送的消息)
• 推送服务器将该消息推送到对应的浏览器买用户收到该推送

第一步，客户端发送订阅用户，过程如下：

说明一下这三步：

在第一步之前，应用服务器需要生成应用服务器密钥(application server keys)，其作用是标识该服务器，保证每次发送消息推送的都是同一个服务器。然后，客户端将会请求用户授权消息推送，一旦用户授权，浏览器就会生成一个pushscription，然后这个pushscription将会被发送至服务器，存入数据库，在后面的消息推送中使用。

第二步，应用服务器发送web push协议标准的api，触发推送服务器的消息推送，其中headers必须配置正确，且传入的数据必须是比特流。

应用服务器发送消息推送请求(目的是为了将更新推送到用户的浏览器)，为了向推送服务器发送请求，需要查看先获得的pushscription，取出其中的endpoint，即为推送服务器配置给改用户的访问点。