背景:我是一个JS / NodeJS newb,通过“24小时NodeJS”工作。我是在14小时,这是一个使用socket.io的实时Twitter提要。我决定通过使用Express 3和rickshaw
来增加练习,以获得包含“Breaking Bad”和“权力的游戏”的推文的实时情节。 (代码如下)
问题(S):
a)即使书籍示例使用Express,它实际上并不使用Express来生成Express目录结构。我假设Express只是一个库,项目创建方面,例如$ express twitter_feed
不是强制性的。正确的吗?
b)我问a)的原因是,在我的app.js文件中,我必须使用app.use(express.static( __dirname + '/node_modules'));
来配置express.static中间件,以便index.html可以访问rickshaw
脚本。请注意,我实际上引用了node_modules
目录,因为我没有/public
或/static
目录。由于rickshaw
是作为依赖项安装的,为什么rickshaw
目录不可见?
c)rickshaw
是否有好的文档?
的package.json
{
"name":"socket.io-twitter-example",
"version": "0.0.1",
"private": "true",
"dependencies": {
"express": ">=2.5.4",
"ntwitter": ">=0.2.10",
"socket.io": ">=0.8.7",
"rickshaw": ">=1.1.0"
}
}
的index.html
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>Socket.IO Twitter Example</title>
</head>
<body>
<h1>Socket.IO Twitter Example</h1>
<ul class="percentage">
<li class = "love"></li>
<li class = "hate"></li>
</ul>
<style>
#chart_container {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#legend {
display: inline-block;
vertical-align: top;
margin: 0 0 0 10px;
}
</style>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
</div>
<div id ="legend"></div>
<ul class="tweets"></ul>
<link type="text/css" rel="stylesheet" href="/rickshaw/rickshaw.min.css">
<script src="rickshaw/vendor/d3.min.js"></script>
<script type="text/javascript" src="/rickshaw/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/rickshaw/rickshaw.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// graph instantiation starts here
// instantiate the graph, y-axis, legend
var tv = 100;
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 500,
height: 250,
renderer: 'line',
series: new Rickshaw.Series.FixedDuration([{ name: 'Breaking Bad' }], undefined, {
timeInterval: tv,
maxDataPoints: 100,
timeBase: new Date().getTime() / 1000
})
} );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
var legend = new Rickshaw.Graph.Legend( {
element: document.querySelector('#legend'),
graph: graph
} );
graph.render();
// graphing instatiation ends here
var socket = io.connect();
jQuery(function ($) {
var tweetList = $('ul.tweets'),
loveCounter = $('li.love'),
hateCounter = $('li.hate');
socket.on('tweet', function (data) {
tweetList
.prepend('<li>' + data.user + ': ' + data.text + '</li>');
loveCounter
.text('B Bad: ' + data.love + '%');
hateCounter
.text('G o T: ' + data.hate + '%');
// graph update script starts here
var gdata = {
one : data.love,
two : data.hate
};
graph.series.addData(gdata);
graph.update();
// graph update script stops here
});
});
</script>
</body>
</html>
app.js
var express = require('express'),
app = express(),
twitter = require('ntwitter'),
socket = require('socket.IO'),
http = require('http'),
server = http.createServer(app),
io = socket.listen(server),
love = 0,
hate = 0;
total = 0;
server.listen(3000);
app.use(express.static( __dirname + '/node_modules'));
var twit = new twitter({
consumer_key: 'xxx',
consumer_secret: 'xxx',
access_token_key: 'xxx',
access_token_secret: 'xxx'
});
twit.stream('statuses/filter', { track: ['breaking bad', 'thrones'] }, function(stream){
stream.on('data', function (data) {
io.set('log level', 0); //stops debug messages completely?
var text = data.text.toLowerCase();
if (text.indexOf('breaking bad') !== -1) {
love++;
total++;
}
if (text.indexOf('game of thrones') !== -1) {
hate++;
total++;
}
io.sockets.volatile.emit('tweet', {
user: data.user.screen_name,
text: data.text,
love: Math.round((love/total)*100),
hate: Math.round((hate/total)*100)
});
//console.log(data.user.screen_name + ': ' + data.text );
});
});