javascript之数据推送

我们使用ajax与后台服务进行交互，常常是通过触发事件来单次交互，但对于有些web应用来说，需要前台与后台保持长连接，前端不定时地接收后台推送的数据信息，

例如：股票行情分析、聊天室和网页在线游戏等。

怎么做到呢？

最笨的方法： 前端需要隔一段时间向服务器发送一次ajax，请求成本太昂贵呀，就好比，你每次约炮，都得开房，还是租一个便宜点儿房子合算。

所以不能这么做。

1.comet

原理：comet是基于HTTP长连接的服务器推送技术，是一种web应用架构，服务器会主动以异步的方式向客户端程序推送数据，而不需要客户端显示的发出请求，

当前端与服务器连接完一次后，保持长链接，让服务器来做推送，服务器利用缓存技术来实现

comet非常适合事件驱动的web应用，以及对交互性与实时要求很强的应用。

前端js代码

var xhr = (function(){
    if(typeof XMLHttpRequest != undefined){
           return new XMLHttpRequest
    }else{
           return new ActiveXObject("Microsoft.XMLHttp")
    }
})();

xhr.open("GET", url, true);
xhr.send(data);

xhr.onreadystatechange = function(){
      if(xhr.readyState == 3){
        if(xhr.status == 200){
                 xhr.responseText;
            }
      }
};

后台代码（这里用PHP实现）

<?php
        //设置响应输出头
        header("Content-Type:application/json;charset=UTF-8");
    header("Cache-Control:max-age=0");//去除缓存
        $i= 0;
        while($i<9){
             $i++;
             $res = ["success"=>"ok","text"=>i] ;//结果
             echo json_encode($res);
             //刷新页面流，不缓存
             ob_flush();
             flush();结束流
        }
?>

2.websocket

   没有Network请求，节省资源

   前端：

var socket,state=-1;
function connect(){
    console.log("Connection Begin:");
    if(socket == null || socket.readyState != 1){
        socket = new WebSocket(host);
    }

    socket.onerror = function(){
        console.log("Connection error!")
    }

    socket.onopen = function(e){
        console.log("Connection isavaliable!");
    }

    socket.onmessage = function(e){
        console.log("Receive ServerMessage Beign:");
        document.querySelector("#txtarea").innerHTML = e.data;
        console.log("Receive ServerMessage End!");
    }

    socket.onclose = function(e){
        console.log("Connection closed!");
        document.querySelector("#txtarea").innerHTML += "/n" + event.wasClean + ";" + event.code + ";" + event.reason;
    }
}

function send(){
    if(socket.readyState == 1){
        console.log("Send Message Begin:");
        var text = document.querySelector("#text").value;
        var message = {
            time : new Date(),
            clientId : "049";
        };
        if(text=="" || message == null){
            console.log("No date to send!");
            return;
        }
        socket.send(JSON.stringify(message));
        socket.send(text);
        console.log("Send Message End!");
    }else{
        console.log("Connection not aviliable,please create connection!");
    }
}

/**
 * Web Socket 任何时候都可以关闭，没有什么限制
 * 可以根据需求进行控制
 */
function disconnect(){
    console.log("Close Connection Begin:");

    socket.close();
}

   后端：需要使用node，个人不懂node，只是看了一点点，如果写错了，请见谅！ 去他地把，管她好不好看呢，自己约的炮，含着泪也得打完

var sys = require('sys');
var ws = require('websocket');
var server = ws.createServer();
server.addEventListener('connection',function(conn){//当客户端接入时
    conn.send('hi,'+conn.id);//向客户端发送消息
    conn.addEventListener('message',function(msg){//当收到客户端发来的消息时
        console.log('Recieved message :' + msg);
        var i=0;
        while(i<9){
            i++;
            server.broadcast(i);//向所有客户端广播消息
            conn.send(i);
        }
    });
});
server.addEventListener('close',function(conn){
    server.broadcast('Disconnected: ' + conn.id);
});
server.listen(8000);
console.log('Hello,Server is Running:8000');

3.SSE方式

   SSE: Server - Send Event   浏览器新API

   不需要ajax，可以实现实时动态刷新数据

var source = new EventSource(url);
function init(){
     source.onopen = function(){
         console.log('connect:' + this.readyState);
     }
     source.onmessage = function(e){
         console.log('Recieve:' + e.data);
    }
     source.onerror = function(e){
         console.log('error');
    }
}

init();

后台：还是php，请叫我P哥

<?php
    //设置响应输出头
    header("Content-Type:text/event-stream;charset=UTF-8");
    header("Access -Control-Aollow-Origin:http:/IP/");
    echo "data:现在是北京时间:".date('H:i:s')."<br/>"
?>

随着H5的发展，个人相信，这种数据推送技术会得到更广的应用