fiddle.html

<div>Ably Quickstart example</div>
<ul id="output">
</ul>

Message: <input id="message" type="text" value="Hello"><br>
<input type="submit" id="publish" value="Publish the message">
</html>

fiddle.js

var app = new Ably.Realtime('OPk-Mg.FpJlvg:wr_DvMODwpUXwrAc');

app.on('connect', function() {
  $('#output').append($('li').text("That was simple, we're now connected to Ably in realtime");
});

var channel = app.channel('quickstart');
channel.on('greeting', function(data) {
  $('#output').append($('li').text("Received a message: " + data));
});

$('#publish').on('click', function() {
  channel.publish('greeting', $('#message').value());
})

fiddle.manifest

name: Ably.io realtime example
description: Example code created by Ably.io
authors:
  - Ably.io
resources:
  - http://code.jquery.com/jquery-1.9.1.min.js
  - http://cdn.ably.io/lib/ably.js
normalize_css: no