Nodejs&内联代码的客户端依赖关系

时间:2013-08-01 19:59:42

标签: javascript node.js express

背景:我是一个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 );
        });
    });

0 个答案:

没有答案