index.html

---
layout: base
title: Websockets powered by PHP and Symfony
---

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1>Sandstone</h1>
        <p>Build a real time RestApi.</p>

        <div class="jumbo-links">
            <a href="{{ site.baseurl }}/get-started" class="btn btn-lg btn-primary">
                <i class="fa fa-book" aria-hidden="true"></i>
                Get started
            </a>
            <a href="https://github.com/eole-io/sandstone" class="btn btn-lg btn-primary btn-github">
                <i class="fa fa-github" aria-hidden="true"></i>
                Github
            </a>
        </div>
    </div>
</div>

<div class="container home-content">
    <div class="row">
        <div class="col-sm-10 offset-sm-1">
            <p class="lead text-center">
                Sandstone is a PHP microframework designed to build a RestApi
                working together with a websocket server.
            </p>
        </div>
    </div>

    <h2>What can I do with Sandstone</h2>

    <p>
        <i>Microframework</i> means you can declare
        RestApi endpoints and websocket topics in a minimalist way.
    </p>
    <p>
        <i>Working together</i> means you can send push notifications to web client
        even from RestApi controllers.
    </p>

    <p>
        So you can mount real time RestApi, then:
    </p>
    <ul>
        <li>Notify all web clients that a new article has just been created through the RestApi</li>
        <li>Create a chat working with your RestApi</li>
        <li>For a game server, broadcasting players moves as soon as someone played</li>
    </ul>

    <h2>Live examples</h2>

    <h3>Create a simple chat topic</h3>

    <pre><code class="language-php">$app->topic('chat/demo', function ($topicPattern) {
    return new class ($topicPattern) extends Topic
    {
        public function onPublish(WampConnection $conn, $topic, $event)
        {
            $this->broadcast([
                'message' => $event,
            ]);
        }
    };
});</code></pre>

    <div class="input-group input-group-chat">
        <div class="input-group-prepend d-none d-md-flex">
            <span class="input-group-text"><code>session.publish('chat/demo', '</code></span>
        </div>
        <input type="text" class="form-control chat-input" value="Hello world!">
        <div class="input-group-append">
            <span class="input-group-text d-none d-md-flex"><code>');</code></span>
            <button class="btn btn-success" type="button">Send</button>
        </div>
    </div>

    <div class="card bg-secondary text-white">
        <div class="card-body">
            <div class="live-output chat-output">
            </div>
        </div>
    </div>

    <h3>Dispatch push event on Rest API call</h3>

    <p>
        It is possible to dispatch an event from Rest Api controller,
        and listen to it from a websocket topic for i.e broadcast it.
    </p>

    <p>See that live example of a simple Push event:</p>

    <p class="file">RestApi stack</p>

    <div class="language-php">
        <pre class="highlight language-php"><code class="language-php">/**
 * Dispatch push event on Rest API call
 */
$app->post('api/hello/{name}', function ($name) use ($app) {
    $event = new HelloEvent();
    $event->name = $name;

    $app['dispatcher']->dispatch('event.hello', $event);

    return new JsonResponse(['hello' => $name]);
})->value('name', 'world');

// Forward event to websocket process
$app->forwardEventToPushServer('event.hello');</code></pre>
    </div>

    <p class="file">Websocket stack</p>

    <div class="language-php">
        <pre class="highlight language-php"><code class="language-php">/**
 * Topic that broadcast push event
 */
$app->topic('push/demo', function ($topicPattern) {
    return new class ($topicPattern) extends Topic implements EventSubscriberInterface
    {
        public static function getSubscribedEvents()
        {
            return [
                'event.hello' => 'onHelloEvent',
            ];
        }

        public function onHelloEvent(HelloEvent $event)
        {
            $this->broadcast([
                'message' => "Someone called Rest Api /api/hello. Hello $event->name !",
            ]);
        }
    };
});</code></pre>
    </div>

    <button class="btn btn-success push-button post-api-hello" type="button">POST /api/hello</button>
    <button class="btn btn-success push-button post-api-hello-sandstone" type="button">POST /api/hello/sandstone</button>

    <div class="card bg-secondary text-white">
        <div class="card-body">
            <div class="live-output push-output">
            </div>
        </div>
    </div>

    <h2>How to get started</h2>

    <div class="row">
        <div class="col-md-6">
            <h3>Using microframework</h3>

            <p>
                If you're familiar with microframeworks (i.e expressJS, Python Flask, or PHP Silex),
                You can build a Sandstone application with only a few PHP files.
                See <a href="{{ site.baseurl }}/examples/full">this full example</a>.
            </p>
            <p>
                This way, you can create a fully customizable application.
            </p>
        </div>
        <div class="col-md-6">
            <h3>Using Sandstone edition</h3>

            <p>
                To create an application with already installed
                a database, Symfony web profiler... in a Docker environment,
                You may be insterested in the edition.
            </p>
            <p>
                This way, you can quickly bootstrap a Sandstone application,
                then be guided by the <a href="{{ site.baseurl }}/edition/cookbook">cookbook</a>
                to add endpoints, topics...
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <p class="text-center">
                <a href="{{ site.baseurl }}/get-started" class="btn btn-block btn-lg btn-primary">
                    <i class="fa fa-book" aria-hidden="true"></i>
                    Get started
                </a>
            </p>
        </div>
        <div class="col-md-6">
            <p class="text-center">
                <a href="{{ site.baseurl }}/edition/get-started" class="btn btn-block btn-lg btn-primary">
                    <i class="fa fa-book" aria-hidden="true"></i>
                    Get started with edition
                </a>
            </p>
        </div>
    </div>

    <h2>Working examples</h2>

    <p>
        <i class="fa fa-code" aria-hidden="true"></i>
        <a href="{{ site.baseurl }}/examples/full">Full example</a>
    </p>
    <p>
        <i class="fa fa-code" aria-hidden="true"></i>
        <a href="{{ site.baseurl }}/examples/multichannel-chat">Chat example</a>
    </p>
    <p>
        <i class="fa fa-code" aria-hidden="true"></i>
        <a href="{{ site.baseurl }}/authentication">Authenticated application</a>
    </p>
    <p>
        <i class="fa fa-github" aria-hidden="true"></i>
        <a href="https://github.com/eole-io/sandstone-doc-live/tree/master/src/chat">Chat demo of this page</a>
    </p>
    <p>
        <i class="fa fa-github" aria-hidden="true"></i>
        <a href="https://github.com/eole-io/sandstone-doc-live/tree/master/src/push">Push demo of this page</a>
    </p>
</div>

<script src="{{ site.baseurl }}/js/autobahn.min.js"></script>
<script src="{{ site.baseurl }}/js/live-examples.js"></script>