你的位置:首页 > Java教程

[Java教程]javascript之数据推送


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

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

      怎么做到呢?

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

      所以不能这么做。

1.comet

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

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

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

   前端js代码

var xhr = (function(){  if(typeof  undefined){      return new else{      return new ActiveXObject("Microsoft.)  }})();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的发展,个人相信,这种数据推送技术会得到更广的应用