PHP Dumper using Websockets

Another crazy idea. I want to dump my backend output in the browser’s console. There’re several PHP dumpers. For example Raul Fraile’s LadyBug. There’re also libraries to do exactly what I want to do, such as Chrome Logger. But I wanted to use Websockets and dump values in real time, without waiting to the end of backend script. Why? The answer is simple: Because I wanted to it 🙂

I’ve written several post about Websockets, Silex, PHP. In this case I’ll use a similar approach than the previous posts. First I’ve created a simple Webscocket server with This server also starts a Express server to handle internal messages from the Silex Backend

var CONF = {
        IO: {HOST: '', PORT: 8888},
        EXPRESS: {HOST: '', PORT: 26300}
    express = require('express'),
    expressApp = express(),
    server = require('http').Server(expressApp),
    io = require('')(server, {origins: 'localhost:*'})

expressApp.get('/:type/:session/:message', function (req, res) {
    var session = req.params.session,
        type = req.params.type,
        message = req.params.message;

    io.sockets.emit('dumper.' + session, {title: type, data: JSON.parse(message)});

io.sockets.on('connection', function (socket) {
    console.log("Socket connected!");

expressApp.listen(CONF.EXPRESS.PORT, CONF.EXPRESS.HOST, function () {
    console.log('Express started');

server.listen(CONF.IO.PORT, CONF.IO.HOST, function () {
    console.log('IO started');

Now we create a simple Service provider to connect our Silex Backend to our Express server (and send the dumper’s messages using the websocket connection)


namespace Dumper\Silex\Provider;

use Silex\Application;
use Silex\ServiceProviderInterface;
use Dumper\Dumper;
use Silex\Provider\SessionServiceProvider;
use GuzzleHttp\Client;

class DumperServiceProvider implements ServiceProviderInterface
    private $wsConnector;
    private $client;

    public function __construct(Client $client, $wsConnector)
        $this->client = $client;
        $this->wsConnector = $wsConnector;

    public function register(Application $app)
        $app->register(new SessionServiceProvider());

        $app['dumper'] = function () use ($app) {
            return new Dumper($this->client, $this->wsConnector, $app['session']->get('uid'));

        $app['dumper.init'] = $app->protect(function ($uid) use ($app) {
            $app['session']->set('uid', $uid);

        $app['dumper.uid'] = function () use ($app) {
            return $app['session']->get('uid');

    public function boot(Application $app)

Finally our Silex Application looks like that:

include __DIR__ . '/../vendor/autoload.php';

use Silex\Application;
use Silex\Provider\TwigServiceProvider;
use Dumper\Silex\Provider\DumperServiceProvider;
use GuzzleHttp\Client;

$app = new Application([
    'debug' => true

$app->register(new DumperServiceProvider(new Client(), ''));

$app->register(new TwigServiceProvider(), [
    'twig.path' => __DIR__ . '/../views',

$app->get("/", function (Application $app) {
    $uid = uniqid();


    return $app['twig']->render('index.twig', [
        'uid' => $uid

$app->get('/api/hello', function (Application $app) {
    $app['dumper']->error("Hello world1");

    return $app->json('OK');


In the client side we have one index.html. I’ve created Twig template to pass uid to the dumper object (the websocket channel to listen to), but we also can fetch this uid from the backend with one ajax call.

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Dumper example</title>

<a href="#" onclick="api('hello')">hello</a>

<!-- We use jQuery just for the demo. Library doesn't need jQuery -->
<script src="assets/jquery/dist/jquery.min.js"></script>
<!-- We load the library -->
<script src="js/dumper.js"></script>

    dumper.startSocketIo('{{ uid }}', '//localhost:8888');
    function api(name) {
        // we perform a remote api ajax call that triggers websockets
        $.getJSON('/api/' + name, function (data) {
            // Doing nothing. We only call the api to test php dumper

I use jQuery to handle ajax request and to connect to the websocket dumper object (it doesn’t deppend on jQuery, only depend on

var dumper = (function () {
    var socket, sessionUid, socketUri, init;

    init = function () {
        if (typeof(io) === 'undefined') {
            setTimeout(init, 100);
        } else {
            socket = io(socketUri);

            socket.on('dumper.' + sessionUid, function (data) {
      'Dumper:', data.title);
                switch (data.title) {
                    case 'emergency':
                    case 'alert':
                    case 'critical':
                    case 'error':
                    case 'warning':
                    case 'notice':
                    case 'info':
                    //case 'debug':

    return {
        startSocketIo: function (uid, uri) {
            var script = document.createElement('script');
            var node = document.getElementsByTagName('script')[0];

            sessionUid = uid;
            socketUri = uri;
            script.src = socketUri + '/';
            node.parentNode.insertBefore(script, node);


Source code is available in my github account


3 thoughts on “PHP Dumper using Websockets

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.