大数据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 ...

随机推荐

Ubuntu server 运行.net core api 心得
1.安装.net core sdk 在微软.net core 安装页面找到linux 安装,按照步骤安装好 2.安装mysql 参考 Ubuntu安装mysql 3.配置mysql 1.需要将mysq ...
java 中 heap（堆）和stack（栈）的区别
总结在Java里面Heap和Stack分别存储数据的不同. 区别项 Heap(堆) Stack(栈) JVM中的功能内存数据区内存指令区存储数据对象实例(注1) 基本数据类型, 指令代码,常量 ...
mybatis 一对多，（多对一，一对一
多对一,和一对一是同一种写法,每种写法又分在数据库关联和在mybatis关联 1,多对一,一对一数据库关联 2,多对一,一对一mybatis关联 3,一对多,数据库关联,注意,Java type改of ...
tensorflow学习笔记
常量的四则运算 import tensorflow as tf data1 = tf.constant(2) data2 = tf.constant(10) dataAdd=tf.add(data1, ...
C# 使用委托实现多线程调用窗体的四种方式（转）
1.方法一:使用线程功能描述:在用c#做WinFrom开发的过程中.我们经常需要用到进度条(ProgressBar)用于显示进度信息.这时候我们可能就需要用到多线程,如果不采用多线程控制进度条,窗口 ...
Go hashcode 输入一个字符串，得到一个唯一标识码
如何输入一个字符串,得到一个唯一的hashcode? 例子如下: package main import ( "fmt" "hash/crc32" ) // S ...
centos6 只安装mysql client（安装包安装和yum安装mysql）
方法一下载安装: 1.在/home创建mysql目录,下载如下四个软件包 http://mirrors.sohu.com/mysql/MySQL-5.7/ wget http://mirrors.so ...
position实现分层和遮罩层功能
很多网站,当点了一个按钮后,弹出一个窗口,底层变透明不可选,就是用到层的概念,至少三层第一层,底层原始层第二层,遮罩层,用到positon: fixed; top bottom left righ ...
禁止用键盘左右箭头，去切换PageControl页签
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
[原抄] Potplayer 1.7.2710 快捷键
对着软件一个一个抄下来的. 打开文件:Ctrl+O[F3] / 简索文件:F12 / 最后文件 Ctrl+Y / 关闭:F4 打开摄像头:Ctrl+J / 打开DVD设备 Ctrl+D 播放.暂停:空 ...

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

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

随机推荐

热门专题