Skip to content

Commit cde1849

Browse files
committed
Initial Commit
0 parents  commit cde1849

14 files changed

Lines changed: 3597 additions & 0 deletions

composer.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "bdk/debug-wamp-client",
3+
"description": "Html/Javascript WAMP based debug client used in conjuction with PHPDebugConsole on the server",
4+
"keywords": ["debug", "debugging", "wamp", "wampws", "var_dump", "inspect", "errorhandler", "phpdebugconsole"],
5+
"homepage": "http://github.com/bkdotcom/DebugWampClient",
6+
"license": "MIT",
7+
"authors": [
8+
{
9+
"name": "Brad Kent",
10+
"email": "bkfake-github@yahoo.com",
11+
"homepage": "http://www.bradkent.com/",
12+
"role": "Developer"
13+
}
14+
],
15+
"autoload": {
16+
"psr-4": { "bdk\\Debug\\": "src/" }
17+
},
18+
"require": {
19+
"bdk/debug": "^2.0",
20+
"bdk/wamp-publisher": "*"
21+
},
22+
"suggest": {
23+
"voryx/thruway": "A PHP based WAMP router"
24+
}
25+
}

readme.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
PHPDebugConsole WAMP Plugin Client
2+
===============
3+
4+
Debug your PHP applications (both web and console) in realtime.
5+
6+
Debug/log information is sent completely "out-of-bounds" via websockets. Since log data isn't sent in the message body or headers of your application, we can debug, any request method (including ajax and console application) without affecting the output.
7+
8+
All [PHPDebugConsole](https://github.com/bkdotcom/debug) methods are supported.
9+
10+
using a combination of [PHPDebugConsole](https://github.com/bkdotcom/debug) and [WampPublisher](https://github.com/bkdotcom/wampPublisher)
11+
12+
### Overview
13+
There are 3 parts to this logging solution.
14+
15+
* This client. Think of this as an undocked (separate-windowed) browser console. But, instead of viewing javascript info, it's PHP stuff<sup>†</sup>.
16+
* The PHP application thats "publishing" log messages
17+
* A WAMP (websockets protocol) router that serves as a middle man between this client and the PHP application
18+
19+
All 3 components *can* be be running on the same server/environment, or be on 3 separate servers, it doesn't matter. I imagine in most cases, this client and the router will be installed on a local dev environment... aka your laptop.
20+
21+
> † PHPDebugConsole also supports output via plain 'ol `<script>` output, ChromeLogger, & FirePHP.. This WAMP solution isn't limited by what the browser's console can do and offers all of the same formatting and features of PHPDebugConsole's HTML output without the disadvantages of being included in the output of your application (or not supported with ajax & CLI applications
22+
23+
24+
### Installation
25+
26+
Download Composer (if not already installed) [more info](https://getcomposer.org/doc/00-intro.md#downloading-the-composer-executable)
27+
`$ curl -sS https://getcomposer.org/installer | php`
28+
29+
**create a project directory in your webroot**
30+
31+
$ mkdir debugWampClient
32+
$ cd debugWampClient
33+
34+
**Install this client**
35+
`$ php composer.phar require bdk/debug-wamp-client`
36+
37+
**Install a WAMP router** (if you don't already have one)
38+
If you don't already have a WAMP router up and running, you might as well install a PHP-based one here in the same folder *(but again, it could be installed anywhere)*
39+
One client+router install can support many PHPDebugConsole projects
40+
`$ php composer.phar require voryx/thruway`
41+
42+
**Start the WAMP router.**
43+
`$ php vendor/voryx/thruway/Examples/SimpleWsRouter.php`
44+
*(note that the router doesn't play well with x-debug.. you will likely need to disable x-debug for this process)*
45+
46+
**Create an `index.php` for the client**
47+
48+
```php
49+
<?php
50+
51+
require __DIR__.'/vendor/autoload.php';
52+
53+
// we pass a debug instance so that the client can use the javascript & css it provides
54+
$debug = \bdk\Debug::getInstance();
55+
new \bdk\Debug\WampClient($debug);
56+
```
57+
58+
**Navigate to the client in your browser**
59+
`http://localhost/debugWampClient`
60+
61+
The client should have connected to the router and is ready to receive log messages
62+
63+
**Add PHPDebugConsole to the project you wish to debug**
64+
`$ php composer.phar require bdk/debug`
65+
**Install a outputWamp plugin dependency**
66+
`$ php composer.phar require bdk/wamp-publisher`
67+
68+
Add the OutputWamp plugin to your application
69+
```php
70+
require __DIR__.'/vendor/autoload.php'
71+
72+
$debug = new \bdk\Debug(array(
73+
'collect' => true,
74+
));
75+
$wampPublisher = new \bdk\WampPublisher(array(
76+
'realm'=>'debug'
77+
));
78+
$outputWamp = new \bdk\Debug\OutputWamp($debug, $wampPublisher);
79+
$debug->addPlugin($outputWamp); // or $debug->setCfg('outputAs', $outputWamp); to not output as html
80+
```

src/WampClient.php

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<?php
2+
/**
3+
* This is a WAMP (http://wamp-proto.org/) based PHPDebugConsole client
4+
*
5+
* Server-side PHP code publishes debug messages...
6+
* This client subscribes to those messages and displays them here
7+
*
8+
* This is useful for debugging
9+
* console applications
10+
* AJAX calls
11+
* any web request where outputting debug information will affect the layout of the page
12+
*/
13+
14+
namespace bdk\Debug;
15+
16+
use bdk\Debug;
17+
18+
/**
19+
* PHPDebugConsole WAMP plugin client
20+
*/
21+
class WampClient
22+
{
23+
24+
/**
25+
* Constructor
26+
*
27+
* @param Debug $debug debug instance
28+
*/
29+
public function __construct(Debug $debug)
30+
{
31+
$this->debug = $debug;
32+
$this->handleRequest();
33+
}
34+
35+
/**
36+
* Output html or script
37+
*
38+
* @return void
39+
*/
40+
public function handleRequest()
41+
{
42+
$action = isset($_GET['action']) && method_exists($this, 'action'.ucfirst($_GET['action']))
43+
? $_GET['action']
44+
: 'index';
45+
$this->{'action'.ucfirst($action)}();
46+
}
47+
48+
/**
49+
* Output HTML
50+
*
51+
* @return void
52+
*/
53+
public function actionIndex()
54+
{
55+
header('Content-Type: text/html');
56+
readfile(__DIR__.'/views/index.html');
57+
}
58+
59+
/**
60+
* Output CSS
61+
*
62+
* @return void
63+
*/
64+
public function actionCss()
65+
{
66+
header('Content-Type: text/css');
67+
echo $this->debug->output->getCss();
68+
readfile(__DIR__.'/css/WampClient.css');
69+
}
70+
71+
/**
72+
* Output Javascript
73+
*
74+
* @return void
75+
*/
76+
public function actionScript()
77+
{
78+
$scripts = array(
79+
'autobahn.min.js',
80+
'Queue.js',
81+
'main.js',
82+
'socketWorker.js',
83+
'base64.arraybuffer.js',
84+
'StrDump.js',
85+
'LogDumper.js',
86+
'DumpObject.js',
87+
'MethodTable.js',
88+
);
89+
header('Content-Type: application/javascript');
90+
readfile($this->debug->getCfg('filepathScript'));
91+
foreach ($scripts as $path) {
92+
$path = __DIR__.'/js/'.$path;
93+
readfile($path);
94+
}
95+
}
96+
}

src/css/WampClient.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
body { padding-top:50px; }
2+
3+
/*
4+
#body > .panel {
5+
margin-top: 20px;
6+
}
7+
#body > .panel:first-child {
8+
margin-top: 0;
9+
}
10+
*/
11+
12+
.navbar {
13+
margin-bottom: 10px;
14+
min-height: auto;
15+
}
16+
.navbar-header {
17+
float: left;
18+
}
19+
.navbar-brand {
20+
padding: 5px 15px;
21+
height: auto;
22+
line-height: normal;
23+
}
24+
.navbar-collapse {
25+
display: block;
26+
}
27+
.navbar-form {
28+
float: left;
29+
padding-top: 0;
30+
padding-bottom: 0;
31+
margin: 0px 0px;
32+
}
33+
34+
.navbar-right {
35+
float: right;
36+
margin-top: 0;
37+
margin-bottom: 0;
38+
}
39+
.navbar-right .settings-toggle {
40+
padding-top: 8px;
41+
padding-bottom: 5px;
42+
}
43+
44+
.alert {
45+
/*
46+
font-size: 11px;
47+
*/
48+
padding: 10px;
49+
margin-bottom: 10px;
50+
border: 1px solid transparent;
51+
/*border-radius: 4px;*/
52+
}
53+
.alert-dismissible { padding-right: 35px; }
54+
55+
.panel-heading { font-size:9px; cursor:pointer; }
56+
.panel-heading * { font-size:inherit; }
57+
.panel-heading > i { float: left; }
58+
.panel-heading .label { padding: .1em .6em .2em; }
59+
.label-default { background-color: rgba(119, 119, 119, 0.3); color: inherit; }
60+
61+
.btn-remove-session {
62+
margin-left: .75em;
63+
font-size: 1.5em;
64+
margin-top: -2px;
65+
}
66+
.panel-body {
67+
overflow: auto;
68+
}
69+
.panel-title {
70+
display: inline;
71+
}
72+
.panel-heading-body {
73+
margin-left: 2em;
74+
}
75+
.panel-heading-body .fa-spinner {
76+
margin-left: .75em;
77+
}

0 commit comments

Comments
 (0)