Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

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

Code Block
langjavascript
<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]);
   
}

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

Code Block
langxml
<?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>