Getting started with ReactPHP – Pushing Real-Time Data to the Browser (IPC19)

2019-06-06 getting-started-with-reactphp-presentation-ipc.md

• Slides online: https://speakerdeck.com/clue/getting-started-with-reactphp-pushing-real-time-data-to-the-browser-ipc19
• Event info: https://phpconference.com/php-development/getting-started-with-reactphp-pushing-real-time-data-to-the-browser/

composer.json

{
    "require": {
        "react/event-loop": "^1.1",
        "react/stream": "^1.1",
        "react/socket": "^1.2",
        "clue/buzz-react": "^2.6",
        "react/http": "^0.8.4"
    }
}

example-01-loop-timers.php

<?php

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

$loop = React\EventLoop\Factory::create();

$loop->addTimer(0.5, function () {
    echo 'world';
});

$loop->addTimer(0.3, function () {
    echo 'hello';
});

// hint: this line is crucial
$loop->run();

example-02-periodic-limited.php

<?php

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

$loop = React\EventLoop\Factory::create();

$timer = $loop->addPeriodicTimer(0.1, function () {
    echo 'hello';
});

// hint: this is crucial, otherwise keeps running forever
$loop->addTimer(1.0, function () use ($timer, $loop) {
    $loop->cancelTimer($timer);
});

$loop->run();

example-11-stream-stdout.php

<?php

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

$loop = React\EventLoop\Factory::create();
$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$loop->addTimer(0.5, function () use ($out) {
    $out->write('world');
});

$loop->addTimer(0.3, function () use ($out) {
    $out->write('hello');
});

$loop->run();

example-12-stream-stdio.php

<?php

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

$loop = React\EventLoop\Factory::create();
$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$in = new React\Stream\ReadableResourceStream(STDIN, $loop);
$in->on('data', function ($data) use ($out) {
    $out->write(strtoupper($data));
});

$loop->run();

example-21-socket-server-echo.php

<?php

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

$loop = React\EventLoop\Factory::create();
$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$server = new React\Socket\Server('0.0.0.0:8000', $loop);

$server->on('connection', function (React\Socket\Connection $connection) use ($out) {
    $connection->on('data', function ($data) use ($out) {
        $out->write(strtoupper($data));
    });
});

$loop->run();

example-22-socket-server-broadcast.php

<?php

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

$loop = React\EventLoop\Factory::create();
$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$server = new React\Socket\Server('0.0.0.0:8000', $loop);
$server = new React\Socket\LimitingServer($server, null);

$server->on('connection', function (React\Socket\Connection $connection) use ($out, $server) {
    $connection->on('data', function ($data) use ($out, $server, $connection) {
        $ip = parse_url($connection->getRemoteAddress(), PHP_URL_HOST);
        $data = $ip . ': ' . addcslashes($data, "\0..\32\\") . "\n";
        $out->write($data);

        foreach ($server->getConnections() as $connection) {
            $connection->write($data);
        }
    });
});

$loop->run();

example-31-socket-block.php

<?php

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

$loop = React\EventLoop\Factory::create();

$socket = stream_socket_client('tcp://google.com:80');
$stream = new React\Stream\DuplexResourceStream($socket, $loop);

$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$stream->on('data', function ($data) use ($out) {
    $out->write(strtoupper($data));
});
$stream->write("GET / HTTP/1.0\r\n\r\n");

$loop->run();

example-32-socket-connect.php

<?php

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

$loop = React\EventLoop\Factory::create();
$connector = new React\Socket\Connector($loop);

$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$connector->connect('tcp://google.com:80')->then(function (React\Socket\Connection $stream) use ($out) {
    $stream->on('data', function ($data) use ($out) {
        $out->write(strtoupper($data));
    });
    $stream->write("GET / HTTP/1.0\r\n\r\n");
});

$loop->run();

example-41-http.php

<?php

use Psr\Http\Message\ResponseInterface;

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

$loop = React\EventLoop\Factory::create();
$browser = new Clue\React\Buzz\Browser($loop);
$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$browser->get('http://google.com/')->then(function (ResponseInterface $response) use ($out) {
    $out->write((string)$response->getBody());
});

$loop->run();

example-42-http-concurrency.php

<?php

use Psr\Http\Message\ResponseInterface;

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

$loop = React\EventLoop\Factory::create();
$browser = new Clue\React\Buzz\Browser($loop);
$out = new React\Stream\WritableResourceStream(STDOUT, $loop);

$n = $argv[1] ?? 3;
for ($i = 0; $i < $n; ++$i) {
    $browser->get('http://google.com/')->then(function (ResponseInterface $response) use ($out) {
        $out->write((string)$response->getBody());
    });
}

$loop->run();

example-51-http.php

<?php

use Psr\Http\Message\ServerRequestInterface;
use React\Http\Response;
use React\Stream\ThroughStream;
use React\Socket\ConnectionInterface;

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

$loop = \React\EventLoop\Factory::create();

$server = new React\Http\Server(function (ServerRequestInterface $request) {
    if ($request->getUri()->getPath() === '/') {
        return new Response(200, ['Content-Type'=>'text/html'], <<<HTML
<html>
<body>
Hello world!
</body>
</html>
HTML
        );
    }
});

$socket = new React\Socket\Server('0.0.0.0:8080', $loop);
$server->listen($socket);

$loop->run();

example-52-http-stream.php

<?php

use Psr\Http\Message\ServerRequestInterface;
use React\Http\Response;
use React\Stream\ThroughStream;
use React\Socket\ConnectionInterface;

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

$loop = \React\EventLoop\Factory::create();

$server = new React\Http\Server(function (ServerRequestInterface $request) use ($loop) {
    if ($request->getUri()->getPath() === '/') {
        $stream = new ThroughStream();

        $timer = $loop->addPeriodicTimer(0.1, function () use ($stream) {
            $stream->write("hello\n");
        });

        $loop->addTimer(1.0, function () use ($timer, $loop, $stream) {
            $loop->cancelTimer($timer);
            $stream->end();
        });

        return new Response(200, ['Content-Type'=>'text/html'], $stream);
    }
});

$socket = new React\Socket\Server('0.0.0.0:8080', $loop);
$server->listen($socket);

$loop->run();

example-61-http-sse.php

<?php
use Psr\Http\Message\ServerRequestInterface;
use React\Http\Response;
use React\Stream\ThroughStream;
use React\Socket\ConnectionInterface;
use React\Socket\Connector;

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

$loop = \React\EventLoop\Factory::create();
$connector = new Connector($loop);

$chat = new ThroughStream(function ($data) {
    echo $data . PHP_EOL;
    return $data;
});

$connector->connect('tcp://127.0.0.1:8000')->then(function (ConnectionInterface $conn) use ($chat) {
    $chat->write('connected');
    $conn->on('data', function ($chunk) use ($chat) {
        $chat->write(rtrim($chunk));
    });
}, 'printf');

$server = new React\Http\Server(function (ServerRequestInterface $request) use ($chat) {
    if ($request->getUri()->getPath() === '/') {
        return new Response(200, ['Content-Type'=>'text/html'], <<<HTML
<html>
<body>
<script>
var eventsource = new EventSource("/stream");
eventsource.addEventListener("message", function(message) {
    //console.log(message);
    document.body.innerHTML += message.data + "<br />";
});
</script>
Hello world!
</body>
</html>
HTML
        );
    }

    if ($request->getUri()->getPath() === '/stream') {
        $body = new ThroughStream(function ($data) {
            return 'data: ' . $data . PHP_EOL . PHP_EOL;
        });
        $chat->pipe($body);

        return new Response(
            200,
            ['Content-Type' => 'text/event-stream'],
            $body
        );
    }
});

$socket = new React\Socket\Server('0.0.0.0:8080', $loop);
$server->listen($socket);

$loop->run();