├── .gitignore
├── bg.png
├── screenshot.png
├── config.example.json
├── multi-insert.sh
├── .gitmodules
├── Readme.markdown
├── server.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | tmp/
4 | config.json
5 | 


--------------------------------------------------------------------------------
/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/karmi/visualizing-couchdb-changes-with-node-js/HEAD/bg.png


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/karmi/visualizing-couchdb-changes-with-node-js/HEAD/screenshot.png


--------------------------------------------------------------------------------
/config.example.json:
--------------------------------------------------------------------------------
 1 | config = {
 2 |   app : {
 3 |     port : 8000,
 4 |     host : '0.0.0.0'
 5 |   },
 6 |   couchdb : {
 7 |     host : 'localhost',
 8 |     port : '5984',
 9 |     db   : 'test',
10 |     options : { include_docs:true }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/multi-insert.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | 
3 | echo -e "\n\e[1mInserting 500 documents into http://localhost:5984/test. Stop me with Ctrl+C.\e[0m\n\n"
4 | 
5 | for i in {1..5000}
6 |   do
7 |     curl -s -H 'Content-Type: application/json' -X POST http://localhost:5984/test -d '{"foo":"bar"}'
8 |   done
9 | 


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
 1 | [submodule "lib/node-couchdb"]
 2 | 	path = lib/node-couchdb
 3 | 	url = https://github.com/felixge/node-couchdb.git
 4 | [submodule "lib/socket.io"]
 5 | 	path = lib/socket.io
 6 | 	url = http://github.com/LearnBoost/Socket.IO.git
 7 | [submodule "lib/socket.io-node"]
 8 | 	path = lib/socket.io-node
 9 | 	url = http://github.com/LearnBoost/Socket.IO-node.git
10 | 


--------------------------------------------------------------------------------
/Readme.markdown:
--------------------------------------------------------------------------------
 1 | # Visualizing CouchDB Database Changes with Node.js and Sockets #
 2 | 
 3 | An experiment in basic real-time visualization of _CouchDB_ [`_changes` stream](http://guide.couchdb.org/draft/notifications.html)
 4 | with [_Node.js_](http://nodejs.org/) and [Socket.IO](http://socket.io/).
 5 | 
 6 | ![Screenshot: Realtime visualization of CouchDB _changes with Node.js](https://github.com/karmi/visualizing-couchdb-changes-with-node-js/raw/master/screenshot.png)
 7 | 
 8 | ## Installation ##
 9 | 
10 | Clone the repository and navigate into it:
11 | 
12 |     $ git clone git://github.com/karmi/visualizing-couchdb-changes-with-node-js.git couchdb-changes
13 |     $ cd couchdb-changes
14 | 
15 | Initialize the submodules:
16 | 
17 |     $ git submodule update --init
18 | 
19 | Copy (and posibly edit) the configuration file <small>(it listens on <http://localhost:5984/test> by default)</small>:
20 | 
21 |     $ cp config.example.json config.json
22 | 
23 | Start the _Node.js_ server:
24 | 
25 |     $ node server.js
26 | 
27 | Open the client [application](http://localhost:8000/) in browser:
28 | 
29 |     $ open http://localhost:8000/
30 | 
31 | Now make some changes in the database and see them in you browser, instantly:
32 | 
33 |     $ curl -H 'Content-Type: application/json' -X POST http://localhost:5984/test -d '{"foo":"bar"}'
34 | 
35 | -----
36 | 
37 | [Karel Minarik](http://karmi.cz)
38 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | require.paths.unshift('./lib/node-couchdb/lib/',
 2 |                       './lib/socket-io/lib/',
 3 |                       './lib/socket.io-node/lib/');
 4 | 
 5 | require('./config.json')
 6 | 
 7 | var http    = require('http'),
 8 |     url     = require('url'),
 9 |     io      = require('socket.io'),
10 |     couchdb = require('couchdb'),
11 |     sys     = require('sys'),
12 |     fs      = require('fs');
13 | 
14 | var client  = couchdb.createClient(config.couchdb.port, config.couchdb.host),
15 |     db      = client.db(config.couchdb.db);
16 | 
17 | // -- Connect to _changes and attach passed callback --------------------------
18 | 
19 | var attach_couchdb_changes_stream = function(callback) {
20 |   var stream,
21 |       since;
22 | 
23 |   db.info(function(err, data) {
24 |     if (err) throw new Error(JSON.stringify(err));
25 |     // Get 'update_seq' from database info and use it for 'since' param
26 |     since = data.update_seq;
27 |     stream = db.changesStream({since:since});
28 |     console.log('db.update_seq: ' + since);
29 | 
30 |     // Attach callback for socket.io
31 |     stream.addListener('data', callback);
32 |   });
33 | 
34 |   return stream;
35 | }
36 | 
37 | 
38 | // -- Node.js Server ----------------------------------------------------------
39 | 
40 | server = http.createServer(function(req, res){
41 |   var path = url.parse(req.url).pathname;
42 | 
43 | 	switch (path) {
44 | 	  case '/':
45 | 	    res.writeHead(200, {'Content-Type': 'text/html'})
46 |       fs.readFile(__dirname + '/index.html', function(err, data){
47 |     		res.write(data, 'utf8');
48 |     		res.end();
49 |     	});
50 |     	break;
51 |     case '/config.json':
52 | 	    res.writeHead(200, {'Content-Type': 'text/javascript'})
53 |       fs.readFile(__dirname + '/config.json', function(err, data){
54 |     		res.write(data, 'utf8');
55 |     		res.end();
56 |     	});
57 |     case '/bg.png':
58 | 	    res.writeHead(200, {'Content-Type': 'image/png'})
59 |       fs.readFile(__dirname + '/bg.png', function(err, data){
60 |     		res.write(data);
61 |     		res.end();
62 |     	});
63 |     	break;
64 |   };
65 | })
66 | server.listen(config.app.port, config.app.host);
67 | 
68 | 
69 | // -- Setup Socket.IO ---------------------------------------------------------
70 | 
71 | var io = io.listen(server);
72 | 
73 | io.on('connection', function(client){
74 |   // console.log('Client connected:', sys.inspect(client));
75 | 
76 |   // Send CouchDB connection info
77 |   client.send(db)
78 | 
79 |   // Send CouchDB _changes
80 |   attach_couchdb_changes_stream(function(change) {
81 |     client.send(change)
82 |   });
83 | 
84 | });
85 | 
86 | console.log('Server running at http://'+config.app.host+':'+config.app.port+'/');
87 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>CouchDB Changes</title>
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 |   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7 |   <script src="/socket.io/socket.io.js"></script>
  8 |   <script src="/config.json"></script>
  9 | 
 10 |   <style>
 11 |     body
 12 |       { color: #1a2c37;
 13 |         font-family: 'Helvetica', sans-serif; font-size: 86%; }
 14 |     #changes
 15 |       { border: 1px solid #ccc;
 16 |         height: 300px;
 17 |         overflow: hidden;
 18 |         position: relative;
 19 |         margin-bottom: 1em; }
 20 |     #changes-container
 21 |       { width: 100%;
 22 |         height: 100%;
 23 |         overflow: hidden;
 24 |         position: absolute; }
 25 |     #changes .period
 26 |       { background: url('bg.png');
 27 |         float: right;
 28 |         width: 16px; height: 100%;
 29 |         margin: 0 0 0 2px; }
 30 |     #changes .period .inner
 31 |       { position:absolute;
 32 |         width: 16px;
 33 |         height: 300px; }
 34 |     #changes .period .counter
 35 |       { color: #666;
 36 |         background-color: rgba(236, 236, 236, 0.75);
 37 |         text-shadow: 0px 1px 0px #fff;
 38 |         font-size: 70%;
 39 |         text-align: center;
 40 |         width: 100%;
 41 |         z-index: 900;
 42 |         position: absolute; }
 43 |     #changes .period p
 44 |       { background-color: #0091e5;
 45 |         margin: 0 0px 0 4px;
 46 |         padding: 0;
 47 |         width: 16px;
 48 |         height: 2px;
 49 |         border: none;
 50 |         position: absolute;
 51 |         bottom: 0;
 52 |         right: 0; }
 53 |     #changes .period p.hide
 54 |       { display: none; }
 55 | 
 56 |     button
 57 |       { color: #487996;
 58 |         border: 1px solid #8ac4e5;
 59 |         background-color: #e0f4ff;
 60 |         border-radius: 4px; }
 61 |   </style>
 62 | 
 63 | </head>
 64 | <body>
 65 |   <div id="changes">
 66 |     <div id="changes-container">
 67 |       <div class="period" data-counter=0>
 68 |         <div class="inner">
 69 |           <div class="counter">0</div>
 70 |           <p title="" class="hide"></p>
 71 |         </div>
 72 |       </div>
 73 |     </div>
 74 |   </div>
 75 | 
 76 |   <button id="control" name="control">stop</button>
 77 | 
 78 |   <script>
 79 | 
 80 |   var Application = {
 81 |   
 82 |     socket       : new io.Socket(null, {port: config.app.port}),
 83 |     db           : null,
 84 |     period       : 1000,
 85 |     shift_offset : -1,
 86 |     container    : null,
 87 |     looper       : null,
 88 |   
 89 |     initialize : function() {
 90 |   
 91 |       // -- Connect to websocket server
 92 |       Application.socket.connect();
 93 |   
 94 |       // -- Setup infrastructure
 95 |       Application.shift_offset = $('#changes-container .period').first().width();
 96 |       Application.container    = $('#changes-container');
 97 |       Application.container.css( { width : Application.container.parent().width() + ( Application.shift_offset * 2 ),
 98 |                                    left  : -(Application.shift_offset*2) });
 99 |   
100 |       // -- Start looper
101 |       Application.Looper.start();
102 |   
103 |       // -- Initialize GUI elements
104 |       Application.ToggleButton.initialize();
105 |   
106 |       // -- Attach socket.io events 
107 |       Application.socket.on('connect', function() {
108 |         // console.log('Connected to:', socket.host)
109 |       });
110 |       Application.socket.on('message', function(message) {
111 |         // console.log('Received message:', message)
112 |         if (message.client) {
113 |           Application.db = message;
114 |           Application.Info.display();
115 |         };
116 |         if (message.id) {
117 |           new Application.Change(message.id);
118 |         };
119 |       });
120 |   
121 |     },
122 |   
123 |   
124 |     Period : function() {
125 |   
126 |       Application.Period.current = function() { return $('#changes-container .period:nth-child(2)').first(); };
127 |   
128 |       var pusher  = $('#changes-container .period:first'),   // Get reference to the first, hidden "pusher" interval element
129 |           current = pusher.clone();                          // Clone this element as current interval element ...
130 |   
131 |       pusher.after(current);                                 // ... and insert it after "pusher"
132 |   
133 |       // Change the width of the "pusher" element, so it "pushes" the intervals to the left
134 |       pusher.css({ width: 0 }).animate({ width: Application.shift_offset + 'px' });
135 |   
136 |       // Remove the elements falling off the container on the left
137 |       var last = $('#changes-container .period:last');
138 |       if ( last.offset().left < 0) { last.remove(); };
139 |   
140 |       return this;
141 |     },
142 |   
143 |   
144 |     Change : function(id, doc) {
145 |   
146 |       var self = this;
147 |       this.id  = id;
148 |       this.url = function() { return 'http://' + Application.db.client.host + ':' + [Application.db.client.port, Application.db.name, this.id].join('/'); };
149 |       this.position = function() { return Application.Period.current().data('counter')*3+'px'; };
150 |   
151 |       // Build element for representing the change
152 |       this.glyph = $('#changes-container .period:first p').clone().
153 |                                                            removeClass('hide').
154 |                                                            css({ bottom: this.position() }).
155 |                                                            attr('title', this.url());
156 |   
157 |       // Update the counter for current period
158 |       Application.Period.current().data('counter', Application.Period.current().data('counter')+1);
159 |   
160 |       // Attach events
161 |       this.glyph.click(function() { document.location.href=self.url(); });
162 |   
163 |       // Insert element into DOM
164 |       Application.Period.current().find('.inner').append(this.glyph);
165 |   
166 |       // Update numeric representation of the counter for current period
167 |       Application.Period.current().find('.counter').text(Application.Period.current().data('counter'));
168 |   
169 |       return this;
170 |     },
171 |   
172 |   
173 |     Looper : {
174 |   
175 |       start : function() {
176 |         Application.looper = setInterval( function() { new Application.Period(); }, Application.period);
177 |       },
178 |   
179 |       stop  : function() {
180 |         clearInterval(Application.looper);
181 |       }
182 |     },
183 |   
184 |   
185 |     ToggleButton : {
186 |   
187 |       initialize : function() {
188 |         $('#control').toggle(
189 |            function() {
190 |              $('#db-info').remove();
191 |              Application.Looper.stop();
192 |              Application.socket.disconnect();
193 |              $(this).html('start');
194 |            },
195 |            function() {
196 |              Application.Looper.start();
197 |              Application.socket.connect();
198 |              $(this).html('stop');
199 |            }
200 |          );
201 |       }
202 |     },
203 |   
204 |   
205 |     Info : {
206 |       display : function() {
207 |         $('body').append( $('<p id="db-info">Displaying changes in database <strong>' +
208 |                              'http://'+Application.db.client.host+':'+Application.db.client.port+'/'+Application.db.name +
209 |                              '</strong></p>') );
210 |       }
211 |     }
212 |   
213 |   
214 |   };
215 |   
216 |   
217 |   // -- Initialize the application -------------------------------------------
218 |   
219 |   $(function() { Application.initialize(); });
220 | 
221 |   </script>
222 | 
223 | </body>
224 | </html>
225 | 


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