Private
Public Access
41 lines
2.1 KiB
PHP
41 lines
2.1 KiB
PHP
<section class="section">
|
|
<h1>Realtime Demo</h1>
|
|
<p>This demo uses the optional vendored realtime broker. Start it with the command in <code>server/realtime-broker/README.md</code>, then connect through your nginx <code>/live/</code> proxy or configured realtime URL.</p>
|
|
|
|
<div class="card" style="padding:1rem; margin:1rem 0;">
|
|
<div style="display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;">
|
|
<strong>Status:</strong> <span id="connection-status">offline</span>
|
|
<button type="button" id="realtime-connect">Connect</button>
|
|
<button type="button" id="realtime-ping">Ping PHP</button>
|
|
</div>
|
|
<form id="realtime-form" style="display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap;">
|
|
<input id="realtime-text" type="text" value="Hello realtime clients" style="flex:1; min-width:220px;">
|
|
<button type="submit">Broadcast</button>
|
|
</form>
|
|
</div>
|
|
|
|
<pre id="realtime-log" class="code" style="min-height:180px; white-space:pre-wrap;"></pre>
|
|
</section>
|
|
<script src="<?= url_root() ?>js/u-events.js"></script>
|
|
<script src="<?= url_root() ?>js/u-wsconnection.js"></script>
|
|
<script>
|
|
(function() {
|
|
var liveUrl = <?= json_encode(Realtime::live_url('/live/')) ?>;
|
|
var logNode = document.getElementById('realtime-log');
|
|
function log(message, data) {
|
|
logNode.textContent += '[' + new Date().toLocaleTimeString() + '] ' + message + (data ? ' ' + JSON.stringify(data) : '') + '\n';
|
|
logNode.scrollTop = logNode.scrollHeight;
|
|
}
|
|
Connection.debug = true;
|
|
Connection.on('open', function() { log('connected', { url: liveUrl }); });
|
|
Connection.on('close', function() { log('closed'); });
|
|
Connection.on('message', function(message) { log('message', message); });
|
|
document.getElementById('realtime-connect').addEventListener('click', function() { Connection.start(liveUrl); });
|
|
document.getElementById('realtime-ping').addEventListener('click', function() { Connection.send({ type: 'ping' }); });
|
|
document.getElementById('realtime-form').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
Connection.send({ type: 'demo-broadcast', text: document.getElementById('realtime-text').value });
|
|
});
|
|
})();
|
|
</script>
|