ably · tomczoink · Jun 9, 2020 · May 5, 2020 · May 19, 2020 · May 20, 2020
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/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) { ... });

diff --git a/content/mqtt/index.textile b/content/mqtt/index.textile
@@ -35,8 +35,8 @@ For example, in the NodeJS "MQTT package":https://www.npmjs.com/package/mqtt, yo
 bc[nodejs]. {
  var options = {
  keepalive: 30,
- username: 'FIRST_HALF_OF_API_KEY',
- password: 'SECOND_HALF_OF_API_KEY',
+ username: '{{API_KEY_NAME}}', /* API key's name */
+ password: '{{API_KEY_SECRET}}', /* API key's secret */
  port: 8883
  };
  var client = mqtt.connect('mqtts:mqtt.ably.io', options);
@@ -54,8 +54,8 @@ bc[nodejs]. {
  var decoder = new encoding.TextDecoder();
  var options = {
  keepalive: 30,
- username: 'FIRST_HALF_OF_API_KEY',
- password: 'SECOND_HALF_OF_API_KEY',
+ username: '{{API_KEY_NAME}}', /* API key's name */
+ password: '{{API_KEY_SECRET}}', /* API key's secret */
  port: 8883
  };
  var client = mqtt.connect('mqtts:mqtt.ably.io', options);

diff --git a/content/partials/types/_channel_options.textile b/content/partials/types/_channel_options.textile
@@ -1,4 +1,4 @@
-Currently the supported channel options are only used for "configuring encryption":/realtime/encryption.
+Channel options are used for setting "channel parameters":/realtime/channels/channel-parameters/overview and "configuring encryption":/realtime/encryption.
 
 blang[jsall].
  @ChannelOptions@, a plain Javascript object, may optionally be specified when instancing a "@Channel@":/realtime/channels, and this may be used to specify channel-specific options. The following attributes can be defined on the object:
@@ -20,6 +20,9 @@ h4.
  java: Members
  ruby: Attributes
 
+blang[jsall,java,swift,objc,dotnet].
+ - <span lang="default">params</span><span lang="csharp">Params</span> := Optional "parameters":/realtime/channels/channel-parameters/overview which specify behaviour of the channel.<br>__Type: <span lang='java'>@Map<String, String>@</span><span lang='jsall,objc,dotnet,swift'>@JSON Object@</span>__
+
 - <span lang="default">cipher</span><span lang="ruby">:cipher</span><span lang="csharp,go">CipherParams</span> := Requests encryption for this channel when not null, and specifies encryption-related parameters (such as algorithm, chaining mode, key length and key). See "an example":/realtime/encryption#getting-started<br>__Type: "@CipherParams@":/realtime/encryption#cipher-params<span lang="jsall,java,ruby,php"> or <span lang="jsall">an options object</span><span lang="java">a @Param[]@ list</span><span lang="ruby">an options hash</span><span lang="php">an Associative Array</span> containing at a minimum a @key@</span>__
 
 blang[java].

diff --git a/content/realtime/channel-metadata.textile b/content/realtime/channel-metadata.textile
@@ -1,7 +1,7 @@
 ---
 title: Channel Metadata API
 section: realtime
-index: 31
+index: 3
 jump_to:
  Help with:
  - Overview#overview