2017/06/09

Delphi DataSnap REST server and HTML5 client

緣起:

前一陣子和網頁前端開發者合作一個網站的開發,使用 Delphi 開發 REST Service 非常的快,兩三下就完成交差。但就在這時,前端工程師卻問了我一個問題:

你的 REST API 要怎麼用 JavaScript 連?



也許有什麼好方法可以讓前端也能快速存取 REST 方法。這讓我想到從 XE 開始,DataSnap REST Application 就有內建 JavaScript 套件和 2 個 Boilerplate,也許可以從官方文件中吸取一些知識。


DataSnap REST Application 建立時會自動產生的 JavaScript 檔案

【ServerFunctionExecutor.js】和【ServerFunctionInvoker.js】檔案,是 JavaScript REST DataSnap framework 的核心內容,【ServerFunctions.js】則是 Delphi REST Server 依據 ServerMethod 單元的內容自動產生的。

以萬年範例則是「ReverseString」和「EchoString」這兩個 Method
從 2009 到最近的 10.2 都一樣的萬年範例 (笑)
接著打開 templates 目錄內的 ReverseString.html,如下圖:

Login 區塊在這邊不是重點,因為前端一定有自己的控制碼,所以這部份有機會再表。

我們把重心放在 ReverseString 區塊上。
ReverseString.html 內的 ReverseString 區塊 HTML 碼

javascript:onReverseStringClick();

看來就是它了,事件的原始碼是:
javascript:onReverseStringClick 原始碼
就像是 Delphi 的使用方式一樣,好像沒有想像中的困難,如法泡製來一個試試看。

首先在 Delphi 裡做了一個 FetchEmp,它負責回傳 TDataSet 的內容,程式碼如下:

REST DataSnap 是建構在 WebBroker 的架構上,就照著 TPageProducer.ReverseString 再建立一個 TPageProducer.FetchEmp,並且指向等一下要建立的【FetchEmp.html】。

FetchEmp.html 的原始碼:


採用 HTML5 的寫法,就是 uses / include 一些 framework 的內容回來,可以照抄 ReverseString 的內容,而【jquery.min.js】是因為要顯示在畫面上才使用的。

在抄寫 JavaScript 時要留意onLoad 事件的這一段:

function onLoad()
{
  showTime();
  setConnection('localhost', '8080', '');
}

注意!

這裡的 localhost 是對應 TDSHTTPWebDispatcher.DSHostName,如果不是相同 DNS 會被當成跨網域存取而引發 TDSServiceException: Command closed or unassigned 的例外訊息。

最後,終於要讓 JavaScript 存取 FetchEmp 了!
JQuery 是用在建立 Table 上面,僅存取資料是不需要 JQuery 的

到這裡,就能讓前端工程師好好應用了。


關鍵就那幾行,看完程式碼後也可以讓前端知道【那也沒有什麼】,就知道它有多簡單了吧!


DataSnap REST Application 所產生的 JavaScript REST DataSnap framework 裡面還有很多資訊,之後有機會再做更進一步的說明。


謝謝各位收看!













後記:為了回答這個問題,也花了我數天的時間在翻資料,果然簡單的東西真的不簡單啊!

6 則留言:

  1. 您好
    請教一下
    能否在reversestring.html這個頁面上去呼叫ServerMethodsUnit1的function

    回覆刪除
    回覆
    1. 可以的,請參閱本文的【onReverseStringClick】相關內容即可。

      刪除
    2. 謝謝您的回覆

      但我嘗試的結果是使用原本範例的ReverseString沒有問題
      但如果我在ServerMethodsUnit1新增一個function
      就無法成功呼叫這個新function
      請問是不是還要在哪個地方做設定呢?

      刪除
    3. 補充描述一下

      我使用ServerMethodsUnit1預設的ReverseString和EchoString都沒有問題
      但如果在ServerMethodsUnit1新增一個function 比如叫做 TEST
      但是在reversestring.html就無法成功呼叫TEST這個新function

      謝謝

      刪除
    4. 本文中的"【ServerFunctions.js】則是 Delphi REST Server 依據 ServerMethod 單元的內容自動產生的。"

      這涉及到 DataSnap Server 更新 serverfunction.js 的事件,以及瀏覽器有沒有刷新serverfunction.js取得更新後的內容。

      刪除