服务器端推送技术

介绍服务器向浏览器推送数据的技术，包括：meta标签刷新页面、Ajax轮询、Comet、WebSocket、SSE

meta标签

在 Web早期，通过配置meta标签让浏览器自动刷新，从而实现服务器端的推送

 <META HTTP-RQUIV="Refresh" CONTENT=12>

优点：使用方式简单，可以在JS禁用情况下使用
缺点：不是实时更新数据，对服务器造成的压力大，带宽浪费多

Ajax轮询

Ajax隔一段时间（通常使用JavaScript的setTimeout函数）就去服务器查询是否有改变，从而进行增量式的更新。这种轮询方式是短轮询。

短论询.png

优点：比起meta刷新页面的方式降低了带宽
缺点：不是实时数据

Comet

Comet方式通俗的说就是一种长连接机制(long lived http)。同样是由Browser端主动发起请求，但是Server端以一种似乎非常慢的响应方式给出回答。这样在这个期间内，服务器端可以使用同一个connection把要更新的数据主动发送给Browser。因此请求可能等待较长的时间，期间没有任何数据返回，但是一旦有了新的数据，它将立即被发送到客户机。有两种实现方式：长轮询、流。

优点：实时性好（消息延时小）；性能好（能支持大量用户）
缺点：长期占用连接，丧失了无状态高并发的特点。

长轮询

长轮询把轮询颠倒了以下。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随机又发起一个到服务器的新请求。这一过程在页面打开期间一直持续不断。

长轮询.png

流

流是通过HTTP流实现的。不同与长轮询，它在页面的整个生命周期内只能使用一个HTTP连接。浏览器向服务器发送一个请求，服务器保持连接打开，然后周期性地向浏览器发送数据。

服务器端实现

<?php
    $i = 0;
    while(true){
        echo "Number is $i";
        flush();
        sleep(10);
        $i++;
    }

浏览器端实现

function createStreamingClient(url,progress,finished){
    var xhr = new XMLHttpRequest(),
        received = 0;
    xhr.open("get",url,true);
    xhr.onreadystatechange = function(){
        var result;
        if(xhr.readyState == 3){
            //只取得最新数据并调整计数器
            result = xhr.responseText.substring(received);
            received += result.length;

            //用新数据调用progress回调函数
            progress(result);
        }else if(xhr.readyState == 4){
            finished(xhr.responseText);
        }
    };
    xhr.send(null);
    return xhr; 
}

WebSocket

Web Sockets的目标是在一个单独的持久连接上提供全双工、双向通信。在JavaScript中创建了Web Socket之后。会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会从HTTP升级为Web Socket协议(ws、wss)。

服务器端nodejs实现

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});

浏览器端实现

var ws = new WebSocket("ws://localhost:8181");
ws.onopen = function (e) {
    console.log('Connection to server opened');
}
function sendMessage() {
    ws.send($('#message').val());
}

优点：实现了双向通信，能够实时接收到信息，能够跨域
缺点：需要浏览器支持

SSE

SSE(Server-Sent-Events,服务器发送事件) API 用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。

服务器端实现

var http = require("http");

http.createServer(function (req, res) {

    var fileName = "." + req.url;

    if (fileName === "./stream") {
        res.writeHead(200, {"Content-Type":"text/event-stream", 
                            "Cache-Control":"no-cache", 
                            "Connection":"keep-alive"});
        res.write("retry: 10000\n");
        res.write("event: connecttime\n");
        res.write("data: " + (new Date()) + "\n\n");
        res.write("data: " + (new Date()) + "\n\n");

        interval = setInterval(function() {
            res.write("data: " + (new Date()) + "\n\n");
        }, 1000);

        req.connection.addListener("close", function () {
            clearInterval(interval);
        }, false);
  }
}).listen(80, "127.0.0.1");

客户端实现

var es = null;
function startEventSource(url,processOneLine){
    if(es) es.close();
    es = new EventSouce(url);
    es.addEventListener("message",function(e){
        processOneLine(e.data);
    },false);
    es.addEventListener("error",handleError,false);
}

优点：能够即时获取数据，数据传输量小
缺点：只能单向通信，且需要浏览器支持

参考文献

JS高程(第三版)
Web端服务器推送技术原理分析
SSE：服务器发送事件,使用长链接进行通讯