大数据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="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点了,
我真的感到很疲惫了,该回宿舍休息了,实验室的周围是那么安静的!!!!!!