Request-Response APIs

**Mone** · February 21st, 2007, 02:11 PM

...continue

Now we need a client to test it, we implement a simple client with the web SDK.
In this page we put a <div> that is filled with the "response" and a "response is complete" message. There is also a form, fill the input field and press submit to make a request to the server. NOTE that since LiteralBasedProvider is used as MetaDataProvider, and since the demo uses the string inside the inputField as a group string, if you try to send a reuqest like "something somethingElse" you subscribe 2 items (in this case 2 "requests").
The page is made to be deployed under Lightstreamer internal web server so domain host and port are set to null.
To gather the desired data we use a NonVisualTable. Refer to the comments inside the code for further explanations

Code html:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">    
    <!-- inclusion of Lightstreamer web client library-->
    <script src="/LS/lscommons.js"></script>
    <script src="/LS/lspushpage.js"></script>
</head>
 
<body>
    <!--this div will show the response-->
    <div id="response"></div>        
 
    <!--this form is used to call a method that makes the requests-->
    <form onsubmit="makeRequest();return false;">
        <input id="requestQuery" type="text" />
        <input type="submit" value="send request" />
    </form>
<script>
 
    
/////////////////PushPage Configuration
    lsPage = new PushPage();
    
    lsPage.context.setDomain(null);
    
    lsPage.onEngineReady = function(lsEngine) {
                lsEngine.connection.setLSHost(null);
                lsEngine.connection.setLSPort(null);
                lsEngine.connection.setAdapterName("FAKESUB");
                lsEngine.changeStatus("STREAMING");
            }
    
    lsPage.bind(); 
    lsPage.loadEngineMinimal("/LS/lsengine.html");
    
/////////////////////////////////Request/Response handler    
    var responseDiv = document.getElementById("response");
    var requestQuery = document.getElementById("requestQuery");
 
    function makeRequest() {
        //this is the string of the input field
        var request = requestQuery.value;
        //create a NonVisualTable, the item is the string of the input field, as fields 
        //"key" and "value" and subscribe in DISTINCT mode
        var table = new NonVisualTable(request, new Array("key","value"), "DISTINCT");
        //we need just the snapshot
        table.setSnapshotRequired(true); 
        //this callback is called after subscription notification. We clear the responseDiv
        //so our response will be the only one inside it
        table.onStart = function() {
            responseDiv.innerHTML = "";
        }
        //this callback is called per each received update. We compose a string with
        //the "key" and "value" fields and append this string to the responseDiv
        table.onItemUpdate = function(itemPos, itemObj, itemName) {
            var k = itemObj.getNewValue("key");
            var v = itemObj.getNewValue("value");
            responseDiv.innerHTML += k + ": " + v +"<br/>"; 
        }
        //this callback is called when all snapshot events have been received. Put
        //this info in the responseDiv and remove the subscription
        table.onEndOfSnapshot = function(itemPos,itemName) {
            responseDiv.innerHTML += "Response COMPLETE " +itemPos+"<br/>";
            //until we keep the table subscribed the data adapter will not be
            //called for others clients making the same request (ie Lightstreamer
            //kernel will handle directly responses for those clients). In this case
            //we don't remove the subscription.
            //lsPage.removeTable("req");
        }
        //this callback is called in case some updates were lost. Put the info inside
        //the responseDiv
        table.onLostUpdates = function(itemPos,lostUpdates,itemName) {
            responseDiv.innerHTML += "We've lost updates!<br/>";
        }
        
        //subscribe the table. In this demo we always use the same id ("req") to avoid 
        //multiple concurrent requests.
        lsPage.addTable(table, "req");
    }
</script>
</body>
 
</html>