• 大数据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[20];
         public static String[] titleCount = new String[20];
         //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(5000);
              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="880px;height: 700px;float:left;">第一个</div>
    <div id="sum" style="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点了，
    

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

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              如何绕过chrome的弹窗拦截机制 
                
    自我介绍 
                
    注册页面的编写 
                
    Roadmap学习目标 
                
    Position 
                
    poj2506 Tiling 
                
    poj3278 Catch That Cow 
                
    poj3624 Charm Bracelet 
                
    钢条切割问题带你彻底理解动态规划 
                
    poj1328 Radar Installation 
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/braveym/p/8631292.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知