大数据Web可视化分析系统开发

下载地址

https://tomcat.apache.org/download-70.cgi

打开我们的idea

这些的话都可以按照自己的需求来修改

在这里新建包

新建一个java类

package com.spark.service;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class WeblogService {
    public static void queryWeblogs() throws Exception {
        Connection conn=null;
        PreparedStatement pst=null;
        String url ="jdbc:mysql://bigdata-pro01.kfk.com:3306/test";
        String username="root";
        String password="root";
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn= DriverManager.getConnection(url,username,password);
            String query_sql="select titleName,count from webCount where 1=1 order by count desc limit 20";
            pst=conn.prepareStatement(query_sql);
            ResultSet rs=pst.executeQuery();
             int i=0;
            while (rs.next()){
                String titleName= rs.getString("titleName");
                String titleCount= rs.getString("count");
                WeblogSocket.titleName[i]=titleName;
                WeblogSocket.titleCount[i]=titleCount;
                ++i;
            }
        }catch (Exception e){
              e.printStackTrace();
        }
    }
}

再新建一个类

我们把tomcat包加载进来

把这些包拷贝到工程目录下

还需要把这些包引进来

写入代码

package com.spark.service;

import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

import com.alibaba.fastjson.JSON;

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")

public class WeblogSocket {

         public static String[] titleName = new String[];

         public static String[] titleCount = new String[];

         //public static String[] titleSum = new String[1];

    @OnMessage

        public void onMessage(String message,Session session)

            throws Exception {

          while (true){

              WeblogService.queryWeblogs();

               Map<String,Object> map =new HashMap<String, Object>();

              map.put("titleName", titleName);

              map.put("titleCount",titleCount);

             // map.put("titleSum", titleSum);

              session.getBasicRemote().

                      sendText(JSON.toJSONString(map));

              Thread.sleep();

              map.clear();

          }

    }

    @OnOpen

    public void onOpen () {

        System.out.println("Client connected");

    }

    @OnClose

    public void onClose () {

        System.out.println("Connection closed");

    }

}

下载地址

http://echarts.baidu.com/download.html

官网地址 http://jquery.com/

我们拷贝到webapp底下

我们进到echars的官方实例去看看

http://echarts.baidu.com/examples/#chart-type-bar

点进来

把左边的代码修改之后

新建一个html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/echarts.min.js"></script>

    <script src="js/jquery-3.2.1.js"></script>

    <style>

        body{

            text-align:center;

            background-color: #dbdddd;

        }

        .div{ margin:0 auto; width:1000px; height:800px; border:1px solid #F00}

        /* css注释：为了观察效果设置宽度 边框 高度等样式 */

    </style>

</head>

<body>

<h1>卡弗卡大数据 — 新闻网话题用户浏览实时统计分析</h1>

<div>

    <div id="main" style="width:880px;height: 700px;float:left;">第一个</div>

    <div id="sum" style="width:800px;height: 700px;float:left;">第二个</div>

</div>

<div>

    <input type="submit" value="实时分析" onclick="start()" />

</div>

<div id="messages"></div>

<script type="text/javascript">

    var webSocket = new WebSocket('ws://localhost:8888/websocket');

    var myChart = echarts.init(document.getElementById('main'));

    var myChart_sum = echarts.init(document.getElementById('sum'));

    webSocket.onerror = function(event) {

        onError(event)

    };

    webSocket.onopen = function(event) {

        onOpen(event)

    };

    webSocket.onmessage = function(event) {

        onMessage(event)

    };

    function onMessage(event) {

        var sd = JSON.parse(event.data);

        processingData(sd);

        titleSum(sd.titleSum);

    }

    function onOpen(event) {

    }

    function onError(event) {

        alert(event.data);

    }

    function start() {

        webSocket.send('hello');

        return false;

    }

    function processingData(json){

        var option = {

            backgroundColor: '#ffffff',//背景色

            title: {

                text: '新闻话题浏览量【实时】排行',

                subtext: '数据来自搜狗实验室',

                textStyle: {

                    fontWeight: 'normal',              //标题颜色

                    color: '#408829'

                },

            },

            tooltip: {

                trigger: 'axis',

                axisPointer: {

                    type: 'shadow'

                }

            },

            legend: {

                data: ['浏览量']

            },

            grid: {

                left: '3%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis: {

                type: 'value',

                boundaryGap: [0, 0.01]

            },

            yAxis: {

                type: 'category',

                data:json.titleName

            },

            series: [

                {

                    name: '浏览量',

                    type: 'bar',

                    label: {

                        normal: {

                            show: true,

                            position: 'insideRight'

                        }

                    },

                    itemStyle:{ normal:{color:'#f47209'} },

                    data: json.titleCount

                }

            ]

        };

        myChart.setOption(option);

    }

    function titleSum(data){

        var option = {

            backgroundColor: '#fbfbfb',//背景色

            title: {

                text: '新闻话题曝光量【实时】统计',

                subtext: '数据来自搜狗实验室'

            },

            tooltip : {

                formatter: "{a} <br/>{b} : {c}%"

            },

            toolbox: {

                feature: {

                    restore: {},

                    saveAsImage: {}

                }

            },

            series: [

                {

                    name: '业务指标',

                    type: 'gauge',

                    max:50000,

                    detail: {formatter:'{value}个话题'},

                    data: [{value: 50, name: '话题曝光量'}]

                }

            ]

        };

        option.series[0].data[0].value = data;

        myChart_sum.setOption(option, true);

    }

</script>

</body>

</html>

把这两个类的代码修改一下

package com.spark.service;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.util.HashMap;

import java.util.Map;

public class WeblogService {

    static String url ="jdbc:mysql://bigdata-pro01.kfk.com:3306/test";

    static String username="root";

    static String password="root";

    public  Map<String,Object> queryWeblogs()  {

        Connection conn=null;

        PreparedStatement pst=null;

        String[] titleNames = new String[20];

        String[] titleCounts = new String[20];

        Map<String,Object> retMap= new HashMap<String,Object>();

        try{

            Class.forName("com.mysql.jdbc.Driver");

            conn= DriverManager.getConnection(url,username,password);

            String query_sql="select titleName,count from webCount where 1=1 order by count desc limit 20";

            pst=conn.prepareStatement(query_sql);

            ResultSet rs=pst.executeQuery();

            int i=0;

            while (rs.next()){

                String titleName= rs.getString("titleName");

                String titleCount= rs.getString("count");

              titleNames[i]=titleName;

              titleCounts[i]=titleCount;

                ++i;

            }

            retMap.put("titleName", titleNames);

            retMap.put("titleCount",titleCounts);

        }catch (Exception e){

              e.printStackTrace();

        }

        return retMap;

    }

    public  String[] titleCount()  {

        Connection conn=null;

        PreparedStatement pst=null;

        String[] titleSums = new String[1];

        Map<String,Object> retMap= new HashMap<String,Object>();

        try{

            Class.forName("com.mysql.jdbc.Driver");

            conn= DriverManager.getConnection(url,username,password);

            String query_sql="select count(1) titleSum from webCount ";

            pst=conn.prepareStatement(query_sql);

            ResultSet rs=pst.executeQuery();

          if (rs.next()){

                String titleSum= rs.getString("titleSum");

                  titleSums[0]=titleSum;

            }

        }catch (Exception e){

            e.printStackTrace();

        }

        return titleSums;

    }

}

package com.spark.service;

import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

import com.alibaba.fastjson.JSON;

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/websocket")

public class WeblogSocket {

        WeblogService  weblogService = new WeblogService();

    @OnMessage

        public void onMessage(String message,Session session)

            throws Exception {

          while (true){

               Map<String,Object> map =new HashMap<String, Object>();

              map.put("titleName", weblogService.queryWeblogs().get("titleName"));

              map.put("titleCount",weblogService.queryWeblogs().get("titleCount"));

              map.put("titleCount",weblogService.titleCount());

              session.getBasicRemote().

                      sendText(JSON.toJSONString(map));

              Thread.sleep(5000);

              map.clear();

          }

    }

    @OnOpen

    public void onOpen () {

        System.out.println("Client connected");

    }

    @OnClose

    public void onClose () {

        System.out.println("Connection closed");

    }

}

我们之前的结构化流的处理我们还是跟web分开

报了这么一个错误，我们就是把那个文件干掉就行了

我们再来一次

把多余的包剔除掉

报错了

是因为相同的包冲突的原因

我们就导这些包进来就可以了

我们再编译一次

这次编译通过了

把刚刚打的包上传上来

接下来我们重新建一个web工程

从原来的拷贝过去

把js也拷贝过去

把lib包拷贝过去

把index.html文件也拷贝进来到web目录下

我们把web项目的包引进去

下面配置一下我们的tomcat

我们还要把tomcat的包加载进来

这样子我们的web项目就没有问题了

我们启动一下看看服务是否正常的

可以看到1099端口已经在使用了，那我们就换个端口1098

这明显不是我们想要的结果，这个界面不是我们的index.html,为了和前面的项目区分开来，我们用的端口号最好不要跟前面的一样

我们再跑一次tomcat

没有报任何错误

这才是我们想要的结果

不过这个经过分析是因为我前面的sparkStu工程还在跑着的原因，我忘记停下来了！

我们按下F12

出现错误了

我们的目录有问题

把这个目录激活

改下这里

改过来就不报错了

把这个工程改成maven工程

这样就把一个普通的工程变成了一个maven工程

添加这个依赖包

<dependencies>

        <dependency>

            <groupId>javax</groupId>

            <artifactId>javaee-api</artifactId>

            <version>7.0</version>

            <scope>provided</scope>

        </dependency>

    </dependencies>

然后我们再rebuid一下

再运行一下tomcat

是没什么问题，但是这个数据真他妈的恶心

在sparkStu_web工程里面加上这一段

这里把最后修改的代码附上（sparkStu_web工程的）

package com.spark.service;

import com.alibaba.fastjson.JSON;

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

import java.io.IOException;

import java.util.HashMap;

import java.util.Map;

@ServerEndpoint("/websocket")

public class WeblogSocket {

    WeblogService  weblogService = new WeblogService();

    @OnMessage

    public void onMessage(String message, Session session)

            throws IOException, InterruptedException {

        while(true){

            Map<String, Object> map = new HashMap<String, Object>();

            map.put("titleName", weblogService.queryWeblogs().get("titleName"));

            map.put("titleCount",weblogService.queryWeblogs().get("titleCount"));

            map.put("titleSum", weblogService.titleCount());

            session.getBasicRemote().

                    sendText(JSON.toJSONString(map));

            Thread.sleep(1000);

            map.clear();

        }

    }

    @OnOpen

    public void onOpen () {

        System.out.println("Client connected");

    }

    @OnClose

    public void onClose () {

        System.out.println("Connection closed");

    }

}

package com.spark.service;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.util.HashMap;

import java.util.Map;

/**

 * Created by Administrator on 2017/10/17.

 */

public class WeblogService {

    static String url ="jdbc:mysql://bigdata-pro01.kfk.com:3306/test";

    static String username="root";

    static String password="root";

    public  Map<String,Object> queryWeblogs() {

        Connection conn = null;

        PreparedStatement pst = null;

        String[] titleNames = new String[30];

        String[] titleCounts = new String[30];

        Map<String,Object> retMap = new HashMap<String, Object>();

        try{

            Class.forName("com.mysql.jdbc.Driver");

            conn = DriverManager.getConnection(url,username,password);

            String query_sql = "select titleName,count from webCount where 1=1 order by count desc limit 30";

            pst = conn.prepareStatement(query_sql);

            ResultSet rs = pst.executeQuery();

            int i = 0;

            while (rs.next()){

                String titleName = rs.getString("titleName");

                String titleCount = rs.getString("count");

                titleNames[i] = titleName;

                titleCounts[i] = titleCount;

                ++i;

            }

            retMap.put("titleName", titleNames);

            retMap.put("titleCount", titleCounts);

        }catch(Exception e){

            e.printStackTrace();

        }finally{

            try {

                if (pst != null) {

                    pst.close();

                }

                if (conn != null) {

                    conn.close();

                }

            }catch(Exception e){

                e.printStackTrace();

            }

        }

             return retMap;

    }

    public  String[] titleCount() {

        Connection conn = null;

        PreparedStatement pst = null;

        String[] titleSums = new String[1];

        try{

            Class.forName("com.mysql.jdbc.Driver");

            conn = DriverManager.getConnection(url,username,password);

            String query_sql = "select count(1) titleSum from webCount";

            pst = conn.prepareStatement(query_sql);

            ResultSet rs = pst.executeQuery();

            if(rs.next()){

                String titleSum = rs.getString("titleSum");

                titleSums[0] = titleSum;

            }

        }catch(Exception e){

            e.printStackTrace();

        }finally{

            try{

                if (pst != null) {

                    pst.close();

                }

                if (conn != null) {

                    conn.close();

                }

            }catch(Exception e){

                e.printStackTrace();

            }

        }

        return titleSums;

    }

}

启动tomcat

这边的工程我们也启动

让节点2的数据也跑起来这个时候保证kafka,flume等进程的开启，前面已经讲过很多次了

把表中的数据清除

可以看到实时监控是没有数据的

经过漫长的等待

看到实时在监控，数据发生变化

整个项目到现在为止全部结束了，真的好累啊，现在是凌晨3点了，

我真的感到很疲惫了，该回宿舍休息了，实验室的周围是那么安静的！！！！！！

大数据Web可视化分析系统开发的更多相关文章

新闻实时分析系统大数据Web可视化分析系统开发
1.基于业务需求的WEB系统设计 2.下载Tomcat并创建Web工程并配置相关服务下载tomcat,解压并启动tomcat服务. 1)新建web app项目创建好之后的效果 2)对tomcat进 ...
新闻网大数据实时分析可视化系统项目——21、大数据Web可视化分析系统开发
1.基于业务需求的WEB系统设计 2.下载Tomcat并创建Web工程并配置相关服务下载tomcat,解压并启动tomcat服务. 1)新建web app项目创建好之后的效果 2)对tomcat进 ...
学习Hadoop+Spark大数据巨量分析与机器学习整合开发-windows利用虚拟机实现模拟多节点集群构建
记录学习<Hadoop+Spark大数据巨量分析与机器学习整合开发>这本书. 第五章 Hadoop Multi Node Cluster windows利用虚拟机实现模拟多节点集群构建 5 ...
“基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统"已被《计算机时代》录用
今天收到<计算机时代>编辑部寄来的稿件录用通知,本人撰写的论文"基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统",已被<计算机时代>录 ...
OneAPM大讲堂 | 监控数据的可视化分析神器 Grafana 的告警实践
文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 概览 Grafana 是一个开源的监控数据分析和可视化套件.最常用于对基础设施和应用数据分析的时间序列数据进行可视化分析,也可以用 ...
学大数据一定要会Java开发吗？
Java是目前使用广泛的编程语言之一,具有的众多特性,特别适合作为大数据应用的开发语言.Java语言功能强大和简单易用,不仅吸收了C++语言的各种优点还摒弃了C++里难以理解的多继承.指针等概念. J ...
Impala简介PB级大数据实时查询分析引擎
1.Impala简介 • Cloudera公司推出,提供对HDFS.Hbase数据的高性能.低延迟的交互式SQL查询功能. • 基于Hive使用内存计算,兼顾数据仓库.具有实时.批处理.多并发等优点 ...
深入浅出聊Taier—大数据分布式可视化DAG任务调度系统
导读: 上周,袋鼠云数栈全新技术开源规划--DTMO(DTstack Meetup Online)的第一场直播圆满完成.袋鼠云数栈大数据开发专家.Taier项目主导人偷天为大家带来了<Taier ...
新闻网大数据实时分析可视化系统项目——2、linux环境准备与设置
1.Linux系统常规设置 1)设置ip地址使用界面修改ip比较方便,如果Linux没有安装操作界面,需要使用命令:vi /etc/sysconfig/network-scripts/ifcfg-e ...

随机推荐

URL编码规则
一.问题的由来问题:当url地址中包含&.+.%等特殊字符(主要是传递参数时,参数的内容中包含这些字符)时,地址无效.比如http://10.190.0.0:108/doc/test+des ...
深入理解ASP.NET MVC（5）
系列目录回顾系列的前4节深入剖析了ASP.NET URL路由机制,以及MVC在此基础上是如何实现Areas机制的,同时涉及到inbound和outbound很多细节部分.第2节中提到MvcRout ...
mysql程序之mysqld_safe详解
mysqld_safe命令 mysqld_safe是在Unix上启动mysqld服务器的推荐方法.mysqld_safe增加了一些安全特性,例如在发生错误时重新启动服务器,并将运行时信息记录到错误日志 ...
阿里云持续集成环境自动部署cordova项目热更新脚本
linux脚本: #!/bin/sh rm -rf /home/tomcat/xiecang_hybird_web/xiecang_hybird_web.zip rm -rf /home/tomcat ...
sort a given string
my solution: function order(words){ var splitToArr = words.split(' '), len = splitToArr.length, newA ...
HMM（隐马尔科夫模型）与分词、词性标注、命名实体识别
转载自 http://www.cnblogs.com/skyme/p/4651331.html HMM(隐马尔可夫模型)是用来描述隐含未知参数的统计模型,举一个经典的例子:一个东京的朋友每天根据天气{ ...
C# 中HttpClient的使用中同步异步问题
项目中遇到了这样的问题: 第一次 :HttpResponseMessage response = await httpClient.PostAsync(url, null);发送了一个post异步请求 ...
live555源码学习笔记之TaskScheduler
今天抽空研究了下live555的任务实现: TaskScheduler分为三种任务:socket handler,event handler,delay task.这三种任务的特点是,前两个加入执行队 ...
ActionScript3.0实现动态地图效果
14年的一个项目需求,研究了一下AS脚本.AS2.0是之前面向关系的语言,AS3.0之后开始走上面向对象路线. 现在附上当时的代码,里边包含很多细节和算法,重要的代码也都有注释,如果需要可以仔细看一下 ...
C++中的指针与引用的区别与联系
引用与指针实质上都是间接地指代另一个变量,引用相当于该变量的外号或者小名,而指针实质上是指向该变量的地址进而操作该变量区别1:指针的地址与该变量不同,但引用的地址与该变量相同相同 #include& ...

大数据Web可视化分析系统开发

大数据Web可视化分析系统开发的更多相关文章

随机推荐

热门专题