JavaScript Services in Action in WSO2 Mashup Server

WSO2 Mashup Server can be used to create and host JavaScript based mashups, acting as a hub for integrating your enterprise with rich information available on the web. Each mashup hosted in here is exposed as a new web service, and can be consumed by other mashups or web service clients.



In this post I'm going to show you how to get started with a JavaScript service, and consume that service inside another JavaScript (A client) embedded in an HTML page.

The scenario I'm going to cover is, developing a JavaScript based service for getting stock updates, which retrieve the stock information by invoking another external web service , and writing a JavaScript client inside an HTML, which invokes the JavaScript service. 


Writing the service

1. Download WSO2 Mashup Server binaries and extract into a convenient location (Hereafter referred to as MS_HOME ) 

2.  The JavaScript service should be written as a standard JavaScript file, as  mentioned below


3. This JavaScript file (stockQuote.js) needs to be placed in the following location
    <MS_HOME>/repository/deployment/server/jsservices/admin

4. Start the server ($ sh /bin/wso2server.sh )

5. If the StockQuote service is deployed successfully it should be logged as "Deploying Web service: stockQuote.js" and verify through Management Console (https://localhost:9443/carbon/service-mgt/index.jsp?region=region1&item=services_list_menu, or http://localhost:9763/services/admin/stockQuote?wsdl)

6. After successfully starting up the server, note that a folder is created in     <MS_HOME>/repository/deployment/server/jsservices/admin with the name stockQuote.resources.
Create a new folder with the name "www" if such a folder is not there already. Service client related code should be place in that folder.


Writing Client code and Installing a custom UI

JavaScript clients can invoke services via generated stubs. The generated stub is again a JavaScript file. It can viewed as follows,
http://localhost:9763/services/admin/stockQuote?stub

1. The sample code of StockQuote service client is listed below, note that it is embedded in an HTML file (which is the UI of your service) and in the top you can see a reference to the generated stub is included. Save this as index.html file into the "www" folder created above.
<MS_HOME>/repository/deployment/server/jsservices/admin/stockQuote.resources/www



2. Access the UI of the as follows to test the functionality
        http://localhost:9763/services/admin/stockQuote/
     In the text box, input a Stock symbol (eg: GOOG, IBM, VRTU .. etc) and check the results



Troubleshooting

In some situations, the generated JavaScript stubs are having some issues (which are already identified and will be fixed in the next release)

In such a scenario, as a hack you can do the following.

1. Access the stub (http://localhost:9763/services/admin/stockQuote?stub) and save the stub file in <MS_HOME>/repository/deployment/server/jsservices/admin/stockQuote.resources/www location as "stockQuoteStub.js"

2. The "bf2xml" function of the stub is the culprit here, so as a fix replace the relevant code related to bf2xml function with the code below


3. In index.html file modify the line which has the reference to the stub, so remove the line
  

and add the following line instead
 


Note that, now it is referenced the modified version of the stub, which is in the www directory

4. Now the issue should be fixed.