Skip to content

Instantly share code, notes, and snippets.

@isc-rsingh

isc-rsingh/cloudant-couchdb-changes.html

Last active August 29, 2015 14:27
Show Gist options
  • Save isc-rsingh/d6d3b9bc83df8b27ec51 to your computer and use it in GitHub Desktop.
Save isc-rsingh/d6d3b9bc83df8b27ec51 to your computer and use it in GitHub Desktop.
Download ZIP
Sets up a live replication link between a Cloudant or CouchDB database and an in-browser PouchDB database, and reports change activity
Raw
cloudant-couchdb-changes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Cloudant/CouchDB Changes Listener</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Cloudant/CouchDB Changes Listener</h1>
<p>This simple web app lets you listen to changes on a Cloudant database.
Enter your Cloudant database access credentials below, click the "Listen" button, and then any changes you make to the database (via cURL, the Cloudant Dashboard, or any other means) will be broadcast here.</p>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form" onsubmit="return false">
<div class="form-group">
<label for="searchterm">Database</label>
<input type="text" class="form-control" id="q" placeholder="https://$username:$pw@$username.cloudant.com/$databasename">
</div>
<button class="btn btn-primary" onclick="listen()">Listen</button>
&nbsp; <span id="searchtime"></span>
</form>
<p>&nbsp;</p><p>&nbsp;</p>
</div><!-- end column -->
</div><!-- end row -->
<div class="row">
<div class="col-sm-12">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Synchronization activity (via the <a href="http://pouchdb.com" target="_blank">PouchDB</a> API)</h3>
</div>
<div class="panel-body" id="messages" style="height:200px;overflow:scroll"></div>
</div>
</div><!-- end column -->
</div><!-- end row -->
</div><!-- top div -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/pouchdb/4.0.0/pouchdb.min.js"></script>
<script>
var changedb;
var localdb = new PouchDB('changetest');
localdb.info().then(function (info) {
sendMessage('Local database: ' + JSON.stringify(info));
});
function listen() {
var u = $('#q').val();
changedb = new PouchDB(u);
// sendMessage(u);
var sync = localdb.sync(changedb, {live:true,retry:true})
.on('change', function (info) {
sendMessage(['CHANGE', info]);
}).on('paused', function () {
sendMessage("Replication paused");
}).on('active', function () {
sendMessage("Active Replication...");
}).on('complete', function (info) {
sendMessage(['COMPLETE', info]);
}).on('denied', function (info) {
sendMessage(['DENIED', info]);
}).on('error', function (err) {
sendMessage(['ERROR', err]);
});
}
function sendMessage(strarray) {
if (typeof strarray === 'string') strarray = [strarray];
var m = $('#messages');
m.html(m.html() + '<hr>');
for (var i = 0; i < strarray.length; i++) {
var str = strarray[i];
if (typeof str == 'object' ) str = JSON.stringify(str);
m.html( m.html() + str + '<br/>' );
}
m.scrollTop(m[0].scrollHeight);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment