Skip to content
This repository
branch: master
Christophe Coenraets October 10, 2012
file 133 lines (103 sloc) 4.21 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Node Cellar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


    <script src="http://use.edgefonts.net/andika.js"></script>
    <script src="http://use.edgefonts.net/arvo.js"></script>

</head>

<html>
<body>

<div class="header">
    <div class="navbar navbar-fixed-top" style="z-index: 10;">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Real Time Analytics</a>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row-fluid" >

        <div id="content" class="span12">


            <div class="well span3" style="text-align: center;">
                    <h3>Right Now</h3>
                    <p id="connections" style="font-size: 96px;line-height: 96px;">0</p>
                    <h5>active visitors</h5>
            </div>

            <div class="span9">

                <legend>Real Time Activity</legend>
                <div class="row-fluid">
                    <table id="visits" class="table table-bordered table-striped table-condensed">
                        <thead>
                            <tr><td>URL</td><td>IP</td><td>Timestamp</td></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <legend>Page Views</legend>
                <div class="row-fluid">
                    <table id="pageViews" class="table table-bordered table-striped table-condensed">
                        <thead>
                            <tr><td>URL</td><td>Page Views</td></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <footer class="footer">
        <p>Built as a sample application with
            <a href="http://nodejs.org/">Node.js</a>,
            <a href="http://socket.io/">Socket.io</a>,
            <a href="http://expressjs.com/">Express</a>, and
        <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>,
        by <a href="http://coenraets.org" target="_blank">Christophe Coenraets</a>.<br/>
        The source code for this application is available in <a href="#">this repository</a> on GitHub.</p>
    </footer>

</div>

<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>

<script>

    var socket = io.connect();
    var pages = {};
    var lastPageId = 0;

    socket.on('connect', function () {

        console.log('Socket connected');

        socket.on('pageview', function (msg) {
            $('#connections').html(msg.connections);
            if (msg.url) {
                if ($('#visits tr').length > 10) {
                    $('#visits tr:last').remove();
                }
                $('#visits tbody').prepend('<tr><td>' + msg.url + '</td><td>' + msg.ip + '</td><td>' + msg.timestamp + '</td></tr>');

                if (pages[msg.url]) {
                    pages[msg.url].views = pages[msg.url].views + 1;
                    $('#page' + pages[msg.url].pageId).html(pages[msg.url].views);
                } else {
                    pages[msg.url] = {views: 1, pageId: ++lastPageId};
                    $('#pageViews tbody').append('<tr><td>' + msg.url + '</td><td id="page' + lastPageId + '">1</td></tr>');
                }

            }
        });

    });


</script>

</body>
</html>
Something went wrong with that request. Please try again.