Sephi-Chan/index.php

## index.php
<?php
require __DIR__ . '/vendor/autoload.php';
use \Firebase\JWT\JWT;

$salt = "crevettes au Nutella"; // Le même clé secrète que celle transmise à JeuWeb Push.
// La payload:
//   - DOIT contenir une clé "user" qui identifie votre joueur et sera utilisée par votre système (généralement un ID).
//   - PEUT contenir une clé "allowed_channels", un tableau contenant les noms des canaux privés autorisés.
$payload = [
  "user" => 42,
  "allowed_channels" => [ "private-user:42", "private-team:blue" ]
];
$token = JWT::encode($payload, $salt);
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Seelies</title>
    <meta charset="utf-8" />
    <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" />
  </head>
  <body>
    <h1>Seelies</h1>

    <div>
      <ul id="messages-list">
      </ul>
      <form id="chat-form">
        <input id="new-message" size="100" value="Hello world!" />
        <button>Envoyer</button>
      </form>
    </div>

    <script src="http://push.jeuweb.localhost:4000/js/client.js"></script>
    <script>
      const form = document.getElementById("chat-form");
      const input = document.getElementById("new-message");
      const list = document.getElementById("messages-list");


      // L'objets params:
      //    - DOIT contenir une clé "app" qui contient le nom de l'app définie dans JeuWeb Push.
      //    - DOIT contenir une clé "token" qui contient le… token.
      const params = { app: "seelies", token: <?php echo json_encode($token) ?> };
      const socket = new window.JeuWebSocket("ws://push.jeuweb.localhost:4000/socket", {params: params});
      socket.connect();

      const publicChannel = socket.channel("general");
      publicChannel.join().receive("ok", function() { console.log("Joined general.") });
      publicChannel.on("new-message", function(payload) {
        const item = document.createElement('li');
        const text = document.createTextNode(`${payload.user} : ${payload.message}`);
        item.appendChild(text);
        list.appendChild(item);
      });

      const allowedPrivateChannel = socket.channel("private-user:42")
      allowedPrivateChannel.join().receive("ok", function() { console.log("Joined private-user:42.") });

      const forbiddenPrivateChannel = socket.channel("private-team:red")
      forbiddenPrivateChannel.join()
        .receive("ok", function() { console.log("Joined private-team:red.") }) // NOPE!
        .receive("error", function() { console.log("Failed to join private-team:red.") });


      form.addEventListener("submit", function(event) {
        event.preventDefault();
        const body = { message: input.value };
        input.value = "";
        fetch("post_message.php", { method: "POST", body: JSON.stringify(body) });
      });
    </script>
  </body>
</html>

## post_message.php
<?php
require __DIR__ . '/vendor/autoload.php';

// What channel you want to push on.
$channel = "general";

// A description of the action. In the JavaScript part you subscribe to these event on the channel.
$event = "new-message";

// Object you want to push.
$payload = [
  "user" => "Sephi-Chan",
  "message" => "Hello world!", // $_POST["message"]
];

$client = new \GuzzleHttp\Client([ "timeout" => 2 ]);
$client->request('POST', 'http://push.jeuweb.localhost:4000/pushes', [
  "json" => [
    "channel" => $channel,
    "event" => $event,
    "payload" => $payload
  ]
]);

die("ok");
	<?php
	require __DIR__ . '/vendor/autoload.php';
	use \Firebase\JWT\JWT;

	$salt = "crevettes au Nutella"; // Le même clé secrète que celle transmise à JeuWeb Push.
	// La payload:
	// - DOIT contenir une clé "user" qui identifie votre joueur et sera utilisée par votre système (généralement un ID).
	// - PEUT contenir une clé "allowed_channels", un tableau contenant les noms des canaux privés autorisés.
	$payload = [
	"user" => 42,
	"allowed_channels" => [ "private-user:42", "private-team:blue" ]
	];
	$token = JWT::encode($payload, $salt);
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Seelies</title>
	<meta charset="utf-8" />
	<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" />
	</head>
	<body>
	<h1>Seelies</h1>

	<div>
	<ul id="messages-list">
	</ul>
	<form id="chat-form">
	<input id="new-message" size="100" value="Hello world!" />
	<button>Envoyer</button>
	</form>
	</div>

	<script src="http://push.jeuweb.localhost:4000/js/client.js"></script>
	<script>
	const form = document.getElementById("chat-form");
	const input = document.getElementById("new-message");
	const list = document.getElementById("messages-list");


	// L'objets params:
	// - DOIT contenir une clé "app" qui contient le nom de l'app définie dans JeuWeb Push.
	// - DOIT contenir une clé "token" qui contient le… token.
	const params = { app: "seelies", token: <?php echo json_encode($token) ?> };
	const socket = new window.JeuWebSocket("ws://push.jeuweb.localhost:4000/socket", {params: params});
	socket.connect();

	const publicChannel = socket.channel("general");
	publicChannel.join().receive("ok", function() { console.log("Joined general.") });
	publicChannel.on("new-message", function(payload) {
	const item = document.createElement('li');
	const text = document.createTextNode(`${payload.user} : ${payload.message}`);
	item.appendChild(text);
	list.appendChild(item);
	});

	const allowedPrivateChannel = socket.channel("private-user:42")
	allowedPrivateChannel.join().receive("ok", function() { console.log("Joined private-user:42.") });

	const forbiddenPrivateChannel = socket.channel("private-team:red")
	forbiddenPrivateChannel.join()
	.receive("ok", function() { console.log("Joined private-team:red.") }) // NOPE!
	.receive("error", function() { console.log("Failed to join private-team:red.") });


	form.addEventListener("submit", function(event) {
	event.preventDefault();
	const body = { message: input.value };
	input.value = "";
	fetch("post_message.php", { method: "POST", body: JSON.stringify(body) });
	});
	</script>
	</body>
	</html>
	<?php
	require __DIR__ . '/vendor/autoload.php';

	// What channel you want to push on.
	$channel = "general";

	// A description of the action. In the JavaScript part you subscribe to these event on the channel.
	$event = "new-message";

	// Object you want to push.
	$payload = [
	"user" => "Sephi-Chan",
	"message" => "Hello world!", // $_POST["message"]
	];

	$client = new \GuzzleHttp\Client([ "timeout" => 2 ]);
	$client->request('POST', 'http://push.jeuweb.localhost:4000/pushes', [
	"json" => [
	"channel" => $channel,
	"event" => $event,
	"payload" => $payload
	]
	]);

	die("ok");