...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
[highlight=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>
The sources of the demo are also available as a downloadable zip attacched to this post.