├── Procfile
├── .gitignore
├── Makefile
├── package.json
├── test
    ├── persistence.coffee
    └── config.coffee
├── README
├── config.js
├── static
    ├── jquery.customslide.js
    ├── jquery.easydate-0.2.4.min.js
    ├── hookscope.js
    └── index.html
├── persistence.js
├── main.js
└── clients.js


/Procfile:
--------------------------------------------------------------------------------
1 | web: node main.js


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | run.sh


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | test:
 2 | 	./node_modules/.bin/mocha \
 3 | 	--reporter list \
 4 | 	-r should
 5 | 
 6 | watch:
 7 | 	./node_modules/.bin/mocha \
 8 | 	--reporter list \
 9 | 	-r should \
10 | 	-G -w
11 | 
12 | .PHONY: test watch


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hookscope",
 3 |   "version": "0.2.0",
 4 |   "dependencies": {
 5 |     "express": "2.5.6",
 6 |     "redis": "0.7.1",
 7 |     "hiredis": "0.1.13",
 8 |     "socket.io": "0.8.7",
 9 |     "underscore": "1.3.0"
10 |   }
11 | }


--------------------------------------------------------------------------------
/test/persistence.coffee:
--------------------------------------------------------------------------------
 1 | describe 'persistence module', ->
 2 |   it 'should import', ->
 3 |     persistence = require '../persistence'
 4 | 
 5 |   describe '', ->
 6 |     before ->
 7 |       persistence = require '../persistence'
 8 |       
 9 |     it 'should create a client', ->
10 |       client = 


--------------------------------------------------------------------------------
/test/config.coffee:
--------------------------------------------------------------------------------
 1 | describe 'config module', ->
 2 |   it 'should import', ->
 3 |     config = require '../config'
 4 | 
 5 |   it 'should have sensible defaults', ->
 6 |     config = (require '../config').config
 7 | 
 8 |     config.persist.should.be.false
 9 |     config.redisHost.should.eql("localhost")
10 |     config.redisPort.should.eql("6379")
11 | 
12 | 


--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
 1 | Usage
 2 | =====
 3 | 
 4 | Start main.js using node.js:
 5 |  $ node-dev main.js
 6 |  
 7 | Open main.html in a browser.
 8 | 
 9 | 
10 | Test
11 | ====
12 | 
13 | Install should and mocha:
14 |  $ npm install mocha coffee-script should
15 |  $ make test
16 | 
17 | 
18 | Bugs/Todo
19 | =========
20 | 
21 | * Does not support multiple pages accessing the same channel.
22 | * Does not support multiple node instances.


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var url = require('url');
 3 | var redisConfig = url.parse(process.env.REDISTOGO_URL || "");
 4 | 
 5 | exports.config = {
 6 |   // If hostname is in the form of channel.domain.tld
 7 |   subDomainChannel: false,
 8 | 
 9 |   // Subdomains (or rather, channels) to pass to static serving
10 |   staticSubDomains: ["www", "localhost"],
11 | 
12 |   // The domain used to host this app
13 |   domain: "localhost:8000",
14 | 
15 |   // The subdirectory to listen for webhooks on.
16 |   hookDir: "hook",
17 | 
18 |   // HTTP server details
19 |   host: "127.0.0.1",
20 |   port: process.env.PORT || 8000,
21 | 
22 |   // Persist requests y/n (if true, configure redis below)
23 |   persist: !!(redisConfig.hostname && redisConfig.hostname.length) || false, 
24 | 
25 |   // Redis connection
26 |   redisHost: redisConfig.hostname || "localhost",
27 |   redisPort: redisConfig.port || "6379",
28 |   redisAuth: (redisConfig.auth || "").split(":")[1] || "auth string here",
29 | 
30 |   // Redis expiry of unused channels
31 |   expire: 60*60*24*7,
32 | 
33 |   // Maximum requests per channel
34 |   maxlen: 20,
35 | 
36 |   // Ignore favicon.ico requests?
37 |   ignoreFavicon: true,
38 | 
39 |   // Custom socket.io options
40 |   // This is useful to circumvent server restrictions
41 |   // like on Heroku:
42 |   socketOpts: {
43 |     "transports": ["xhr-polling"],
44 |     "polling duration": 10 },
45 |   
46 |   // The directory from which to serve the static files
47 |   webRoot: path.join(path.dirname(__filename), 'static')
48 | 
49 | 
50 | }


--------------------------------------------------------------------------------
/static/jquery.customslide.js:
--------------------------------------------------------------------------------
 1 | // Thanks to "jnn" for this code
 2 | // http://stackoverflow.com/a/7266950/154399
 3 | $.effects.customSlide = function(o) {
 4 | 
 5 |     return this.queue(function() {
 6 | 
 7 |         // Create element
 8 |         var el = $(this),
 9 |             props = ['position', 'top', 'bottom', 'left', 'right'];
10 | 
11 |         // Set options
12 |         var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
13 |         var direction = o.options.direction || 'left'; // Default Direction
14 |         // Adjust
15 |         $.effects.save(el, props);
16 |         el.show(); // Save & Show
17 |         $.effects.createWrapper(el).css({
18 |             overflow: 'hidden'
19 |         }); // Create Wrapper
20 |         var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
21 |         var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
22 |         var distance = o.options.distance || (ref == 'top' ? el.outerHeight({
23 |             margin: true
24 |         }) : el.outerWidth({
25 |             margin: true
26 |         }));
27 |         if (mode == 'show') el.parent().css('height', 0);
28 |         
29 |         if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift
30 |         // Animation
31 |         var animation = {};
32 |         animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
33 | 
34 |         el.parent().animate({
35 |             height: (mode == 'show' ? distance : 0)
36 |         }, {
37 |             queue: false,
38 |             duration: o.duration,
39 |             easing: o.options.easing
40 |         });
41 |         el.animate(animation, {
42 |             queue: false,
43 |             duration: o.duration,
44 |             easing: o.options.easing,
45 |             complete: function() {
46 |                 if (mode == 'hide') el.hide(); // Hide
47 |                 $.effects.restore(el, props);
48 |                 $.effects.removeWrapper(el); // Restore
49 |                 if (o.callback) o.callback.apply(this, arguments); // Callback
50 |                 el.dequeue();
51 |             }
52 |         });
53 | 
54 |     });
55 | 
56 | };


--------------------------------------------------------------------------------
/persistence.js:
--------------------------------------------------------------------------------
 1 | var config = require('./config').config;
 2 | 
 3 | exports.createClient = function createClient(port, host, auth) {
 4 |   var redis = require('redis');
 5 | 
 6 |   client = redis.createClient(port, host);
 7 |   if (auth) { client.auth(auth) };
 8 | 
 9 |   return new Persistence(client);
10 | }
11 | 
12 | /* class Persistence
13 | * 
14 | * methods:
15 | *  - pushRequest(channel, data, callback)
16 | *      Adds a new request (data) to an already or not existing
17 | *      channel.
18 | *  - getRequests(channel, callback)
19 | *      Returns the saved requests for this channel.
20 | *  - channelExists(channel, callback)
21 | *      Checks if the channel already exists
22 | *      callback is called with one parameter (exists or not)
23 | *  - touchChannel(channel, callback)
24 | *      Update the expiry of channel to now+timeout
25 | */
26 | 
27 | function Persistence(client) {
28 |   var self = this;
29 |   this.client = client;
30 | 
31 |   self.channelExists = function channelExists(channel, callback) {
32 |     client.exists("list:" + channel, function(err, data) {
33 |       callback(data);
34 |     });
35 |   };
36 | 
37 |   self.pushRequest = function pushRequest(channel, data, callback) {
38 |     self.channelExists(channel, function(exists) {
39 |       var multi = self.client.multi();
40 | 
41 |       if (!exists) {
42 |         // update the list of channels here
43 | 
44 |       }
45 | 
46 |       multi.lpush("list:" + channel, JSON.stringify(data));
47 |       multi.ltrim("list:" + channel, 0, config.maxlen-1);
48 |       multi.exec(callback);
49 | 
50 |       self.touch(channel);
51 |     });
52 |   };
53 | 
54 |   self.getRequests = function getRequests(channel, callback) {
55 |     self.channelExists(channel, function(exists) {
56 |       if (exists) {
57 |         self.client.lrange("list:" + channel, 0, 100, function(error, result) {
58 |           if (result) {
59 |             parsedResult = [];
60 | 
61 |             for(i=0; i<result.length; i++) {
62 |               parsedResult.push(JSON.parse(result[i]));
63 |             }
64 | 
65 |             callback(error, parsedResult);
66 |           }
67 |         });
68 |         self.touch(channel);
69 |       }
70 |     });
71 |   }
72 | 
73 |   self.clear = function clear(channel, callback) {
74 |     self.client.del("list:" + channel, callback);
75 |   }
76 | 
77 | 
78 |   /* 
79 |    * Use this method every time you want to update
80 |    * the expiry date for this channel.
81 |    */
82 |   self.touch = function touchChannel(channel, callback) {
83 |     if (callback) { callback() };
84 |   }
85 | 
86 | }
87 | 
88 | /*
89 |  * Redis Keys
90 |  * ==========
91 |  * channels      set of all the channels
92 |  * 
93 |  * channel:NAME  channel to subscribe to
94 |  * list:NAME     list of messages (trimmed to config.maxlen)
95 |  * expire:NAME   expire for this channel
96 |  */


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | var _        = require('underscore')._;
  2 | var express  = require('express');
  3 | var http     = require('http');
  4 | var url      = require('url');
  5 | var redis    = require('redis');
  6 | var config   = require('./config.js').config;
  7 | var app      = express.createServer();
  8 | var sockets;
  9 | 
 10 | app.configure(function() {
 11 |   app.use(express.bodyParser());
 12 |   app.use(app.router);
 13 |   app.use(express.static(config.webRoot));      // Serve static on route fall through
 14 | });
 15 | 
 16 | // Ignore favicons
 17 | if (config.ignoreFavicon) {
 18 |   app.get('*/favicon.ico', function(req, res) {
 19 |     return false;
 20 |   });
 21 | }
 22 | 
 23 | // Translate subdomain channel into hookdir
 24 | if (config.subDomainChannel) {
 25 |   app.all('*', function(req, res, next) {
 26 |     var subDomain = req.headers.host.slice(0, -config.domain.length).split('.')[0];
 27 | 
 28 |     if (subDomain && !_.include(config.staticSubDomains, subDomain)) {
 29 |       req.url = '/' + config.hookDir + '/' + subDomain + req.url;
 30 |     }
 31 | 
 32 |     next(); 
 33 |   });
 34 | }
 35 | 
 36 | // Parse the webhook requests
 37 | app.all('/' + config.hookDir + '/:hookscopechannel', parseWebHook);
 38 | app.all('/' + config.hookDir + '/:hookscopechannel/*', parseWebHook);
 39 | 
 40 | 
 41 | function parseWebHook(req, res) {
 42 |   var requestUrl = url.parse(req.url, true);
 43 | 
 44 |   res.writeHead(200, {'Content-Type': 'text/plain'});
 45 |   res.end('ok\n');
 46 | 
 47 |   dataObject = {
 48 |     datetime: new Date(),
 49 |     url: requestUrl,
 50 |     headers: req.headers,
 51 |     httpVersion: req.httpVersion,
 52 |     method: req.method,
 53 |     body: req.body
 54 |   };
 55 | 
 56 |   dataObject.channel = req.params.hookscopechannel;
 57 | 
 58 |   if (!dataObject.channel) {
 59 |     console.log("Received channelless request. Discard.");
 60 |     return;
 61 |   }
 62 | 
 63 |   if (sockets.exists(dataObject.channel)) {
 64 |     console.log("Received request for channel '" + dataObject.channel + "'. Emit.");
 65 |     sockets.request(dataObject.channel, dataObject);
 66 |   } else {
 67 |     console.log("Received request for unknown channel '" + dataObject.channel + "'. Discard.");
 68 |   }
 69 | }
 70 | 
 71 | app.listen(config.port);
 72 | 
 73 | console.log("Server started on port " + config.port);
 74 | 
 75 | sockets = require('./clients.js').createClients(app, config.socketOpts);
 76 | 
 77 | // Let the client know the webhook-URL.
 78 | sockets.on("set channel", function(channel) {
 79 |   urls = [];
 80 | 
 81 |   if (config.hookDir) {
 82 |     urls.push("/" + config.hookDir + "/" + channel);
 83 |   }
 84 | 
 85 |   if (config.subDomainChannel) {
 86 |     urls.push(channel + "." + config.domain); 
 87 |   }
 88 | 
 89 |   sockets.setUrls(channel, urls);
 90 | });
 91 | 
 92 | 
 93 | if (config.persist) {
 94 |   var persistence = require('./persistence.js').createClient(config.redisPort, config.redisHost, config.redisAuth);
 95 | 
 96 |   sockets.on("touch", function(channel) {
 97 |     persistence.touch(channel);
 98 |   });
 99 | 
100 |   sockets.on("request", function(channel, data) {
101 |     persistence.pushRequest(channel, data);
102 |   });
103 | 
104 |   sockets.on("set channel", function(channel) {
105 |     persistence.getRequests(channel, function(error, data) {
106 |       sockets.history(channel, data);
107 |     });
108 |   });
109 | 
110 |   sockets.on("clear", function(channel) {
111 |     persistence.clear(channel);
112 |   });
113 | }
114 | 


--------------------------------------------------------------------------------
/clients.js:
--------------------------------------------------------------------------------
  1 | exports.createClients = createClients;
  2 | 
  3 | var events = require('events');
  4 | var _ = require('underscore')._;
  5 | 
  6 | /*
  7 |  * Initializes the socket.io code.
  8 |  * Pass either an Express app or a
  9 |  * simple port number as listener.
 10 |  */
 11 | function createClients(listener, options) {
 12 |   return new Clients(listener, options);
 13 | }
 14 | 
 15 | function Clients(listener, options) {
 16 |   events.EventEmitter.call(this);
 17 | 
 18 |   var self = this;
 19 |   var active_sockets = {};
 20 |   var io = require('socket.io').listen(listener);
 21 | 
 22 |   io.configure(function() {
 23 |     _.each(options, function(value, key) {
 24 |       io.set(key, value);
 25 |     });
 26 |   })
 27 | 
 28 |   this.exists = function exists(channel) {
 29 |     return !!active_sockets["channel-" + channel];
 30 |   }
 31 | 
 32 |   this.request = function request(channel, data) {
 33 |     emitEvent(channel, "request", data);
 34 |   }
 35 | 
 36 |   this.history = function history(channel, data) {
 37 |     emitEvent(channel, "history", data);
 38 |   }
 39 | 
 40 |   /*
 41 |    * Notify the clients of the possible URL endpoints. Data
 42 |    * is an array containing the differint URLs, e.g.
 43 |    *    ["http://localhost/hooks/aXejf/", "http://aXejf.localhost/"]
 44 |    */
 45 |   this.setUrls = function setUrls(channel, data) {
 46 |     emitEvent(channel, "setUrls", data);
 47 |   }
 48 | 
 49 |   // Event handling
 50 |   io.sockets.on('connection', function(socket) {
 51 |     socket.on('set channel', function(channel) {
 52 |       connectSocket(socket, channel);
 53 |       emitEvent(channel, 'set channel');
 54 |     });
 55 | 
 56 |     socket.on('disconnect', function() {
 57 |       disconnectSocket(socket);
 58 |     });
 59 | 
 60 |     socket.on('clear', function() {
 61 |       socket.get("channel", function(err, channel) {
 62 |         emitEvent(channel, "clear");
 63 |       });
 64 |     });
 65 |   });
 66 | 
 67 |   // Private Members
 68 |   function connectSocket(socket, channel) {
 69 |     emitEvent(channel, "connection");
 70 | 
 71 |     console.log("Connect to channel " + channel + ".");
 72 |     socket.set("channel", channel, function() {
 73 | 
 74 |       if (active_sockets["channel-" + channel]) {
 75 |         active_sockets["channel-" + channel].push(socket);
 76 |       } else {
 77 |         active_sockets["channel-" + channel] = [socket];
 78 |       }
 79 | 
 80 |     });
 81 |   }
 82 | 
 83 |   function disconnectSocket(socket) {
 84 |     socket.get("channel", function(err, channel) {
 85 |       if (err) {
 86 |         console.log("Error while removing channel: " + err);
 87 | 
 88 |       } else {
 89 |         emitEvent(channel, "disconnect");
 90 |         console.log("Disconnect channel " + channel + ".");
 91 |         active_sockets["channel-" + channel] = _.reject(
 92 |           active_sockets["channel-" + channel], function(sock) {
 93 |             return sock.id == socket.id;
 94 |         });
 95 | 
 96 |         if (!active_sockets["channel-" + channel].length) {
 97 |           delete active_sockets["channel-" + channel];
 98 |         }
 99 | 
100 |       }
101 |     });
102 |   }
103 | 
104 |   function emitEvent(channel, event, data) {
105 |     _.each(active_sockets["channel-" + channel], function(socket) {
106 |       socket.emit(event, data);
107 |     });
108 | 
109 |     self.emit("touch", channel, data);
110 |     self.emit(event, channel, data);
111 |   }
112 | }
113 | 
114 | Clients.super_ = events.EventEmitter;
115 | Clients.prototype = Object.create(events.EventEmitter.prototype, {
116 |   constructor: {
117 |     value: Clients,
118 |     enumerable: false
119 |   }
120 | });


--------------------------------------------------------------------------------
/static/jquery.easydate-0.2.4.min.js:
--------------------------------------------------------------------------------
1 | /*
2 |  * jQuery EasyDate 0.2.4 ($Rev: 54 $)
3 |  * Copyright (c) 2009 Parsha Pourkhomami (parshap@gmail.com)
4 |  * Licensed under the MIT license.
5 |  */
6 | (function(e){e.easydate={};e.easydate.locales={};e.easydate.locales.enUS={future_format:"%s %t",past_format:"%t %s",second:"second",seconds:"seconds",minute:"minute",minutes:"minutes",hour:"hour",hours:"hours",day:"day",days:"days",week:"week",weeks:"weeks",month:"month",months:"months",year:"year",years:"years",yesterday:"yesterday",tomorrow:"tomorrow",now:"just now",ago:"ago","in":"in"};var d={live:true,set_title:true,format_future:true,format_past:true,units:[{name:"now",limit:5},{name:"second",limit:60,in_seconds:1},{name:"minute",limit:3600,in_seconds:60},{name:"hour",limit:86400,in_seconds:3600},{name:"yesterday",limit:172800,past_only:true},{name:"tomorrow",limit:172800,future_only:true},{name:"day",limit:604800,in_seconds:86400},{name:"week",limit:2629743,in_seconds:604800},{name:"month",limit:31556926,in_seconds:2629743},{name:"year",limit:Infinity,in_seconds:31556926}],uneasy_format:function(p){return p.toLocaleDateString()},locale:e.easydate.locales.enUS};var f=0;var k={};var h={};var a={};function l(r,q,p){if(!isNaN(q)&&q!=1){r=r+"s"}return p.locale[r]||r}var o=e.easydate.pause=function(q){var s=function(p){clearTimeout(k[p]);delete k[p];h[p]=true};if(!q){for(var r in k){s(r)}}else{e(q).each(function(){var p=jQuery.data(this);if(!isNaN(k[p])){s(p)}})}};var c=e.easydate.resume=function(p){var s=function(r){delete h[r];b(a[r])};if(!p){for(var q in h){s(q)}}else{e(p).each(function(){var r=jQuery.data(this);if(!isNaN(h[r])){s(r)}})}};var g=e.easydate.set_now=function(q){var r;if(q instanceof Date){r=q.getTime()}else{r=Date.parse(q)}if(isNaN(r)){return}f=r-(new Date()).getTime();for(var p in a){if(!isNaN[k[p]]){clearTimeout(k[p])}b(a[p])}};var n=e.easydate.get_now=function(){var p=new Date();p.setTime(p.getTime()+f);return p};var j=e.easydate.format_date=function(q,x){var r=e.extend({},d,x);var v=((n().getTime()-q.getTime())/1000);var u=Math.abs(v);if(isNaN(v)){return}if((!r.format_future&&v<0)||(!r.format_past&&v>0)){return}for(var s in r.units){var w=r.units[s];if((w.past_only&&v<0)||(w.future_only&&v>0)){continue}if(u<w.limit){if(isNaN(w.in_seconds)){return l(w.name,NaN,r)}var p=u/w.in_seconds;p=Math.round(p);var t;if(v<0){t=l("future_format",NaN,r).replace("%s",l("in",NaN,r))}else{t=l("past_format",NaN,r).replace("%s",l("ago",NaN,r))}return t.replace("%t",p+" "+l(w.name,p,r))}}return r.uneasy_format(q)};function m(r,t){var q=n();var w=((q.getTime()-r.getTime())/1000);var p=Math.abs(w);if(isNaN(w)){return}var v=0;for(var s in t.units){var u=t.units[s];if((u.past_only&&w<0)||(u.future_only&&w>0)){continue}if(p<u.limit){if(isNaN(u.in_seconds)){if(w<0){return(v-p)*1000+100}else{return(u.limit-p)*1000+100}}else{if(w<0){return(p%u.in_seconds)*1000+100}else{return(u.in_seconds-(p%u.in_seconds))*1000+100}}}v=u.limit}if(w<0){for(var s=t.units.length-1;s>=0;s--){var u=t.units[s];if(u.past_only){continue}return(u.limit-p)*1000+100}}}function i(q,r){var p=q.data("easydate.date");if(isNaN(p)){var s;var t=Date.parse(s=q.attr("title"))||Date.parse(s=q.html());if(!isNaN(t)){p=new Date();p.setTime(t);q.data("easydate.date",p);if(r.set_title&&!q.attr("title")){q.attr("title",s)}}}return p}function b(r){var s=r.data("easydate.settings");var p=e.data(r[0]);a[p]=r;delete k[p];var q=i(r,s);if(isNaN(q)){return}r.html(j(q,s));if(s.live){var t=m(q,s);if(!isNaN(t)){if(t>2147483647){t=2147483647}var u=setTimeout(function(){b(r)},Math.round(t));k[p]=u}}}e.fn.easydate=function(p){var q=e.extend({},d,p);this.data("easydate.settings",q);this.removeData("easydate.date");this.each(function(){var r=e.data(this);if(!isNaN(k[r])){clearTimeout(k[r]);delete k[r]}b(e(this))})}})(jQuery);


--------------------------------------------------------------------------------
/static/hookscope.js:
--------------------------------------------------------------------------------
  1 | function label(name) {
  2 |   return $("[data-label=" + name + "]");
  3 | }
  4 | 
  5 | function setLabel(name, value) {
  6 |   label(name).html(value);
  7 |   label(name).filter("a").attr("href", value);
  8 | }
  9 | 
 10 | function createRequestView(request) {
 11 |   var el = $($("#request-template").data("compiled")(request));
 12 |   var tbody = el.find(".headers-table");
 13 | 
 14 |   el.find(".show-more-headers").click(function() {
 15 |     var minHeight = tbody.data("minSliderHeight");
 16 |     var maxHeight = tbody.data("maxSliderHeight");
 17 |     var curHeight = tbody.height();
 18 | 
 19 |     if(curHeight == minHeight){
 20 |       tbody.animate({
 21 |         height: maxHeight
 22 |       }, 500);
 23 | 
 24 |     } else {
 25 |       tbody.animate({
 26 |         height: minHeight
 27 |       }, "normal");
 28 |       
 29 |     }
 30 |     
 31 |     el.find(".show-more-headers-label").toggle();
 32 |   });
 33 | 
 34 |   return el;
 35 | }
 36 | 
 37 | function calculateSliderHeights(el) {
 38 |   var minHeight = 0;
 39 |   var maxHeight = 0;
 40 | 
 41 |   el.find(".popular-header").each(function(index, tr) {
 42 |     minHeight += $(tr).height();
 43 |   });
 44 | 
 45 |   maxHeight = minHeight;
 46 | 
 47 |   el.find(".extra-header").each(function(index, tr) {
 48 |     maxHeight += $(tr).height();
 49 |   });
 50 | 
 51 |   // If first time, resize to minimum
 52 |   if (el.data("minSliderHeight")) {
 53 |     el.css("height", minHeight);
 54 |   } else {
 55 |     // Not first time so resize
 56 |     if (el.height() == el.data("maxSliderHeight")) {
 57 |       el.css("height", maxHeight);
 58 |     } else {
 59 |       el.css("height", minHeight);
 60 |     }
 61 |   }
 62 | 
 63 |   el.data("minSliderHeight", minHeight);
 64 |   el.data("maxSliderHeight", maxHeight);
 65 | }
 66 | 
 67 | $(window).resize(function() {
 68 |   $(".headers-table").each(function(index, el) {
 69 |     calculateSliderHeights($(el));
 70 |   });
 71 | });
 72 | 
 73 | // Add dropdown functionality
 74 | $(function() {
 75 |   $('#topbar').dropdown();
 76 | });
 77 | 
 78 | // Compile all the templates
 79 | $(function() {
 80 |   $("[type='text/template']").each(function(index, element) {
 81 |     $(element).data("compiled", _.template(element.text));
 82 |   });
 83 | });
 84 | 
 85 | 
 86 | $(function() {
 87 | 
 88 |   if(!window.location.hash) {
 89 |     window.location.hash = "#" + createRandomWord(6);     
 90 |   }
 91 |   
 92 |   label("channelname").html(window.location.hash);
 93 | 
 94 | 
 95 |   var socket = io.connect();
 96 |   
 97 |   socket.on('connect', function() {
 98 |     setLabel("status", "connected");
 99 |     socket.emit("set channel", window.location.hash.slice(1));
100 |   });
101 | 
102 |   socket.on('disconnect', function() {
103 |     setLabel("status", "disconnected");
104 |   });
105 | 
106 |   socket.on('history', function(data) {
107 |     for (var i = 0; i < data.length; i++) {
108 |       if (console) { console.log(data[i]); }
109 | 
110 |       var el = createRequestView(data[i]).appendTo("#requests");
111 |       calculateSliderHeights(el.find(".headers-table"));
112 |     }
113 | 
114 |     $(".easydate").easydate();
115 |   });
116 | 
117 |   socket.on('request', function(data) {
118 |     console.log(data);
119 |     var el = createRequestView(data).prependTo("#requests");
120 |     calculateSliderHeights(el.find(".headers-table"));
121 | 
122 |     el.show("customSlide", { direction: "up" }, 1000);
123 |     $(".easydate").easydate();
124 |   });
125 | 
126 |   socket.on('setUrls', function(urls) {
127 |     formatted = [];
128 |     _.each(urls, function(url) {
129 |         if (url[0] == "/") {
130 |           formatted.push("http://" + window.location.host + url);
131 |         } else {
132 |           formatted.push("http://" + url + "/");
133 |         }
134 |     });
135 | 
136 |     document.webhookUrl = formatted[0];
137 |     setLabel("url", formatted[0]);
138 |   });
139 | 
140 |   $("#clear").click(function(e) {
141 |     e.preventDefault();
142 |     $("#requests").attr("id", "oldrequests").hide("customSlide", { direction: "up" }, 1000);
143 |     $("<div/>", { id: "requests" }).prependTo("#requests-list");
144 |     
145 |     socket.emit("clear");
146 |   });
147 | 
148 |   $("#sample").click(function(e) {
149 |     e.preventDefault();
150 |     sampleRequest(document.webhookUrl);
151 |   })
152 | });
153 | 
154 | function sampleRequest(url) {
155 |   $.ajax({
156 |     url: url,
157 |     type: "POST",
158 |     data: {
159 |       "sample-request": true,
160 |       "non-trivial-json": '{"datetime": "' + new Date() + '", "elements": ["car", "house", "casino"]}',
161 |       "greeting": "I hope you're having fun playing with Hookscope!",
162 |     }
163 |   });
164 | }
165 | 
166 | // createRandomWord by James Padolsey
167 | // http://james.padolsey.com/javascript/random-word-generator/
168 | function createRandomWord(length) {
169 |   var consonants = 'bcdfghjklmnpqrstvwxyz',
170 |       vowels = 'aeiou',
171 |       rand = function(limit) {
172 |           return Math.floor(Math.random()*limit);
173 |       },
174 |       i, word='', length = parseInt(length,10),
175 |       consonants = consonants.split(''),
176 |       vowels = vowels.split('');
177 | 
178 |   for (i=0;i<length/2;i++) {
179 |       var randConsonant = consonants[rand(consonants.length)],
180 |           randVowel = vowels[rand(vowels.length)];
181 |       word += randConsonant;
182 |       word += i*2<length-1 ? randVowel : '';
183 |   }
184 |   return word;
185 | }


--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |   <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
  4 |   <script src="/socket.io/socket.io.js"></script>
  5 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  7 |   <script src="jquery.customslide.js"></script>
  8 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
  9 |   <script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
 10 |   <script src="jquery.easydate-0.2.4.min.js"></script>
 11 |   <script src="http://github.com/dv/dollars/raw/master/dollars.js"></script>
 12 |   <script src="hookscope.js"></script>
 13 |   <style type="text/css">
 14 |     body {
 15 |       padding-top: 60px;
 16 |     }
 17 | 
 18 |     .request-tag {
 19 |       white-space: nowrap;
 20 |       line-height: 2em;
 21 |     }
 22 | 
 23 |     .header-key {
 24 |       white-space: nowrap;
 25 |     }
 26 | 
 27 |     .request-query {
 28 |       color: #5789FF;
 29 |     }
 30 | 
 31 |     pre {
 32 |       margin-bottom: 2px;
 33 |     }
 34 |   </style>
 35 |   <script type="text/template" id="request-template">
 36 |   <%
 37 |     var popularHeaderKeys = ["user-agent", "content-type"];
 38 |     var popularHeaders = $$.filterKeys(headers, popularHeaderKeys);
 39 |     var extraHeaders = $$.withoutKeys(headers, popularHeaderKeys);
 40 |   %>
 41 |   <div class="row request-row">
 42 |     <div class="span4">
 43 |       <h2><%- method %></h2>
 44 |       <p>
 45 |         <code class="easydate request-tag"><%- datetime %></code>
 46 |         <code class="request-tag"><%- "http/" + httpVersion %></code>
 47 |         <% if (headers["content-length"]) { %>
 48 |           <code class="request-tag"><%- $$.formatSize(headers["content-length"]) %></code>
 49 |         <% } %>
 50 |       </p>
 51 |     </div>
 52 |     <div class="span12">
 53 |       <h2><%- url.pathname %><span class="request-query"><%- url.search %></span></h2>
 54 |       <% if (!_.isEmpty(url.query)) { %>
 55 |         <table class="bordered-table">
 56 |           <thead>
 57 |             <tr>
 58 |               <th colspan="2">Querystring</th>
 59 |             </tr>
 60 |           </thead>
 61 |           <tbody>
 62 |             <% _.each(url.query, function(value, key) { %>
 63 |               <tr>
 64 |                 <th><%- key %></th>
 65 |                 <td><%- value %></td>
 66 |               </tr>   
 67 |             <% }); %>
 68 |           </tbody>
 69 |         </table>
 70 |       <% } %>
 71 |       <% if (!_.isEmpty(body)) { %>
 72 |         <table class="bordered-table">
 73 |           <thead>
 74 |             <tr>
 75 |               <th colspan="2">Request Body</th>
 76 |             </tr>
 77 |           </thead>
 78 |           <tbody>
 79 |             <% _.each(body, function(value, key) { 
 80 |               var isJson = false;
 81 |               try {
 82 |                 value = JSON.stringify(JSON.parse(value), undefined, 2);
 83 |                 isJson = true;
 84 |               } catch (e) { } 
 85 |               %>
 86 |               <tr>
 87 |                 <th><%- key %></th>
 88 |                 <td>
 89 |                 <% if (isJson) { %><pre><% } %><%- value %><% if (isJson) { %></pre><% } %>
 90 |                 </td>
 91 |               </tr>   
 92 |             <% }); %>
 93 |           </tbody>
 94 |         </table>
 95 |       <% } %>
 96 |       <table class="bordered-table">
 97 |         <thead>
 98 |           <tr>
 99 |             <th colspan="2">Request Headers</th>
100 |           </tr>
101 |         </thead>
102 |         <tbody class="headers-table" style="display: block; overflow: hidden;">
103 |           <% _.each(popularHeaders, function(value, key) { %>
104 |             <tr class="popular-header">
105 |               <th class="header-key"><%- key %></th>
106 |               <td style="width: 100%"><%- value %></td>
107 |             </tr>   
108 |           <% }); %>
109 |           <% _.each(extraHeaders, function(value, key) { %>
110 |             <tr class="extra-header">
111 |               <th class="header-key"><%- key %></th>
112 |               <td><%- value %></td>
113 |             </tr>   
114 |           <% }); %>
115 |         </tbody>
116 |         <tbody class="show-more-headers">
117 |           <tr class="show-more-headers-label" style="display: none">
118 |             <th colspan="2" >Show less</th>
119 |           </tr>
120 |           <tr class="show-more-headers-label">
121 |             <th colspan="2">Show <%= _.size(extraHeaders) %> more</th>
122 |           </tr>
123 |         </tbody>
124 |       </table>
125 |     </div>
126 |   </div>
127 |   </script>
128 | 
129 | 
130 | </head>
131 | <body>
132 | 
133 |     <div class="topbar">
134 |       <div class="fill">
135 |         <div class="container">
136 |           <a class="brand" href="#">Hookscope</a>
137 |           <ul class="nav">
138 |             <!-- <li class="active"><a href="#">Channel <span data-label="channelname"></span></a></li> -->
139 |             <li class="dropdown" data-dropdown="dropdown">
140 |               <a href="#" class="dropdown-toggle">Channel <span data-label="channelname"></span></a>
141 |               <ul class="dropdown-menu">
142 |                 <li><a href="#">Secondary link</a></li>
143 |                 <li><form class="pull-left" action="">
144 |                   <input type="text" placeholder="Search" />
145 |                 </form></li>
146 |                 <li class="divider"></li>
147 |                 <li><a href="#">Something else here</a></li>
148 |                 <li><a href="#">Another link</a></li>
149 |               </ul>
150 |             </li>
151 |             <li><a href="#" id="clear">Clear Requests</a></li>
152 |             <li><a href="https://github.com/dv/hookscope">About</a></li>
153 |             <li><a href="mailto:david@crowdway.com">Contact</a></li>
154 |           </ul>
155 |           <ul class="nav secondary-nav">
156 |             <li><a href="#">Listening to <span data-label="url"></span></a></li> 
157 |           </ul>
158 |         </div>
159 |       </div>
160 |     </div>
161 | 
162 | 
163 | 
164 | 
165 |   <div class="container">
166 |     <section id="requests-list">
167 |       <div id="requests"></div>
168 |     </section>
169 |     
170 |   <div class="hero-unit">
171 |         <h1>Webhook Debugging</h1>
172 |         <p>Working with webhooks is awesome, but sometimes it's hard to know what data is sent along. Use Hookscope to find out and get the details!</p>
173 |         <p>Set <a href="#" data-label="url"></a> as your webhook endpoint, and any requests will appear above.
174 |         </p>
175 |         <p><a class="btn primary large" id="sample">Sample Request &raquo;</a></p>
176 |       </div>
177 | 
178 |       <div class="row">
179 |         <div class="span6">
180 |           <h2>Localhost</h2>
181 |           <p>Hookscope is very easy to set up on your own PC. The only thing you need is Node.js. If you want the requestlog to persist when you shut down the page, you can use an optional Redis database, but Hookscope works fine without as well.</p>
182 |           <p><a class="btn" href="#">View details &raquo;</a></p>
183 |         </div>
184 |         <div class="span5">
185 |           <h2>Heroku</h2>
186 |            <p>Hookscope has sensible default settings out of the box and runs straight from Github on Heroku. You can just do a pull+push. If you add the Redis-To-Go Heroku Add-on, Hookscope will automatically detect and use it to save and receive requests without having to be opened in a browser.</p>
187 |           <p><a class="btn" href="#">View details &raquo;</a></p>
188 |        </div>
189 |         <div class="span5">
190 |           <h2>Heading</h2>
191 |           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
192 |           <p><a class="btn" href="#">View details &raquo;</a></p>
193 |         </div>
194 |       </div>
195 |     <footer>
196 |       <p>&copy; David Verhasselt 2011</p>
197 |       |
198 |       <span data-label="status">connecting...</span>
199 |     </footer>
200 | 
201 |   </div> <!-- /container -->
202 | 
203 |   <script>
204 | 
205 |   </script>
206 | </body>


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