Pure JavaScript Client
This is a message-receiving client for Apache ESME that is written entirely in Javascript. This very first cut of a client was created as a proof-of-concept to show that a very simple client was possible without any dependence on the server-side programming language. Based on the current implementation, it could be embedded in Java, C#, etc. It could run in a variety of environments including SharePoint, SAP Portal, etc.
This first version offers:
- Long-polling
- Flexible design
- The client uses XSL transformation to create HTML from the XML that originates from Apache ESME’s REST-API.
HTML page
<script type="text/javascript" language="javascript"> var http_request = false; var xslDoc = false; function getFirstRequest() { //Load XSL File xslTest(); http_request = GetXmlHttpObject(); if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } login(); getMessages ("http://api.esme.us/esme/api/get_msgs") } function login () { var url = "http://api.esme.us/esme/api/login"; var params = "token="+encodeURIComponent("NSCPIKQ0QZ0GO2PJXMXGTKRL1O"); http_request.open("POST", url, false); //Send the proper header information along with the request http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http_request.setRequestHeader("Content-length", params.length); http_request.setRequestHeader("Connection", "close"); http_request.send(params); } function getMessages(rest_type) { http_request.open('GET', rest_type, true); http_request.onreadystatechange = pageUpdate; http_request.send(null); } function getNextRequest() { http_request = GetXmlHttpObject(); if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } login(); getMessages ("http://api.esme.us/esme/api/wait_for_msgs") } function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch(e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function pageUpdate() { if (http_request.readyState == 0) { document.getElementById('resultbox').innerHTML = "Sending Request..."; } if (http_request.readyState == 1) { document.getElementById('resultbox').innerHTML = "Loading Response..."; } if (http_request.readyState == 2) { document.getElementById('resultbox').innerHTML = "Response Loaded..."; } if (http_request.readyState == 3) { document.getElementById('resultbox').innerHTML = "Response Ready..."; } if (http_request.readyState == 4) { //alert(http_request.responseText); //addText (http_request.responseText); loadXML (http_request.responseText); http_request.open('GET', "http://api.esme.us/esme/api/logout",true); http_request.send(null); getNextRequest(); } } function addText (text) { var pTag = document.createElement("p"); pTag.setAttribute("align","center"); pTag.innerHTML = text; var div = document.getElementById("details") div.insertBefore(pTag, div.childNodes[0](0.html) ); } function loadXML (text) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(text); } catch(e) { try //Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(text,"text/xml"); } catch(e) {alert(e.message)} } try { var sResult = xmlDoc.documentElement.transformNode(xslDoc); //alert (sResult); addText (sResult); } catch(e) { alert(e.message) } } function xslTest () { try //Internet Explorer { xslDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xslDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xslDoc.async=false; xslDoc.load("d:/temp/esme.xsl"); } catch(e) {alert(e.message)} } </script> <body onload="getFirstRequest()"> <div id="resultbox"></div> <div id="details"><p> </p></div> </body>
XLS File
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html" /> <xsl:template match="author"> <tr> <td> <img> <xsl:attribute name="src"><xsl:value-of select="@image"/></xsl:attribute> <xsl:attribute name="alt"><xsl:value-of select="@name"/></xsl:attribute> </img> From: <xsl:value-of select="@name" /> </td> </tr> </xsl:template> <xsl:template match="body"> <tr><td> Message: <xsl:value-of select="."/></td></tr> </xsl:template> <xsl:template match="esme_api"> <table> <xsl:apply-templates/> </table> </xsl:template> <xsl:template match="/"> <xsl:apply-templates/> </xsl:template> </xsl:stylesheet>