实时响应数据之短轮询和长轮询

实时响应数据

在Web应用开发中，我们会经常需要实时响应数据，例如：网页聊天室、实时更新网页在线人数等很多的应用场景。我们前后端数据的交互，通常使用ajax进行交互，所以下面的两种方法都是基于ajax交互技术。

短轮询

下面我先给大家一个应用场景：网页聊天室，对方发信息过来，我们的前端界面必须马上响应出来，我们发信息过去，对方也要马上响应到前端界面。

解决问题的思路：
1.前端要不停地向后端发送请求（ajax请求）
2.两个人的聊天记录可以放置于缓存中（redis）
3.每次ajax访问请求，把缓存中的聊天数据重新响应到前端

短轮询，不停的询问请求，而且每次请求时间特别短，这就意味着前端要每隔很短的时间就发送一次ajax请求，不停的响应缓存中的数据到前端界面。这势必会增加服务器的压力，但是我还是将这样一种思想用代码展示下。

 //刷新聊天
    function flush() {
        $.ajax({
            url: "text",
            type: "POST",
            data: {name:name},
            async: false,
            success: function (data) {
                $(data).each(function () {
                //成功回调函数，遍历data数据，进行前端渲染，这里自由发挥
                })
            },
            error: function (XMLHttpRequest) {
                alert(XMLHttpRequest.status);
            }
        });
        setTimeout("flush()",1000); //一秒中后再次调用flush()方法 ，就这样不停的短轮询
    }

后端的请求大家就自由发挥了，你想要返回什么数据就返回什么数据，前端想怎么渲染就怎么渲染。
大家可以看到，短轮询以如此速度发送请求将给服务器造成巨大的压力，所以我推荐大家使用长轮询，下面就给大家介绍。

长轮询

长轮询概念：前端向服务器发送请求，一直保持着请求，直到服务器响应才结束这次请求，相比于短轮询的发送请求次数，可以说长轮询是巨大的优化。

类似于：好友发送消息给我，才局部响应到我的聊天界面，不用一直去请求刷新。

//这是前端的ajax请求
 function longConnection() {
            $.ajax({
                url : "long",
                type : "POST",
                success : function(data) {
                    if(data=="flush"){
                        alert("刷新");//后端请求判断返回字符串
                    }
                    longConnection(); //结束这次请求后，再次调用本身方法
                },
                error : function(XMLHttpRequest) {
                    alert(XMLHttpRequest.status);
                    longConnection();//发生异常错误后再次发起请求
                }
            });
        }
//光看前端的ajax请求看不出什么，看看后面的后端请求

@Controller
public class LongConnectionController {
@Autowired
private RedisTemplate redisTemplate;
private static final long TIMEOUT = 20000;// 超时时间设置为20秒，这个时间随便你设置
//我设置20s，代表我这次请求最多维持20s

@RequestMapping("/long")
@ResponseBody
public  String longConnection(HttpSession session)throws Exception{
    String msg="";
    long requestTime = System.currentTimeMillis(); //获取进入请求时间
        while(System.currentTimeMillis()-requestTime

我解释下上面的代码：
前端发送ajax请求过来，后端并不会马上响应，自然维持了这次请求的时间。后端请求设置了20s的超时时间，用一个while循环加时间戳循环20s，当判断有新消息时，马上break出while循环，返回数据给前端。

所以只要判断没有新消息，while循环就会维持20s，即这个请求会维持20s，当然我们可以设置更长的时间，这都不影响。

聊天室效果展示

挺好玩的，关于实时接收信息还有很多方法，以上就是介绍两种，欢迎大家评论！