背景：我是一名 JS/NodeJS 新手，通过“24 小时内的 NodeJS”工作。我在第 14 小时，这是一个使用 socket.io 的实时 Twitter 提要。我决定通过使用 Express 3 并rickshaw实时绘制包括“绝命毒师”与“权力的游戏”在内的推文数量来增加练习。（代码如下）
问题）：
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目录，因为我没有/publicor/static目录。既然rickshaw是作为依赖安装的，为什么rickshaw目录已经不可见了？
c) 有什么好的文档rickshaw吗？
包.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"
}
}
索引.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>
应用程序.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 );
});
});