废话不多说,直接上代码!
一、ajax轮询太过简单,这里不做介绍;
--------------------
二、ajax长轮询(servlet3.0才能使用)如下:
----------------------------
1、前端代码(递归调用):
<script type="text/javascript">
longloop();
function longloop(){
$.get("ontimeNews",function (data) {
console.log(data);
$("#onTimeNews").html(data);
longloop();
})
}
</script>
2、后台(采用spring提供的API):
@Controller
public class NewsController {
private DeferredResult<String> deferredResult ;
private Random r = new Random();
@RequestMapping("/news")
public String news(){
return "news";
}
@RequestMapping(value="/ontimeNews",produces = "text/html;charset=UTF-8")
@ResponseBody
public DeferredResult<String> ontimeNews(){
deferredResult = new DeferredResult<String>();
return deferredResult;
}
@Scheduled(fixedDelay = 5000)
public void refresh(){
if (deferredResult!=null){
int index = r.nextInt(Const.NEWS.length);
deferredResult.setResult(Const.NEWS[index]);
}
}
}
三、comet流方式(http长连接方式):
----------------------
1、前端代码:
<%@ page language = "java" contentType= "text/html; charset=UTF-8" pageEncoding= "UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>股票实时行情</title>
</head>
<body>
<h1>股票实时行情</h1>
<div>
<div>
<h2>(流方式)股票列表</h2>
</div>
<div>
<h2 id="hint"></h2>
</div>
<hr>
<div>
<div><p>Java公司</p><p id="c0" style="color:#F00"></p><b><p id="s0">历史股价:</p></b></div>
<div><p>C/C++公司</p><p id="c1" style="color:#F00"></p><b><p id="s1">历史股价:</p></b></div>
<div><p>PHP公司</p><p id="c2" style="color:#F00"></p><b><p id="s2">历史股价:</p></b></div>
<div><p>Python公司</p><p id="c3" style="color:#F00"></p><b><p id="s3">历史股价:</p></b></div>
</div>
<hr>
</div>
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (!!window.EventSource){
var source = new EventSource("stockOnTime");
source.onmessage=function (e) {
var dataObj = e.data;
console.log(dataObj);
var arr = dataObj.split(",");
$.each(arr,function (i,item) {
$("#c"+i).html("股价:"+item);
var s = $("#s"+i).html();
$("#s"+i).html(s+item+" ");
});
$("#hint").html("");
};
source.onopen=function (e) {
console.log("Conecting ....");
};
source.onerror=function () {
console.log("error ....");
};
}else{
$("#hint").html("Not support sse");
}
</script>
</body>
</html>
2、后台:
@Controller
public class StockController {
@RequestMapping("/stock")
public String news(){
return "stock";
}
@RequestMapping(value="/stockOnTime",produces = "text/event-stream;charset=UTF-8")
@ResponseBody
public String push(){
Random r = new Random();
try {
Thread.sleep(500);
} catch (InterruptedException e) {
e.printStackTrace();
}
StringBuilder sb = new StringBuilder("");
sb.append("retry:2000\n")
.append("data:")
.append((r.nextInt(100)+50)+",")
.append((r.nextInt(80)+45)+",")
.append((r.nextInt(60)+40)+",")
.append((r.nextInt(40)+35)+",")
.append("\n\n");
return sb.toString();
}
}
服务器推送技术总结
最新推荐文章于 2024-07-15 14:42:54 发布