长连接与echarts实现动态数据实时展示

一、需求

项目上提出了一个需求，说是需要做一个简单大气的页面，上方一排方块显示各个市区的当日业务数量，下方是一个柱状图表，动态的显示当日的业务数量。所谓动态就是要实时的显示业务数量，如果有业务的增加，数字会跳动，而且柱状图也会增长。

二、解决方案

1、不太好的方案

按照正常的想法，可以通过异步加载不断的向后台发起请求，对业务数量进行查询，将查询结果返回到前台后刷新数据。但是如果采用这种方式，就会有以下几个问题：

a、间断的持续异步访问后台会对服务器造成压力，占用过多的资源。

b、结合业务情况，数据量并不是每分每秒都在变化。如果在一段时间内业务量并没有变化，前台却做了多次查询请求，那么这些请求相当于是无意义的请求，进而也浪费了服务器资源。

其实这个方案的优点在于，实现方式简单。缺点是会对服务器造成压力，消耗不必要的资源。

2、改进后的方案

经过讨论之后，部门的大神提出这样的方案。在后台定时查询数据库得到业务数量的统计结果，并将结果保存在一个变量里。前台通过ajax向后台轮询请求，保持一个长连接。如果变量中的数据有了变化，则向前台返回结果，前台刷新数据，之后发起下一个长连接请求。这样，对于后台的访问次数会减小，几乎是只有数据变动的时候才会发起新的请求（之所以说是几乎是因为长连接尽量不要真的一直保持下去，所以在业务量没有变化的情况下，也会定时的关闭长连接并发起下一次链接）。我们将查询业务量的访问压力放在后台与数据库之间。而这部分压力对于服务器来说要比前台多次发起请求要小得多。

3、再一次改进？

就算是查询数据库的压力完全放到了后台和数据库之间的交互，但是，还是会存在数据量没有变化的多余查询。如果是在业务办理的同时向后台的变量写入记录，就可以让数据从之前的主动查询变成被动接受，由拉变推，这样可以真正的保证数据是实时变化的。但是问题又来了，我们要改造业务生成的方法，同时要做一个整体的变量以便于获取。但是这样实现的工作量太大，而且这个页面的数据展示只不过是一个简单的功能而已，因此我们没有考虑这种方法。所以最终选择使用第二种方案来实现这个功能。

三、代码实现

1、前台页面实现

a、数据展示

数据展示使用了echarts的柱状图显示。echarts是个很常用的前端图表插件。不过作为一个非专业前端码农，会用就行了。具体怎么用就直接看官方的文档吧，官方文档就已经很详细了。

b、长连接发起

我们通过ajax向后台发起异步请求，并保持长连接。代码如下：

//区划统计长连接查询
        function longPolling() {
            $.ajax({
                url: "${root!}/accept/statistics/wisdomdata/regionQueryLongPolling?regionCode=" + regionCode,
                data: {"timed": new Date().getTime()},
                dataType: "json",
                type: "POST",
                timeout: 20000,//设置为20s后断开连接
                error: function (XMLHttpRequest, textStatus, errorThrown) {//请求失败
                    //如果返回错误，根据错误信息进行相应的处理
                    //再次发起长连接
                    longPolling();
                },
                success: function (data) {//请求成功
                    //根据后台返回的数据对页面数据进行刷新
                    refresh(data)
                    longPolling();//刷新成功后发起新的长连接请求
                }
            });
        }

长连接成功返回数据后，我们根据获取的数据对页面数据进行刷新。因为使用的是echarts的柱状图，所以只需要重新封装echarts的数据，然后调用myChart的setOption方法将数据重新装载，就可以完成图表的刷新了。其实因为只是数据在变化，我们只需要将后台返回的数据放到一个数组里，然后修改series的data值即可。代码如下：

function refresh(data) {
            //后台是将各列的数据用【,】隔开返回到前台，所以可以通过split(",")来获取series中的data所需要的数组
            var regionTotal = data.regionTotal.split(",");
            var regionCodeArray = data.regionCodeArray.split(",");
            var regionNameArray = data.regionNameArray.split(",");
            //这里的series，option和myChart都是页面初始化时创建的变量，在此不表
            series[0]["data"] = regionTotal;//动态刷新
            option.series = series;
            myChart.setOption(option);
        }

2、后台逻辑实现

后台逻辑实现氛围两部分。一部分是响应前台请求，返回改变后的数据。另一部分是单独的一个线程，不断的对数据库进行查询获取最新的数据。

a、数据查询

我们先来看看后台与数据库交互的部分，这部分需要实现下面的功能：

要把实时查询出来的数据保存在后台以供前台随时获取。解决方法是使用一个内部类对数据进行保存。

代码如下：

  class RegionQuery{
        private boolean isOpen = false;//查询线程是否已经开启
        public List<String> regionCodelist = new ArrayList<String>();//需要动态查询的区划code
        public List<String> regionNamelist = new ArrayList<String>();//需要动态查询的区划name
        public List<String> loadingList = new ArrayList<String>();//当前线程已经加入动态查询的区划
        public Map<String, JSONObject> regionCountMap = new HashMap<String, JSONObject>();//动态保存最新的区划业务数量
        public RegionQuery(){
            String[] regionArray = {"00001","00002","00003","00004"};
            String[] regionNameArray = {"北京市","上海市","广州市","深圳市"};
            regionCodelist = Arrays.asList(regionArray);
            regionNamelist = Arrays.asList(regionNameArray);
            this.isOpen= false;
        }
        public boolean isOpen() {
            return isOpen;
        }
        public void setOpen(boolean open) {
            isOpen = open;
        }
    }

要不间断的对数据库中的数据进行查询。解决方法是在第一次访问这个页面时，启动一个线程对数据库进行循环查询，并将数据保存在后台内部类。

代码片段如下：

//开启一个线程来获取regionQuery类的数据，这个线程是写在刚进入展示页面的方法中
            if (!regionQuery.isOpen()) {//如果未开启线程，就进行开启
                new Thread(){
                    public void run(){
                        regionQuery.setOpen(true);//标志进程已开启
                        while (true) {
                            try {
                                //循环查询当前loading列表的区划数据
                                for(int i=0;i<regionQuery.loadingList.size();i++){
                                    String code = regionQuery.loadingList.get(i);//当前区划
                                    String name = regionQuery.regionNamelist.get(regionQuery.regionCodelist.indexOf(code));//当前区划名
                                    JSONObject jsonObject = wisdomRegionQuery(code,name,"month");//wisdomRegionQuery是对数据库进行业务量查询的方法，在这里就不放代码了。返回的是个JSONObject，其中各区的业务量数字是放在key为regionTotal的键值对中
                                    regionQuery.regionCountMap.put(code, jsonObject);
                                }
                                Thread.sleep(5000);//等待5秒钟继续进行查询
                            } catch (ParseException e) {
                                e.printStackTrace();
                                logger.error(e.getMessage());
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                                logger.error(e.getMessage());
                            }
                        }
                    }
                }.start();
            }

b、响应前台请求返回数据

在数据发生变化时，向保持长连接的前台请求返回最新的数据。解决方法是，我们将本次查询的数据保存在session中，在后续的查询时将新的数据与session中的数据做对比。如果数据发生变化，则将新数据返回前台，同时更新session中的数据。

代码如下：

 /**
     * 长连接动态获取当前区划统计值
     * @param response
     */
    @RequestMapping(value = "/regionQueryLongPolling", method = RequestMethod.POST)
    public void regionQueryLongPolling(HttpServletResponse response) {
        String regionCode = this.getPara("regionCode");
        //判断session是否有当前查询区划的数据
        HttpSession session = request.getSession();
        if (session.getAttribute(regionCode) == null) {
            JSONObject tempJson = new JSONObject();
            tempJson.put("regionTotal", "0");
            session.setAttribute(regionCode,tempJson);//以json格式保存区划名称业务量等相关信息
        }
        JSONObject result = new JSONObject();
        result.put("code", SYSTEM_ERROR);
        try {
            for(int i=0;i<21;i++){//设置21秒后退出循环
                JSONObject sessionJson = (JSONObject) session.getAttribute(regionCode);
                JSONObject regionCountMapJson = (JSONObject) regionQuery.regionCountMap.get(regionCode);
                if(!sessionJson.getString("regionTotal").equals(regionCountMapJson.getString("regionTotal"))){
                    //如果数据有变化则返回值并跳出循环
                    result.put("code", SYSTEM_SUCCESS);
                    result.putAll(regionCountMapJson);
                    session.setAttribute(regionCode,regionCountMapJson);
                    break;
                }
                Thread.sleep(1000);//等待一秒钟保持连接
            }
        } catch (Exception e) {
            e.printStackTrace();
            logger.error(e.getMessage());
            result.put("code", SYSTEM_ERROR);
        }
        this.renderJson(response, result.toString());// 返回数据
    }

四、总结

这个案例的核心在于两点，第一点，是使用长连接保持前台与后台之间的连接，只有数据改变时再返回数据。第二点，是在后台抛出一个线程不断的对数据库进行查询，并将结果保存到一个内部类里。整体实现了查询数据和展示动态数据的分离，减少前台页面对服务器的访问压力。毕竟自己的技术不够成熟，对于方案的实现，依旧会有考虑欠缺的地方，希望有大神能够指正。

同时，这个案例也有很多需要改进的地方，比如，抛出的用来查询数据的线程没有结束的时候，就会一直跑下去，这一点应该会造成隐患。也许我们可以根据，是否还有人保留这个数据展示页面，来控制这个线程的状态。这就等以后有时间的时候，再去研究啦。

参考资料：

echarts官网实例：http://echarts.baidu.com/examples.html

长连接长轮询：http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html