Add broadcast example

amphp · Jan 25, 2019 · 3d177ff · 3d177ff
1 parent 9740755
commit 3d177ff
Show file tree

Hide file tree

Showing 2 changed files with 181 additions and 0 deletions.
diff --git a/examples/broadcast-server/public/index.html b/examples/broadcast-server/public/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Broadcast Example</title>
+    <style>
+        * { padding: 0; margin: 0; box-sizing: border-box; }
+        body { font-size: 14px; font-family: sans-serif; display: flex; height: 100vh; flex-direction: column; box-sizing: border-box; padding: 50px; }
+
+        input[type=text] {
+            line-height: 34px;
+            height: 34px;
+            border: 2px solid #ccc;
+            background: white;
+            border-radius: 4px;
+            padding: 0 10px;
+        }
+
+        input[type=text]:focus {
+            border-color: #08e;
+            outline: 0;
+        }
+
+        #messages { flex: 1 1 auto; list-style: none; }
+        #messages > li { margin: 0 20px; padding: 20px; border-bottom: 1px solid #ccc; }
+        #messages > li:last-child { border-bottom: 0; }
+
+        #messages {
+            list-style-type: none;
+            display: block;
+            padding-left: 0;
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        #messages li {
+            border-bottom: 1px solid #eee;
+            margin-bottom: 5px;
+            padding: 5px 0 5px 0;
+        }
+
+        .delayed {
+            -webkit-animation: fadein 1000ms;
+            -moz-animation: fadein 1000ms;
+            -ms-animation: fadein 1000ms;
+            -o-animation: fadein 1000ms;
+            animation: fadein 1000ms;
+        }
+
+        /* http://stackoverflow.com/a/11681331/2373138 */
+        @keyframes fadein {
+            from { opacity: 0; }
+            to   { opacity: 1; }
+        }
+
+        /* Firefox < 16 */
+        @-moz-keyframes fadein {
+            from { opacity: 0; }
+            to   { opacity: 1; }
+        }
+
+        @-webkit-keyframes fadein {
+            from { opacity: 0; }
+            to   { opacity: 1; }
+        }
+
+        @-ms-keyframes fadein {
+            from { opacity: 0; }
+            to   { opacity: 1; }
+        }
+
+        @-o-keyframes fadein {
+            from { opacity: 0; }
+            to   { opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+<ul id="messages"></ul>
+<input type="text" name="message">
+<script>
+    console.log("I'm fine");
+
+    var ws = new WebSocket("ws://localhost:1337/broadcast");
+    var list = document.getElementById("messages");
+    var input = document.querySelector('input[name=message]');
+
+    // append all received messages to #messages
+    ws.addEventListener("message", function(e) {
+        console.log(e.data);
+
+        var listItem = document.createElement('li');
+        listItem.className = 'delayed';
+        listItem.textContent = e.data;
+
+        list.append(listItem);
+
+        while (list.children.length > 5) {
+            list.removeChild(list.firstChild);
+        }
+    });
+
+    input.addEventListener('keyup', function (e) {
+        if (e.keyCode === 13) {
+            e.preventDefault();
+
+            ws.send(e.target.value);
+            e.target.value = "";
+            e.target.focus();
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/examples/broadcast-server/server.php b/examples/broadcast-server/server.php
@@ -0,0 +1,67 @@
+<?php
+
+// Note that this example requires amphp/http-server-router,
+// amphp/http-server-static-content and amphp/log to be installed.
+
+use Amp\Http\Server\Request;
+use Amp\Http\Server\Response;
+use Amp\Http\Server\Router;
+use Amp\Http\Server\Server;
+use Amp\Http\Server\StaticContent\DocumentRoot;
+use Amp\Http\Server\Websocket\Message;
+use Amp\Http\Server\Websocket\Websocket;
+use Amp\Log\ConsoleFormatter;
+use Amp\Log\StreamHandler;
+use Amp\Loop;
+use Amp\Socket;
+use Monolog\Logger;
+use function Amp\ByteStream\getStdout;
+
+require __DIR__ . '/../../vendor/autoload.php';
+
+$websocket = new class extends Websocket
+{
+    public function onHandshake(Request $request, Response $response)
+    {
+        if (!\in_array($request->getHeader('origin'), ['http://localhost:1337', 'http://127.0.0.1:1337', 'http://[::1]:1337'], true)) {
+            $response->setStatus(403);
+        }
+
+        return $response;
+    }
+
+    public function onOpen(int $clientId, Request $request)
+    {
+        // do nothing
+    }
+
+    public function onData(int $clientId, Message $message)
+    {
+        yield $this->broadcast(yield $message->buffer());
+    }
+
+    public function onClose(int $clientId, int $code, string $reason)
+    {
+        // do nothing
+    }
+};
+
+$sockets = [
+    Socket\listen('127.0.0.1:1337'),
+    Socket\listen('[::1]:1337'),
+];
+
+$router = new Router;
+$router->addRoute('GET', '/broadcast', $websocket);
+$router->setFallback(new DocumentRoot(__DIR__ . '/public'));
+
+$logHandler = new StreamHandler(getStdout());
+$logHandler->setFormatter(new ConsoleFormatter);
+$logger = new Logger('server');
+$logger->pushHandler($logHandler);
+
+$server = new Server($sockets, $router, $logger);
+
+Loop::run(function () use ($server) {
+    yield $server->start();
+});