GWT - RPC 通訊

一個基於 GWT 的應用程式通常由客戶端模組和伺服器端模組組成。客戶端程式碼在瀏覽器中執行，伺服器端程式碼在 Web 伺服器中執行。客戶端程式碼必須透過網路發出 HTTP 請求才能訪問伺服器端資料。

RPC，遠端過程呼叫是 GWT 使用的一種機制，客戶端程式碼可以直接執行伺服器端方法。

GWT RPC 基於 servlet。
GWT RPC 是非同步的，客戶端在通訊期間永遠不會被阻塞。
使用 GWT RPC，Java 物件可以直接在客戶端和伺服器之間傳送（由 GWT 框架自動序列化）。
伺服器端 servlet 稱為 **服務**。
從客戶端程式碼呼叫伺服器端 servlet 的方法的遠端過程呼叫被稱為 **呼叫服務**。

GWT RPC 元件

以下是 GWT RPC 通訊機制中使用的三個元件

在伺服器上執行的遠端服務（伺服器端 servlet）。
呼叫該服務的客戶端程式碼。
將在客戶端和伺服器之間傳遞的 Java 資料物件。

GWT 客戶端和伺服器都自動序列化和反序列化資料，因此開發人員無需序列化/反序列化物件，資料物件可以透過 HTTP 傳輸。

下圖顯示了 RPC 架構。

要開始使用 RPC，我們需要遵循 GWT 約定。

RPC 通訊工作流程

步驟 1 - 建立可序列化的模型類

在客戶端定義一個可序列化的 Java 模型物件。

public class Message implements Serializable {
   ...
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }
   ...
}

步驟 2 - 建立服務介面

在客戶端為服務定義一個介面，該介面擴充套件 RemoteService 並列出所有服務方法。

使用註釋 @RemoteServiceRelativePath 將服務對映到相對於模組基 URL 的遠端 servlet 的預設路徑。

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

步驟 3 - 建立非同步服務介面

在客戶端（與上面提到的服務位於同一位置）為服務定義一個非同步介面，該介面將在 GWT 客戶端程式碼中使用。

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

步驟 4 - 建立服務實現 Servlet 類

在伺服器端實現介面，該類應該擴充套件 RemoteServiceServlet 類。

public class MessageServiceImpl extends RemoteServiceServlet
   implements MessageService{
   ...
   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }
}

步驟 5 - 更新 Web.xml 以包含 Servlet 宣告

編輯 Web 應用程式部署描述符 (web.xml) 以包含 MessageServiceImpl Servlet 宣告。

<web-app>
   ...
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>
   
   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

步驟 6 - 在應用程式程式碼中進行遠端過程呼叫

建立服務代理類。

MessageServiceAsync messageService = GWT.create(MessageService.class);

建立 AsyncCallback 處理程式以處理 RPC 回撥，其中伺服器將訊息返回給客戶端

class MessageCallBack implements AsyncCallback<Message> {

   @Override
   public void onFailure(Throwable caught) {
      Window.alert("Unable to obtain server response: "
      + caught.getMessage());	
   }

   @Override
   public void onSuccess(Message result) {
      Window.alert(result.getMessage()); 
   }	   
}

當用戶與 UI 互動時呼叫遠端服務

public class HelloWorld implements EntryPoint {
   ... 
   public void onModuleLoad() {
   ...
      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });
   ...
   }
}

RPC 通訊完整示例

此示例將引導您完成簡單的步驟，以顯示 GWT 中 RPC 通訊的示例。請按照以下步驟更新我們在 *GWT - 建立應用* 章節中建立的 GWT 應用程式 -

步驟	描述
1	在 GWT - 建立應用章節中說明的包 com.tutorialspoint 下建立一個名為 HelloWorld 的專案。
2	修改 HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html 和 HelloWorld.java，如下所述。保持其餘檔案不變。
3	編譯並執行應用程式以驗證實現邏輯的結果。

以下是修改後的模組描述符 **src/com.tutorialspoint/HelloWorld.gwt.xml** 的內容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下是修改後的樣式表文件 **war/HelloWorld.css** 的內容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

以下是修改後的 HTML 主機檔案 **war/HelloWorld.html** 的內容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>RPC Communication Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

現在在 **src/com.tutorialspoint/client** 包中建立 Message.java 檔案，並將以下內容放在其中

package com.tutorialspoint.client;

import java.io.Serializable;

public class Message implements Serializable {
 
   private static final long serialVersionUID = 1L;
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }

   public String getMessage() {
      return message;
   }
}

現在在 **src/com.tutorialspoint/client** 包中建立 MessageService.java 檔案，並將以下內容放在其中

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

現在在 **src/com.tutorialspoint/client** 包中建立 MessageServiceAsync.java 檔案，並將以下內容放在其中

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

現在在 **src/com.tutorialspoint/server** 包中建立 MessageServiceImpl.java 檔案，並將以下內容放在其中

package com.tutorialspoint.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.tutorialspoint.client.Message;
import com.tutorialspoint.client.MessageService;

public class MessageServiceImpl extends RemoteServiceServlet 
   implements MessageService{

   private static final long serialVersionUID = 1L;

   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }   
}

更新修改後的 Web 應用程式部署描述符 **war/WEB-INF/web.xml** 的內容，以包含 MessageServiceImpl Servlet 宣告。

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE web-app
   PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
   <!-- Default page to serve -->
   <welcome-file-list>
      <welcome-file>HelloWorld.html</welcome-file>
   </welcome-file-list>
   
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>

   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

將 **src/com.tutorialspoint/client** 包中 HelloWorld.java 的內容替換為以下內容

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   private MessageServiceAsync messageService = 
   GWT.create(MessageService.class);

   private class MessageCallBack implements AsyncCallback<Message> {
      @Override
      public void onFailure(Throwable caught) {
         /* server side error occured */
         Window.alert("Unable to obtain server response: " + caught.getMessage());	
      }
      @Override
      public void onSuccess(Message result) {
          /* server returned result, show user the message */
         Window.alert(result.getMessage());
      }	   
   }

   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               /* make remote call to server to get the message */
               messageService.getMessage(txtName.getValue(), 
               new MessageCallBack());
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            /* make remote call to server to get the message */
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }    
}

完成所有更改後，讓我們像在 GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果應用程式一切正常，將產生以下結果 -

列印頁面