├── .bowerrc
├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── index.js
├── package.json
└── public
    ├── capture.html
    ├── capture2.html
    ├── dashboard
        ├── css
        │   └── style.css
        ├── index.html
        └── js
        │   └── dashboard.js
    └── index.html


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "public/bower_components"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 | 
22 | # Dependency directory
23 | # Deployed apps should consider commenting this line out:
24 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
25 | node_modules
26 | public/bower_components
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Phil Leggetter
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SocketAlytics
2 | 
3 | The code for a Real-Time Analytics dashboard powered by Socket.IO.
4 | 
5 | ## Tutorial
6 | 
7 | [Build a real-time app with Socket.IO](http://www.creativebloq.com/web-design/build-real-time-app-socketio-11514083).
8 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "socketalytics",
 3 |   "main": "index.js",
 4 |   "version": "0.0.1",
 5 |   "homepage": "https://github.com/leggetter/socketalytics",
 6 |   "authors": [
 7 |     "leggetter <phil@leggetter.co.uk>"
 8 |   ],
 9 |   "keywords": [
10 |     "analytics",
11 |     "socket.io"
12 |   ],
13 |   "license": "MIT",
14 |   "private": true,
15 |   "ignore": [
16 |     "**/.*",
17 |     "node_modules",
18 |     "bower_components",
19 |     "public/bower_components",
20 |     "test",
21 |     "tests"
22 |   ],
23 |   "dependencies": {
24 |     "jquery": "~2.1.1",
25 |     "bootstrap": "~3.1.1",
26 |     "epoch": "~0.5.2",
27 |     "d3": "~3.4.9",
28 |     "socket.io-client": "~1.0.6",
29 |     "modernizer": "~2.8.2"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var express = require( 'express' );
 2 | var app = express();
 3 | app.use( express.static( __dirname + '/public') );
 4 | 
 5 | var server = require( 'http' ).Server( app );
 6 | var io = require( 'socket.io' )( server );
 7 | 
 8 | // Store data
 9 | var stats = {
10 |   connections: 0,
11 |   touch: 0,
12 |   video: 0,
13 |   pages: {}
14 | };
15 | 
16 | // Map of Socket.id to Socket object
17 | var socketData = {};
18 | 
19 | // Namespace use when capturing data
20 | var capture = io.of( '/capture' );
21 | 
22 | capture.on( 'connection', function( socket ) {
23 |   ++stats.connections;
24 | 
25 |   socket.on( 'client-data', function( data ) {
26 |     socketData[ socket.id ] = data;
27 |     stats.touch += ( data.touch? 1 : 0 );
28 |     stats.video += ( data.video? 1 : 0 );
29 | 
30 |     var pageCount = stats.pages[ data.url ] || 0;
31 |     stats.pages[ data.url ] = ++pageCount;
32 | 
33 |     console.log( stats );
34 |     dashboard.emit( 'stats-updated', stats );
35 |   } );
36 | 
37 |   socket.on( 'disconnect', function() {
38 |     // Clear down stats for lost socket
39 |     --stats.connections;
40 | 
41 |     stats.touch -= ( socketData[ socket.id ].touch? 1 : 0 );
42 |     stats.video -= ( socketData[ socket.id ].video? 1 : 0 );
43 |     --stats.pages[ socketData[ socket.id ].url ];
44 |     delete socketData[ socket.id ];
45 | 
46 |     console.log( stats );
47 |     dashboard.emit( 'stats-updated', stats );
48 |   } );
49 | 
50 | } );
51 | 
52 | var dashboard = io.of( '/dashboard' );
53 | dashboard.on( 'connection', function( socket ) {
54 |   // Send an update to the newly connected dashboard socket
55 |   socket.emit( 'stats-updated', stats );
56 | } );
57 | 
58 | server.listen( 3000, function(){
59 |   console.log( 'listening on *:3000' );
60 | } );
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "socketalytics",
 3 |   "version": "0.0.0",
 4 |   "description": "Example realtime analytics using Socket.IO",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/leggetter/socketalytics"
12 |   },
13 |   "keywords": [
14 |     "socket.io",
15 |     "analytics"
16 |   ],
17 |   "author": "Phil Leggetter <phil@leggetter.co.uk> (http://www.leggetter.co.uk)",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/leggetter/socketalytics/issues"
21 |   },
22 |   "homepage": "https://github.com/leggetter/socketalytics",
23 |   "dependencies": {
24 |     "socket.io": "~1.0.4",
25 |     "express": "~4.4.3"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/public/capture.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <body>
 4 |     <h1>Capture</h1>
 5 |     <script src="/bower_components/socket.io-client/socket.io.js"></script>
 6 |     <script src="/bower_components/modernizer/modernizr.js"></script>
 7 |     <script>
 8 |       var socket = io( 'localhost:3000/capture' );
 9 |       socket.on( 'connect', function() {
10 |         console.log( 'connected' );
11 | 
12 |         var data = {
13 |           url: window.location.href,
14 |           webgl: Modernizr.webgl,
15 |           touch: Modernizr.touch,
16 |           video: Modernizr.video,
17 |           websocket: Modernizr.websockets
18 |         };
19 | 
20 |         socket.emit( 'client-data', data );
21 |       } );
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/public/capture2.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <body>
 4 |     <h1>Capture</h1>
 5 |     <script src="/bower_components/socket.io-client/socket.io.js"></script>
 6 |     <script src="/bower_components/modernizer/modernizr.js"></script>
 7 |     <script>
 8 |       var socket = io( 'localhost:3000/capture' );
 9 |       socket.on( 'connect', function() {
10 |         console.log( 'connected' );
11 | 
12 |         var data = {
13 |           url: window.location.href,
14 |           webgl: Modernizr.webgl,
15 |           touch: Modernizr.touch,
16 |           video: Modernizr.video,
17 |           websocket: Modernizr.websockets
18 |         };
19 | 
20 |         socket.emit( 'client-data', data );
21 |       } );
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/public/dashboard/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font: 400 0.95em/1 "Proxima Nova", Helvetica,sans-serif;
 3 |   font-size: .875em;
 4 |   background-color: #f0f0f0;
 5 | 
 6 |   padding-top: 90px;
 7 | }
 8 | 
 9 | .widget {
10 |   -webkit-box-shadow: #f0f0f0 0 0 8px;
11 |   -moz-box-shadow: #f0f0f0 0 0 8px;
12 |   box-shadow: #f0f0f0 0 0 8px;
13 |   background-color: #f0f0f0;
14 | 
15 |   margin-bottom: 30px;
16 | }
17 | 
18 | .widget h1 {
19 |   font-size: 1.0em;
20 |   margin: 0 0 .4em;
21 |   font-weight: bold;
22 | }
23 | 
24 | .widget .widget-inner>header, .widget .widget-inner>footer {
25 |   font-size: 12px;
26 |   text-shadow: 1px 1px #0e0e0e;
27 | }
28 | 
29 | .widget .widget-inner>header {
30 |   background-color: #272727;
31 |   text-transform: uppercase;
32 |   padding: 16px 12px 16px 26px;
33 |   font-weight: 700;
34 | }
35 | 
36 | .widget .widget-inner {
37 |   border: solid 1px #e5e5e5;
38 |   background-color: #fff;
39 | }
40 | 
41 | .widget .widget-inner>header {
42 |   background-color: #f5f5f5;
43 | }
44 | 
45 | .widget .widget-inner>header h1 {
46 |   color: #8b8b8b;
47 |   text-shadow: 1px 1px #fff;
48 |   margin-bottom: 0;
49 | }
50 | 
51 | .widget .widget-body {
52 |   color: #666;
53 | 
54 |   height: 225px
55 | }
56 | 
57 | .widget .widget-body {
58 |   padding: 16px;
59 |   color: #d3d4d4;
60 |   font-family: Helvetica, Arial, sans-serif;
61 |   z-index: 1;
62 | }
63 | 
64 | .widget .widget-inner>footer {
65 |   color: #8b8b8b;
66 |   background-color: #f5f5f5;
67 |   text-shadow: 1px 1px #fff;
68 | }
69 | 
70 | .dash-unit {
71 |   margin-bottom: 30px;
72 |   padding-bottom: 10px;
73 |   border: 1px solid #e5e5e5;
74 |   /*background-image: url('../img/sep-half.png');*/
75 |   background-color: #f5f5f5;
76 |   color: #8b8b8b;
77 |   height: 290px;
78 |   text-align: center;
79 | }
80 | 
81 | .dash-unit dtitle {
82 |   font-size: 11px;
83 |   text-transform: uppercase;
84 |   margin: 8px;
85 |   padding: 0px;
86 |   height: inherit;
87 | }
88 | 
89 | .dash-unit hr {
90 |   border: 0;
91 |   border-top: 1px solid #151515;
92 |   border-top-style: dashed;
93 |   margin-top: 3px;
94 | }
95 | 


--------------------------------------------------------------------------------
/public/dashboard/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <title>SocketAlytics</title>
  5 | 
  6 |     <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  7 |     <link href="../bower_components/epoch/epoch.0.5.2.min.css" rel="stylesheet" />
  8 |     <link href="css/style.css" rel="stylesheet" />
  9 | 
 10 |   </head>
 11 |   <body>
 12 | 
 13 |     <div class="navbar-nav navbar-inverse navbar-fixed-top">
 14 |         <div class="container">
 15 |         <div class="navbar-header">
 16 |           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 17 |             <span class="icon-bar"></span>
 18 |             <span class="icon-bar"></span>
 19 |             <span class="icon-bar"></span>
 20 |           </button>
 21 |           <a class="navbar-brand" href="flot.html">
 22 |             SocketAlytics Dashboard
 23 |           </a>
 24 |         </div>
 25 |           <div class="navbar-collapse collapse">
 26 |             <ul class="nav navbar-nav">
 27 |               <li class="active">
 28 |                 <!-- <a href="index.html">
 29 |                   <i class="icon-home icon-white"></i> Home
 30 |                 </a> -->
 31 |               </li>
 32 |             </ul>
 33 |           </div><!--/.nav-collapse -->
 34 |         </div>
 35 |     </div>
 36 | 
 37 |     <div class="container">
 38 | 
 39 |       <div class="row">
 40 | 
 41 |         <div class="col-sm-12 col-lg-12">
 42 |           <article class="widget">
 43 |             <div class="widget-inner">
 44 | 
 45 |               <header>
 46 |                 <h1>Visitors (30D)</h1>
 47 |               </header>
 48 | 
 49 |               <section class="widget-body">
 50 |                 <div id="visitors" class="epoch" style="height: 200px;"></div>
 51 |               </section>
 52 | 
 53 |             </div><!-- .widget-inner -->
 54 | 
 55 |           </article>
 56 |         </div>
 57 | 
 58 |       </div>
 59 | 
 60 |       <div class="row">
 61 | 
 62 |         <div class="col-sm-6 col-lg-6">
 63 |           <article class="widget">
 64 |             <div class="widget-inner">
 65 | 
 66 |               <header>
 67 |                 <h1>Popular Pages</h1>
 68 |               </header>
 69 | 
 70 |               <section class="widget-body">
 71 |                 <div id="pages" class="epoch" style="height: 200px;"></div>
 72 |               </section>
 73 | 
 74 |             </div><!-- .widget-inner -->
 75 | 
 76 |           </article>
 77 |         </div>
 78 | 
 79 | 
 80 |         <div class="col-sm-3 col-lg-3">
 81 |           <article class="widget">
 82 |             <div class="widget-inner">
 83 | 
 84 |               <header>
 85 |                 <h1>Touch Support</h1>
 86 |               </header>
 87 | 
 88 |               <section class="widget-body">
 89 |                 <div id="touch" class="epoch gauge-medium"></div>
 90 |               </section>
 91 | 
 92 |             </div><!-- .widget-inner -->
 93 | 
 94 |           </article>
 95 |         </div>
 96 | 
 97 |         <div class="col-sm-3 col-lg-3">
 98 |           <article class="widget">
 99 |             <div class="widget-inner">
100 | 
101 |               <header>
102 |                 <h1>Video Support</h1>
103 |               </header>
104 | 
105 |               <section class="widget-body">
106 |                 <div id="video" class="epoch gauge-medium"></div>
107 |               </section>
108 | 
109 |             </div><!-- .widget-inner -->
110 | 
111 |           </article>
112 |         </div>
113 | 
114 |       </div>
115 | 
116 |     </div>
117 | 
118 |   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
119 |   <script src="../bower_components/d3/d3.min.js"></script>
120 |   <script src="../bower_components/epoch/epoch.0.5.2.min.js"></script>
121 |   <script src="../bower_components/socket.io-client/socket.io.js"></script>
122 |   <script src="js/dashboard.js"></script>
123 | </body>
124 | </html>
125 | 


--------------------------------------------------------------------------------
/public/dashboard/js/dashboard.js:
--------------------------------------------------------------------------------
 1 | $( function() {
 2 |   localStorage.debug = 'socket.io-client:socket';
 3 | 
 4 |   var visitors = $('#visitors').epoch( {
 5 |     type: 'time.area', axes: ['left', 'bottom', 'right'],
 6 |     data: [ { values: [ { time: Date.now()/1000, y: 0 } ] } ]
 7 |   } );
 8 |   var pages = $( '#pages' ).epoch( { type: 'bar' } );
 9 |   var touch = $( '#touch' ).epoch( { type: 'time.gauge' } );
10 |   var video = $( '#video' ).epoch( { type: 'time.gauge' } );
11 | 
12 |   var dashboard = io( 'localhost:3000/dashboard' );
13 |   dashboard.on( 'stats-updated', function( update ) {
14 | 
15 |     // Convert to percentages
16 |     touch.update( ( update.touch / update.connections ) || 0 );
17 |     video.update( ( update.video / update.connections ) || 0 );
18 | 
19 |     var pagesData = [];
20 |     for( var url in update.pages ) {
21 |       pagesData.push( { x: url, y: update.pages[ url ] } );
22 |     }
23 |     pages.update( [ { values: pagesData } ] );
24 | 
25 |     visitors.push( [ { time: Date.now()/1000, y: update.connections } ] );
26 | 
27 |   } );
28 | 
29 | } );
30 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <title>SocketAlytics</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>SocketAlytics</h1>
 8 | 
 9 |     <button id="btn">Click Me!</button>
10 | 
11 |     <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
12 | 
13 |     <script src="https://cdn.socket.io/socket.io-1.0.4.js"></script>
14 |     <!--script src="/socket.io/socket.io.js"></script-->
15 |     <script>
16 |       localStorage.debug = 'socket.io-client:socket';
17 | 
18 |       var socket = io( '/clients' );
19 | 
20 |       socket.on('connect', function(){
21 |         console.log( 'connected' );
22 |         var data = {
23 |           page: {
24 |             url: window.location.href
25 |           },
26 |           device: {
27 |             capabilities: {
28 |               webgl: Modernizr.webgl,
29 |               touch: Modernizr.touch,
30 |               video: Modernizr.video,
31 |               websocket: Modernizr.websockets
32 |             }
33 |           }
34 |         };
35 | 
36 |         console.log( 'emitting data', data );
37 |         socket.emit( 'client-data', data );
38 | 
39 |         socket.on('disconnect', function(){});
40 |       });
41 | 
42 |       document.getElementById( 'btn' ).addEventListener( 'click', function() {
43 |         socket.emit('hello', 'world');
44 |       });
45 | 
46 |       document.addEventListener( 'mousemove', function( e ) {
47 |         var data = {
48 |           mouseX: e.x,
49 |           mouseY: e.y
50 |         };
51 | 
52 |         socket.emit( 'mousemove', data );
53 | 
54 |       } );
55 |     </script>
56 |   </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------