一、主流服务器推送技术说明
1.1 需求与背景
若干年前,所有的请求都是由浏览器端发起,浏览器本身并没有接受请求的能力。所以一些特殊需求都是用ajax轮询的方式来实现的。
比如对于某些需要实时更新的数据(例如Facebook/Twitter 更新、股价更新、新的博文、赛事结果等)。又例如我们通过页面启动一个定时任务,前端想知道任务后台的的实时运行状态,就需要以较小的间隔,频繁的向服务器建立http连接询问定时任务是否完成,然后更新页面状态。但这样做的后果就是浪费大量流量,对服务端造成了巨大压力。
在html5被广泛推广之后,我们可以使用服务端主动推动数据的方式来,解决上面提到的问题。
1.2 服务端推送常用技术
1、全双工通信:WebSocket全双工的,全双工就是双向通信,http协议是“对讲机”之间的通话,那我们websocket就是移动电话。本质上是一个额外的tcp连接,建立和关闭时握手使用http协议,其他数据传输不使用http协议 ,更加复杂一些,比较适用于需要进行复杂双向实时数据通讯的场景。 2、服务端主动推送:SSE (Server Send Event)html5新标准,用来从服务端实时推送数据到浏览器端, 直接建立在当前http连接上,本质上是保持一个http长连接,轻量协议 。客户端发送一个请求到服务端 ,服务端保持这个请求直到一个新的消息准备好,将消息返回至客户端,此时不关闭连接,仍然保持它,供其它消息使用。SSE的一大特色就是重复利用一个连接来处理每一个消息(又称event)。
1.3 websocket与SSE比较
是否基于新协议 | 是否双向通信 | 是否支持跨域 | 编码难度 | |
---|---|---|---|---|
SSE | 否(Http ) |
否(服务器单向) | 否(Firefox 支持跨域) | 低 |
WebSocket | 是(ws ) |
是 | 是 | 略高 |
但是IE和Edge浏览器不支持SSE。 |
二、服务端推送事件SSE
2.1 模拟网络支付场景
ssetest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE</title>
</head>
<body>
<div id = "message"></div>
<script>
if (window.EventSource) {
var source = new EventSource('orderpay');
innerHTML = '';
source.addEventListener('message', function(e) {
innerHTML += e.data + "<br/>";
document.getElementById("message").innerHTML = innerHTML;
});
source.addEventListener('open', function(e) {
console.log("连接打开.");
}, false);
// 响应finish事件,主动关闭EventSource
source.addEventListener('finish', function(e) {
console.log("数据接收完毕,关闭EventSource");
source.close();
console.log(e);