Spark+Kafka构建实时分析Dashboard中pycharm运行app.py文件报错无效果图
运行app.py后平台显示报错如下图：
app.py代码如下：
import json
from flask import Flask, render_template
from flask_socketio import SocketIO
from kafka import KafkaConsumer
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
thread = None
consumer = KafkaConsumer('result')
def background_thread():
a = 0
b = 0
c = 0
d = 0
e = 0
for msg in consumer:
data_json = msg.value.decode('utf8')
data_list = json.loads(data_json)
for data in data_list:
if '优' in data.keys():
a = data['优']
elif '良' in data.keys():
b = data['良']
elif '轻度污染' in data.keys():
c = data['轻度污染']
elif '中度污染' in data.keys():
d = data['中度污染']
elif '重度污染' in data.keys():
e = data['重度污染']
else:
continue
result = str(a) + ',' + str(b) + ',' + str(c) + ',' + str(d) + ',' + str(e)
print(result)
socketio.emit('test_message',{'data':result})
@socketio.on('test_connect')
def connect(message):
print(message)
global thread
if thread is None:
thread = socketio.start_background_task(target=background_thread)
socketio.emit('connected', {'data': 'Connected'})
@app.route("/")
def handle_mes():
return render_template("index.html")
if __name__ == '__main__':
socketio.run(app,debug=True)
index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DashBoard</title>
<script src="static/js/socket.io.js"></script>
<script src="static/js/jquery-3.1.1.min.js"></script>
<script src="static/js/highcharts.js"></script>
<script src="static/js/exporting.js"></script>
<script type="text/javascript" charset="utf-8">
var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('connect', function() {
socket.emit('test_connect', {data: 'I\'m connected!'});
});
socket.on('test_message',function(message){
console.log(message);
var obj = eval(message);
var result = obj["data"].split(",");
$('#a').html(result[0]);
$('#b').html(result[1]);
$('#c').html(result[2]);
$('#d').html(result[3]);
$('#e').html(result[4]);
});
socket.on('connected',function(){
console.log('connected');
});
socket.on('disconnect', function () {
console.log('disconnect');
});
</script>
</head>
<body>
<div>
<b>A: </b><b id="a"></b>
<b>B: </b><b id="b"></b>
<b>C: </b><b id="c"></b>
<b>D: </b><b id="d"></b>
<b>E: </b><b id="e"></b>
</div>
<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series1 = this.series[0];
var series2 = this.series[1];
var series3 = this.series[2];
var series4 = this.series[3];
var series5 = this.series[4];
setInterval(function () {
var x = (new Date()).getTime(), // current time
count1 = $('#a').text();
y = parseInt(count1);
series1.addPoint([x, y], true, true);
count2 = $('#b').text();
z = parseInt(count2);
series2.addPoint([x, z], true, true);
count3 = $('#c').text();
m = parseInt(count3);
series1.addPoint([x, m], true, true);
count4 = $('#d').text();
n = parseInt(count4);
series2.addPoint([x, n], true, true);
count5 = $('#e').text();
l = parseInt(count5);
series1.addPoint([x, l], true, true);
}, 1000);
}
}
},
title: {
text: '各空气质量等级数量实时分析'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50
},
yAxis: {
title: {
text: '数量'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: '等级为优数量',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
},
{
name: '等级为良数量',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
},
{
name: '等级为轻度污染数量',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
},
{
name: '等级为中度污染数量',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
},
{
name: '等级为重度污染数量',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
</script>
</body>
</html>
工程目录结构：
谁知道到底是什么原因怎么解决啊？
