Add in discojs demo as contrib.

strophe · Dec 9, 2008 · 8131a0b · 8131a0b
1 parent 2aee289
commit 8131a0b
Show file tree

Hide file tree

Showing 6 changed files with 285 additions and 0 deletions.
diff --git a/contrib/discojs/README.txt b/contrib/discojs/README.txt
@@ -0,0 +1,42 @@
+Disco Dancing with XMPP
+
+      There are many things one can do via XMPP. The list is
+  endlist. But one thing that some forget about is discovering
+  services a XMPP entity or server provides. In most cases a human or
+  user does not care about this information and should not care. But
+  you may have a website or web application that needs this
+  information in order to decide what options to show to your
+  users. You can do this very easily with JQuery, Strophe, and
+  Punjab. 
+
+  	  We start with Punjab or a BOSH connection manager. This is
+  needed so we can connect to a XMPP server. First, lets download
+  punjab.
+
+  svn co https://code.stanziq.com/svn/punjab/trunk punjab
+
+  After we have punjab go into the directory and install punjab.
+
+  cd punjab
+  python setup.py install
+
+  Then create a .tac file to configure Punjab.
+
+  See punjab.tac 
+
+  Next, we will need Strophe. Lets download thelatest version from
+  svn too. 
+
+  cd /directory/where/you/configured/punjab/html
+
+  svn co https://code.stanziq.com/svn/strophe/trunk/strophejs
+
+  In your html directory you will then begin to create your disco browser.  
+
+  Version 1 we take the basic example and modify it to do disco.
+
+  Version 2 we add anonymous login
+
+  Version 3 we make it pretty 
+
+  Version 4 we add handlers for different services
diff --git a/contrib/discojs/css/disco.css b/contrib/discojs/css/disco.css
@@ -0,0 +1,16 @@
+#login .leftinput
+{
+  margin-bottom: .5em;
+}
+
+#login input
+{
+  margin-bottom: 10px;
+}
+
+#log { 
+   width: 100%;
+   height: 200px;
+   overflow: auto;
+
+ }
diff --git a/contrib/discojs/index.html b/contrib/discojs/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>XMPP Disco Dancing</title>
+  <script language='javascript' 
+	  type='text/javascript'
+	  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
+  <script language='javascript'
+	  type='text/javascript'
+	  src='strophejs/b64.js'></script>
+  <script language='javascript'
+	  type='text/javascript'
+	  src='strophejs/md5.js'></script>
+  <script language='javascript'
+	  type='text/javascript'
+	  src='strophejs/sha1.js'></script>
+  <script language='javascript'
+	  type='text/javascript'
+	  src='strophejs/strophe.js'></script>
+<script language='javascript'
+	  type='text/javascript'
+	  src='scripts/basic.js'></script>
+  <script language='javascript'
+	  type='text/javascript'
+	  src='scripts/disco.js'></script>
+  <link rel="stylesheet" href="css/disco.css" type="text/css" />
+</head>
+<body>
+  <div id='login' style='text-align: center'>
+    <form id='cred' name='cred'>
+      <label for='jid'>JID:</label>
+      <input type='text' class='leftinput' id='jid' />
+      <label for='pass'>Password:</label>
+      <input type='password' class='leftinput' id='pass' />
+      <input type='submit' id='connect' value='connect' />
+    </form>
+ <br/>
+  </div>
+  <hr />
+  <div id='disco'>
+</div>
+  <hr />
+  <div id='log_container'>
+<a href='#'>Status Log :</a>
+<div id='log'></div></div>
+</body>
+</html>
diff --git a/contrib/discojs/punjab.tac b/contrib/discojs/punjab.tac
@@ -0,0 +1,18 @@
+# punjab tac file
+from twisted.web import server, resource, static
+from twisted.application import service, internet
+
+from punjab.httpb  import Httpb, HttpbService
+
+root = static.File("./") # This needs to be the directory 
+                         # where you will have your html 
+                         # and javascript.
+
+b = resource.IResource(HttpbService(1)) # turn on debug with 1
+root.putChild('bosh', b)
+
+
+site  = server.Site(root)
+
+application = service.Application("punjab")
+internet.TCPServer(5280, site).setServiceParent(application)
diff --git a/contrib/discojs/scripts/basic.js b/contrib/discojs/scripts/basic.js
@@ -0,0 +1,102 @@
+var BOSH_SERVICE = 'http://localhost:5280/bosh';
+
+var connection   = null;
+var browser      = null;
+var show_log     = true;
+
+function log(msg) 
+{
+    $('#log').append('<div></div>').append(document.createTextNode(msg));
+}
+
+
+function rawInput(data)
+{
+    log('RECV: ' + data);
+}
+
+function rawOutput(data)
+{
+    log('SENT: ' + data);
+}
+
+function onConnect(status)
+{
+    if (status == Strophe.Status.CONNECTING) {
+	log('Strophe is connecting.');
+
+    } else if (status == Strophe.Status.CONNFAIL) {
+	log('Strophe failed to connect.');
+	showConnect();
+    } else if (status == Strophe.Status.DISCONNECTING) {
+	log('Strophe is disconnecting.');
+    } else if (status == Strophe.Status.DISCONNECTED) {
+	log('Strophe is disconnected.');
+	showConnect();
+
+    } else if (status == Strophe.Status.CONNECTED) {
+	log('Strophe is connected.');
+	// Start up disco browser
+	browser.showBrowser();
+    }
+}
+
+function showConnect()
+{
+    var jid = $('#jid');
+    var pass = $('#pass');
+    var button = $('#connect').get(0);	
+
+    browser.closeBrowser();
+
+    $('label').show();
+    jid.show();
+    pass.show();
+    $('#anon').show();
+    button.value = 'connect';
+    return false;
+}
+
+function showDisconnect()
+{
+    var jid = $('#jid');
+    var pass = $('#pass');
+    var button = $('#connect').get(0);	
+
+    button.value = 'disconnect';
+    pass.hide();
+    jid.hide();
+    $('label').hide();
+    $('#anon').hide();
+    return false;
+}
+
+$(document).ready(function () {
+    connection = new Strophe.Connection(BOSH_SERVICE);
+    connection.rawInput = rawInput;
+    connection.rawOutput = rawOutput;
+
+    browser = new Disco();
+
+    $("#log_container").bind('click', function () {
+	$("#log").toggle();	
+      } 
+      );
+
+    $('#cred').bind('submit', function () {
+	var button = $('#connect').get(0);
+	var jid = $('#jid');
+	var pass = $('#pass');	
+
+	if (button.value == 'connect') {
+ 	    showDisconnect();
+	    connection.connect(jid.get(0).value,
+			       pass.get(0).value,
+			       onConnect);
+	} else {
+	    connection.disconnect();
+	    showConnect();
+	}
+	return false;
+    });
+});
diff --git a/contrib/discojs/scripts/disco.js b/contrib/discojs/scripts/disco.js
@@ -0,0 +1,60 @@
+
+var NS_DISCO_INFO = 'http://jabber.org/protocol/disco#info';
+var NS_DISCO_ITEM = 'http://jabber.org/protocol/disco#items';
+
+
+// Disco stuff
+Disco = function () {
+  // Class that does nothing
+};
+
+Disco.prototype = {
+ showBrowser: function() {
+    // Browser Display
+    var disco = $('#disco');
+    var jid = $('#jid');
+    var server = connection.jid.split('@')[1];
+
+    // display input box
+    disco.append("<div id='server'><form id='browse' name='browse'>Server : <input type='text' name='server' id='server' value='"+server+"' /><input type='submit' value='browse'/></form></div>");
+
+    // add handler for search form 
+    $("#browse").bind('submit', function () {
+	this.startBrowse($("#server").get(0).value);
+	return false;
+      });
+
+    this.startBrowse(server);
+  },
+
+ closeBrowser: function() {
+    var disco = $('#disco');
+
+    disco.empty();
+  },
+
+ startBrowse: function(server) {
+    // build iq request
+    var id = 'startBrowse';
+
+    var discoiq = $iq({'from':connection.jid+"/"+connection.resource,
+		       'to':server,
+		       'id':id,
+		       'type':'get'}
+      )
+    .c('query', {'xmlns': NS_DISCO_INFO});
+
+    connection.addHandler(this._cbBrowse, null, 'iq', 'result', id);
+    connection.send(discoiq.tree());
+
+  },
+
+ _cbBrowse: function(e) {
+    var elem = $(e); // make this Element a JQuery Element
+    alert(e);
+
+    return false; // return false to remove the handler
+  },
+
+};
+