How to add a Remoting SDK for JavaScript Web Client to your Server (Delphi)

This article explains how to create a Remoting SDK for JavaScript client that connects to and uses the services of the server that we created in the How to write a Remoting SDK Server (Delphi) article.

Notes:

Enabling JavaScript Access on the Server

Drop the TROJavaScriptHttpDispatcher component onto the server form or data module, and connect its Server property to your server channel component. Please pay attention to the default values of its properties: DefaultFile=index.html, Folder=.\html and Path=/js/ - we'll see these values later.

Note: The TROJavaScriptHttpDispatcher turns your RemObjects server into a web server, but nothing prevents you from putting your application and library files to any other web server. In this case just enable cross-origin access (CORS) support at the server by setting its SendCrossOriginHeader property to true and handling OnSendCrossOriginHeader or OnSendCrossOriginHeaderEx events, if needed (by default it sends *, which allows access for every domain).

If you are using JSONMessage, set its WrapResult, its IncludeTypeName, its SessionIdAsId and its SendExtendedException properties to true.

Interface file generation

Open the server's RODL file. In the RAD Studio click Tools->Remoting SDK->Service Builder menu item. In Visual Studio just double-click the .RODL file in Solution Explorer.

The Service Builder will start. Once it is up click CodeGen->JavaScript->Interface, then hit Save code button and save generated JavaScript interface file as NewLibrary_Intf.js.

Setting up the client application

In the folder where the server executable file is located, create a subfolder and name it html. Put NewLibrary_Intf.js there. Also create html file and save it as index.html to this subfolder.

<html>
  <head>
  </head>
  <body>
    <h1>Remoting SDK client</h1>
  </body>
</html>

Time to test. Run the server and open http://localhost:8099/js/ in the browser.

Accessing the server

To access the server, the library and generated interface file should be included into index.html. Also we're adding a link to call method and a textarea to print results there.

Finally, some coding. We need a channel instance to transfer requests and responses back and forth, we need a message instance to encode/decode data and a service proxy instance to hide most implementation details from us. Proxy method takes callback function as a parameter and calls it when result has been received from the server.

<html>
  <head>
    <script type="text/javascript" src="RemObjectsSDK.js"></script>
    <script type="text/javascript" src="NewLibrary_Intf.js"></script>
  </head>
  <body>
    <h1>Remoting SDK client</h1>
    <a href="#" onclick="getTime();">Get time</a><br />
    <textarea id="log" rows=10 cols=60></textarea>
    <script type="text/javascript">
      var channel = new RemObjects.SDK.HTTPClientChannel("http://" + window.location.host + "/BIN"); //IE users use JSON
      var message = new RemObjects.SDK.BinMessage();
      var service = new NewService(channel, message);

      function getTime() {
        service.GetServerTime(function(result) {
            document.getElementById("log").value += result + "\n"; 
        }, RemObjects.UTIL.showError);
      }
    </script>
  </body>
</html>

Note: Internet Explorer doesn't support posting binary data, so JSONMessage should be used. Moreover, in some versions/modes it doesn't support JSON too, then please use any third-party JSON implementation. Most known one - https://github.com/douglascrockford/JSON-js

Conclusion

As you can see, with Remoting SDK for JavaScript it takes five lines to prepare and another five lines to actually call remote service and get response data from the server.