Giter VIP home page Giter VIP logo

console.io's Introduction

Console.IO

Console.IO is a NodeJS project. It provides Remote Web Console for websites and web applications. It uses express.io (express & socket.io) to provide user real time experience.

It works pretty much on all modern browsers, mobile devices, Smart TVs, etc

Tested on:

  • Toshiba TV (2011, 2012)
  • LG NetCast TV (2011, 2012, 2013)
  • Philips NetTV (2011, 2012)
  • Samsung TV (2010, 2011, 2012, 2013)
  • Technika Avtrex STB
  • Firefox, Safari, Opera, Chrome, Maple and IE
  • iPhone, iPod, iPad, Android browser, windows 8 phone etc

Node NPM package

Install and start Console.IO server

npm install -g xconsole.io
consoleio

Install from Source

Install and start or execute install.bat and start.bat (window user only)

npm install express.io redis
node ./server/main.js

Include scripts in your web page

include inject.js scripts with config parameters

<script type="text/javascript" src="inject.js?url=http://nodeserver:port&web=true&..."></script>

OR create a create ConfigIO global object with config options

<script type="text/javascript" src="configIO.js"></script>
<script type="text/javascript" src="inject.js"></script>

configIO.js

window.ConfigIO = {
    //URL to connect back
	url: 'http://nodeserver:port/',

	// set it to true to enable WebIO (web console)  (optional)
	web: true,

    // WebIO config (optional)
	docked: false,
    position: 'bottom',
    height: '300px',
    width: '99%'
};

OR you can include all files individually

<script type="text/javascript" src="<Local Folder OR Node Server/socket.io>/socket.io.js"></script>
<script type="text/javascript" src="<Local Folder OR Node Server>/console.io.js"></script>
<script type="text/javascript" src="<Local Folder OR Node Server>/socket.js"></script>
<script type="text/javascript" src="<Local Folder OR Node Server>/web.js"></script>
<script type="text/javascript" src="<Local Folder OR Node Server>/inject.js?url=http://nodeserver:port"></script>

Visit http://nodeserver:port/ for ConsoleIO interface

Screen shot

Note:

  • Online icons Device is registered and connected.
  • Offline icons Device is registered but offline.
  • Subscribe icons Device is subscribed (double click on Online icon to subscribe).
  • WebIO icons WebIO (web console) icon to enable/disable WebIO remotely.

Console.IO Editor

You can execute commands on remote client from Console.IO. You can execute single & multilines javascript code.

Shortcuts:

  • Ctrl+Enter: execute command
  • Ctrl+Space: autocomplate
  • Ctrl-Q: toggle comments

Note: All multilines code should be wrapped within self executable function. E.G

(function doSomeThing(){
 .......
}())

Console.IO Device and Tabs

  • Files: Show all attached javascript and css files in the web page
  • Status: Device Status and some basic information
  • Source: Double click on a file in file explorer to view file content
  • Preview: HTML dom structure
  • Console: Remote console
    • Pause incoming logs
    • Clear logs
    • Export logs
    • Change page size
    • Search word or use regex to filter logs
    • Filter logs by type

Console.IO WebIO (web console)

  • Control it remotely
    • Pause incoming logs
    • Clear logs
    • Change page size
    • Search word or use regex to filter logs
    • Filter logs by type
  • TODO
    • Ability to configure height, width, position & remote control.
    • Control logging speed
    • Scroll through logs (Smart Tv/mobile/tablets)

Console API methods supported

  • console.assert(x)
  • console.count(key)
  • console.time(name, reset)
  • console.timeEnd(name)
  • console.debug(arguments...)
  • console.warn(arguments...)
  • console.info(arguments...)
  • console.log(arguments...)
  • console.dir(object)
  • console.dirxml(HTML Element)
  • console.error(error)
  • console.exception(error)
  • console.trace()
  • TODO
    • console.group()
    • console.groupCollapsed()
    • console.groupEnd()
    • console.markTimeline()
    • console.timestamp()
    • console.profiles
    • console.profile()
    • console.profileEnd()

Configure Console.IO Server

All server side configurations are defined in server/config.js file. If you have install using npm -g then you will find it in C:\Users[USERNAME]\AppData\Roaming\npm\node_modules\xconsole.io\server folder

Server Port

You can change default (8082) port number

express: {
    production: {
        ...
        { 'port-number': 8082 },
        { 'session-key': 'console.io' },
        ...
    }
}

SSL Support

Change following in server side config file to enable server to run over SSL and use "https" instead of "http" to inject files on client. To generate your own SSL Certificate please check this How to generate custom SSL certificates.

var config = {
    .....
    https: {
        enable: true, // change true/false to enable and disable SSL
        key: './certificates/server.key',
        certificate: './certificates/server.crt',
        ca: './certificates/ca.crt'
    },
    .....
}
<script type="text/javascript" src="inject.js?url=https://nodeserver:port&web=true&..."></script>

Scaling server

Console.IO use socket.io and in order to scale socket.io you need to run redis server. Change following value in config file before starting the Console.IO server and on window platform (/redis/redis-server.exe) is started by server itself but on other platforms you have to start redis server manually.

redis: {
        enable: true, // <- true to enable socket.io scaling
        process: 6 // number of process to run
    }

TODO

  • Update Readme with full feature list
  • Add JSDoc & Unit Tests

Copyright and license

MIT LICENSE

Reference

console.io's People

Contributors

maciejblinkbox avatar nkashyap avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.