ably · tomczoink · Jun 9, 2020 · Apr 16, 2020 · Apr 16, 2020 · Jun 9, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,8 @@
 tmp
 output
-crash.log
+/crash.log
 .sass*
-config/jsbin_config.yaml
-package-lock.json
+/config/jsbin_config.yaml
+/package-lock.json
 *.DS_Store
 tags
diff --git a/app/assets/images/realtime/delta-messages.png b/app/assets/images/realtime/delta-messages.png
diff --git a/content/code/realtime/channel-deltas-size.code b/content/code/realtime/channel-deltas-size.code
@@ -0,0 +1,152 @@
+[--- Javascript ---]
+var receivedLogNotDeltas = document.getElementById('received-not-deltas');
+var receivedLogDeltas = document.getElementById('received-deltas');
+var totalWithoutDeltas = document.getElementById('no-delta');
+var totalWithDeltas = document.getElementById('delta');
+
+var clientOptions = {
+ key: '{{API_KEY}}',
+ plugins: {
+ vcdiff: {
+ decode: decodeAndCountSize
+ }
+ }
+ };
+
+var deltaChannelOptions = {
+ params: {
+ delta: 'vcdiff',
+ rewind: 10
+ }
+ };
+
+var ably = new Ably.Realtime(clientOptions);
+
+var deltaChannel = ably.channels.get('[product:cttransit/gtfsr]vehicle:all', deltaChannelOptions);
+
+var channel = ably.channels.get('[product:cttransit/gtfsr]vehicle:all');
+
+
+/* Subscribe to a channel normally */
+channel.subscribe(function(message, err) {
+ var size = getMessageSize(message);
+ totalWithoutDeltas.innerHTML = parseInt(totalWithoutDeltas.innerHTML, 10) + size;
+ receivedLogNotDeltas.insertAdjacentHTML('afterbegin', '<li>' + JSON.stringify(message.data) + '</li>');
+});
+
+/* Subscribe to a channel using deltas */
+deltaChannel.subscribe(function(message) {
+ receivedLogDeltas.insertAdjacentHTML('afterbegin', '<li>' + JSON.stringify(message.data) + '</li>');
+});
+
+/* Recursively work out the size of the message's elements */
+function getMessageSize(message) {
+ var bytes = 0;
+ if (typeof message === 'boolean') {
+ bytes += 4;
+ } else if (typeof message === 'string') {
+ bytes += message.length * 2;
+ } else if(typeof message === 'object') {
+ for (var i in message) {
+ /* Calculate the size of components of the object */
+ bytes += i.length * 2;
+ bytes += getMessageSize(message[i]);
+ }
+ } else if (typeof message == 'number') {
+ bytes += 8;
+ } else if (message === undefined) {
+ bytes += 1;
+ }
+ return bytes;
+}
+
+/* Wrapper for the vcdiff decoder, allowing us to check the size of the original diff */
+function decodeAndCountSize(delta, source) {
+ totalWithDeltas.innerHTML = parseInt(totalWithDeltas.innerHTML, 10) + delta.byteLength;
+ var result = decoder.decode(delta, source);
+ return result;
+}
+[--- /Javascript ---]
+
+[--- HTML ---]
+<html>
+<head>
+ <script src="//cdn.ably.io/lib/ably-1.js"></script>
+ <script src="//cdn.ably.io/lib/vcdiff-decoder.min-1.js"></script>
+ </head>
+<body>
+ <h1><a href="https://www.ably.io" target="_blank" rel="noopener"><img src="/images/favicon.png">Ably realtime deltas comparison</a></h1>
+ <p>A simple example demonstrating how using <a href="https://www.ably.io/documentation/realtime/channels/deltas" target="_blank">deltas</a> compares to not using deltas.</p>
+ <p>This example by default is subscribed to the CTtransit bus source, found on the <a href="https://www.ably.io/hub" target="_blank">Ably Hub</a>. If you want to test this on one of your own channels, you can replace the API key with one of your own.</p>
+
+ <p>Cumulative size of messages sent <b>without deltas</b>: <span id="no-delta">0</span> Bytes</p>
+ <p>Cumulative size of messages sent <b>with deltas</b>: <span id="delta">0</span> Bytes</p>
+ <section>
+ <h2>No deltas output</h2>
+ <ul id="received-not-deltas"></ul>
+
+ <h2>Deltas output</h2>
+ <ul id="received-deltas"></ul>
+ </tr>
+ </section>
+</body>
+</html>
+[--- /HTML ---]
+
+[--- CSS ---]
+body {
+ font-family: Arial, Sans Serif;
+ font-size: 13px;
+ min-width: 700px;
+}
+
+h1 {
+ font-family: Arial, Sans Serif;
+ font-size: 18px;
+}
+
+a, a:visited, a:active {
+ color: #ed760a;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+section {
+ padding: 10px 4px;
+ column-count: 2;
+ column-gap: 5px;
+}
+
+h2 {
+ margin: 0 auto 4px;
+ text-align: center;
+}
+
+ul {
+ display: block;
+ height: calc(100vh - 230px);
+ margin:0;
+ padding:0;
+ border: 1px solid #CCC;
+ overflow: scroll;
+ background-color: #EEE;
+
+}
+
+li {
+ padding: 2px 5px;
+ list-style: none;
+ line-height: 2em;
+}
+
+li:nth-child(even) {
+ background:#ccc;
+}
+
+section {
+ column-count: 2;
+}
+[--- /CSS ---]
diff --git a/content/code/realtime/channel-deltas.code b/content/code/realtime/channel-deltas.code
@@ -0,0 +1,74 @@
+[--- Javascript ---]
+var apiKey = '{{API_KEY}}';
+var channelName = '{{RANDOM_CHANNEL_NAME}}';
+var realtimePublisher = new Ably.Realtime({ key: apiKey });
+
+/* Initialize subscriber with delta plugin. Makes use of the vcdiff-decoder we've included in the HTML */
+var realtimeSubscriber = new Ably.Realtime({ key: apiKey,
+ plugins: {
+ vcdiff: vcdiffDecoder
+ }
+ });
+var deltaChannelOptions = {
+ params: {
+ delta: 'vcdiff'
+ }
+ };
+
+var channelPublisher = realtimePublisher.channels.get(channelName);
+
+/* Specify in the channel options to use deltas for this channel */
+var channelSubscriber = realtimeSubscriber.channels.get(channelName, deltaChannelOptions);
+
+$('input#publish').on('click', function() {
+ show('Publishing message', 'orange');
+ channelPublisher.publish('event', 'data', function(err) {
+ if (err) {
+ show('✗ Publish failed: ' + err.message, 'red');
+ } else {
+ show('✓ Publish successful', 'green');
+ }
+ });
+});
+
+channelSubscriber.subscribe(function(message) {
+ show('⬅ Received message on subscription', 'green');
+});
+
+function show(status, color) {
+ $('#channel-status').append($('<li>').text(status).css('color', color));
+}
+[--- /Javascript ---]
+
+[--- HTML ---]
+<script type="text/javascript" src="//cdn.ably.io/lib/ably.min-1.js"></script>
+<script src="//jsbin-files.ably.io/js/jquery-1.8.3.min.js"></script>
+<script src="//cdn.ably.io/lib/vcdiff-decoder.min-1.js"></script>
+<h1>Ably Deltas Example</h1>
+
+<p>In this example, we demonstrate the simplest way to subscribe to deltas on a channel. See <a href="https://www.ably.io/documentation/realtime/channels/channel-parameters/deltas">our deltas documentation</a> for more details.
+
+<div class="row">
+ <input id="publish" type="submit" value="Publish a message">
+</div>
+
+<ul class="row" id="channel-status"></ul>
+[--- /HTML ---]
+
+[--- CSS ---]
+body {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+h1 {
+ background: url('//jsbin-files.ably.io/images/logo.png') no-repeat;
+ font-size: 18px;
+ font-weight: bold;
+ padding: 8px 0 0 120px;
+ height: 42px;
+}
+
+.row {
+ margin-bottom: 1em;
+}
+[--- /CSS ---]
diff --git a/content/code/realtime/rewind.code b/content/code/realtime/rewind.code
@@ -58,7 +58,7 @@ function show(status, color, box) {
 <body>
  <h1><a href="https://www.ably.io" target="_blank"><img src="/images/favicon.png">Ably Rewind demo</a></h1>
 
- <p>In this example, we demonstrate the simplest way to subscribe to a message using rewind in libraries older than v1.2. See <a href="https://www.ably.io/documentation/realtime/channel-params#rewind">our Rewind documentation</a> for more details.
+ <p>In this example, we demonstrate the simplest way to subscribe to a message using rewind in libraries older than v1.2. See <a href="https://www.ably.io/documentation/realtime/channels/channel-parameters/overview/rewind">our Rewind documentation</a> for more details.
 
  <div class="row">
  <input id="publish" type="submit" value="Publish a message">

diff --git a/content/code/sse/eventstream.code b/content/code/sse/eventstream.code
@@ -1,7 +1,7 @@
 [--- Javascript ---]
 var channel = "{{RANDOM_CHANNEL_NAME}}";
 var apiKey = "{{API_KEY}}";
-var url = "https://realtime.ably.io/event-stream?v=1.1&key=" + apiKey + "&channels=" + channel;
+var url = "https://realtime.ably.io/event-stream?v=1.2&key=" + apiKey + "&channels=" + channel;
 
 var xhttp = new XMLHttpRequest();
 

diff --git a/content/code/sse/sse.code b/content/code/sse/sse.code
@@ -1,7 +1,7 @@
 [--- Javascript ---]
 var channel = "{{RANDOM_CHANNEL_NAME}}";
 var apiKey = "{{API_KEY}}";
-var url = "https://realtime.ably.io/sse?v=1.1&key=" + apiKey + "&channels=" + channel;
+var url = "https://realtime.ably.io/sse?v=1.2&key=" + apiKey + "&channels=" + channel;
 
 var eventSource = new EventSource(url);
 eventSource.onopen = function() {

diff --git a/content/concepts/long-polling.textile b/content/concepts/long-polling.textile
@@ -112,7 +112,7 @@ From the readme, "Pollymer is a general-purpose AJAX library that provides conve
 
 Optional extras include support for JSON-P and logging.
 
-```[js]
+```[javascript]
 var req = new Pollymer.Request();
 req.on('finished', function(code, result, headers) { ... });
 req.on('error', function(reason) { ... });