span8
span4
span8
span4
This example demonstrates how FME Server can be used to stream JSON back to a web browser,allowing a user to play 'Fun with Flags'.
This live demo uses the FME Server Data Streaming Service,to return JSON to the webpage.
When a user chooses how many flags they wish to play with,this is sent to FME Server as a parameter on the end of the Data Streaming Service Direct URL.
A workspace has been set up that will randomly choose a given number of countries from the CIA web page.
The response is JSON,set up as a Text writer,with the MIME Type set up as application/json.
The workspace uses the HTMLExtractor to return all of the countries and the country codes.The AttributeManager uses the country codes to create the URLs where the image of the flag will come from,as well as a map image as a clue.The JSONTemplater builds the JSON that will be streamed back.
The workspace returns JSON to the application,其中包含:问题数量,URL of the flag image,URL of the map image and the country name.
The zip file at the top of the article is what you will need to get this demo working on your own system.
Note: the app.js is if you use node.js as a web server with express.
Open the flagRequestorCIA.fmw in FME Desktop 2018.1.
Use the 'Publish to FME Server' wizard:
var source = '/fmedatastreaming/Flags/flagRequestorCIA.fmw?flags=' + flagsRequested;$.getJSON(source)
Hiding/showing elements
A lot of the code behind the game is related to hiding and showing different elements,depending on what stage of the game it is.These can be seen by:
document.getElementById("").style="display: none;";document.getElementById("").style="display: inline;";
Requesting the JSON
The getFlags() function requests the json from FME Server by passing in the requested number of flags as a parameter in the URL.flagsRequested is a variable that's assigned the requested number.
var source = 'https://demos-亚搏在线safe-software.fmecloud.com/fmedatastreaming/Flags/flagRequestorCIA.fmw?flags=' + flagsRequested;$.getJSON(source) .always(function(data) { Flags = data;totalFlags = data.length;//Gets the number of flags returned qno = data[currentQuestion].QuestionNo;answer = data[currentQuestion].countryAnswer;clueURL = data[currentQuestion].clueURL;flagURL = data[currentQuestion].flagURL;$('#flagimage').attr("src",flagURL);// Sets the img source for the flag to the returned url $('#clueimage').attr("src",clueURL);// Sets the img source for the map clue to the returned url flagNumber = currentQuestion + 1;// The array counting starts at 0,which is why we add 1 $('#flagNo').text("Flag"flagNumber +"/" +totalFlags);// Set the flag number so you know how far through the game you are});
Flag Validation
Flag validation is handled in the validateCountry() function.
This takes the text input and compares it to the correct answer returned by FME Server.It also keeps a score by adding 1 every time an answer is correct.
You do this with another FME Workspace,sending both the user typed answer and the correct answer to FME Server to do some validations or fuzzy matching.However,that will require more requests being sent to FME Server so you would want to set up job queues to ensure an engine was always available to process the fast data streaming requests.
function validateCountry() { var Canswer = document.getElementById('idSearch').value;document.getElementById("idSearch").disabled = true;if (Canswer.toLowerCase() == answer.toLowerCase()) { document.getElementById('guessStatus').setAttribute("class","label label-success");document.getElementById('guessStatus').textContent = "You are correct";correctAnswers = correctAnswers + 1;} else { document.getElementById('guessStatus').setAttribute("class","label label-error");document.getElementById('guessStatus').textContent = " The correct answer is " + answer;};};
Creating REST Web Services: 7.Supporting HTTP PUT (2015)
FME Server Troubleshooting: Email
Tutorial: Custom Data Delivery using FME Server
How to Create a WMS Service Using FME Server
Streaming features from PostGIS to FME using WebSockets
Using a Link,URL or POST as a Source Dataset (FME Server 2012 )
Dynamic Reprojection Using FME Server
FME Server Developer Playground
© 2019 亚搏在线Safe Software Inc |Legal