https://github.com/thlorenz/hyperwatch

Streams server side log messages to the browser and renders them inside your page.
https://github.com/thlorenz/hyperwatch

Last synced: about 1 month ago
JSON representation

Streams server side log messages to the browser and renders them inside your page.

• Host: GitHub
• URL: https://github.com/thlorenz/hyperwatch
• Owner: thlorenz
• License: mit
• Created: 2013-04-28T03:09:26.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2014-03-29T16:27:22.000Z (over 10 years ago)
• Last Synced: 2024-10-29T16:59:43.463Z (about 2 months ago)
• Language: JavaScript
• Homepage: http://thlorenz.github.io/hyperwatch/
• Size: 637 KB
• Stars: 28
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# hyperwatch

Streams server side log messages to the browser and renders them inside your page.

[![screenshot](https://raw.github.com/thlorenz/hyperwatch/master/assets/screenshot.png)](http://thlorenz.github.io/hyperwatch/)

## Installation

    npm install hyperwatch

## Setup

### Client Side

#### using default options

```js

// just require hyperwatch in order to add a terminal to the browser window

require('hyperwatch')();

```

#### using custom options

#### make mini terminal appear merely a thumbnail

```js

require('hyperwatch')({

  mini: {

      position: 'top right'

    , size: '100x100'

    , fontSize: 3

  }

});

```

#### make mini terminal appear rather large and get called back when terminals have been initialized

```js

require('hyperwatch')({

    mini: {

          position: 'bottom left'

        , size: '600x100'

        , fontSize: 12 

      }

    }

  , function () { console.log('terminals have been initialized'); }

);

```

### Server Side

Pass the server to hyperwatch. 

#### using express

Pass return value of `listen`:

```js

var express    =  require('express')

  , app        =  express()

  , hyperwatch =  require('hyperwatch');

var config = hyperwatch(app.listen(3000));

```

*[full example](https://github.com/thlorenz/hyperwatch/tree/master/examples/express-app)*

#### using ecstatic

Pass http server:

```js

var ecstatic = require('ecstatic')(__dirname + '/static');

var server = http.createServer(ecstatic);

server.listen(3000);

var config = hyperwatch(server);

```

## Configuration

Calling `hyperwatch(server)` initializes and enables hyperwatch and returns a `config` object with the following functions:

***config.disable***

Invoking `config.disable()` will stop data to be streamed to the client and hide the mini terminal when the browser

is refreshed.

***config.enable***

Invoking `config.enable()` will resume data to be streamed to the client and show the mini terminal when the browser

is refreshed.

***config.scrollback***

Specifies the number of log messages that will be preserved between browser refreshes. The default is `10,000`. Keep in

mind that this data is kept in memory when setting this to very high values.

## Interactions

### Click Mini Terminal

Toggles full size Terminal

### Alt/Option-Click Mini Terminal

Make it jump from left to right and vice versa in case it gets in your way

## Demo

    npm explore hyperwatch && npm run demo

Then open [localhost:3000](http://localhost:3000).