GWT – Communicate with a server using RPC

In the previous tutorial, we have coded application functionalities on the client side.

In this tutorial, we are going to create a GWT client-server application, where both the client and server components are coded in the same application. The client will communicate with the server using the GWT RPC framework which will provide a mechanism for exchanging Java objects between the client and the server over HTTP.

Concretely, we are going to create an authentication service on the server side and invoking it from a login form (client) to process authentication requests.

To install and configure GWT environment, refer to the first tutorial (GWT Hello World Example)

 

1. Technologies

  • GWT SDK 2.7
  • Java JDK 1.8
  • Eclipse 4.5 (Mars)

 

2. Project structure

We use the GWT button, on Eclipse toolbar, to create a new application with the following structure :

GWT Communicate with a server using RPC

 

3. HTML host page

File : InvokingServiceUsingRPC.html

The HTML <div> element will hold all our dynamic elements (panels, text boxes, buttons and labels).

 

4. GWT module definition

We are going to define our GWT application as follows :

File : InvokingServiceUsingRPC.gwt.xml

We have declared InvokingServiceUsingRPC class as the entry point to our application.

 

5. Create an RPC service on the server side

We create our service as an interface that extends the GWT RemoteService class.

File : /com/keylesson/gwt/client/AuthService

We have defined the login(..) method, that will accept two String parameters and return an array of String.

The @RemoteServiceRelativePath annotation maps our service to the “auth” path that will be used later to configure the web.xml file.

 

Now, we are going to implement our service by creating a class that implements the AuthService interface and extends the GWT RemoteServiceServlet class.

The AuthServiceImpl lives on the server side, as opposed to the AuthService interface.

File : /com/keylesson/gwt/server/AuthServiceImpl

Note that the service implementation runs on the server as Java bytecode, and it’s not translated to JavaScript.

 

6. web.xml

We will add a servlet segment element to point to the AuthServiceImpl class. And in the servlet-mapping element, the url-pattern must match the “auth” path we have specified on the AuthService interface.

 

7. Invoking the service from the client

We are going to invoke our service by making asynchronous calls to the service. We must then create a new interface as follows.

File : /com/keylesson/gwt/client/AuthServiceAsync

The interface must have the same name as the service, appended to “async“. And it must also define the same method, but with no return type and with an AsyncCallback parameter.

Now, we can make asynchronous call to our service by using an automatically-generated proxy class.

 

8. GWT entry point

It is the entry point class, we are going to build the UI and make asynchronous call to our service.

File : /com/keylesson/gwt/client/InvokingServiceUsingRPC

By using AJAX communication, we can load only the concerned UI components and send/receive only the needed data.

 

9. Modify CSS

File : InvokingServiceUsingRPC.html

 

10. Test It

Right-click on the project and select [ Run As > Web application (GWT Super Dev Mode) ]

Then, go to the browser and type in : http://127.0.0.1:8888/InvokingServiceUsingRPC.html

After “compiling the project”,  we will get :

GWT Communicate with a server using RPC (0)

 

First case : we test with a user that doesn’t exit in the authentication service users-list.

GWT Communicate with a server using RPC (1)

 

Second case : the user exists in the service list but a bad password will be provided.

GWT Communicate with a server using RPC (2)

 

Third and last case : we provide the correct username and password.

GWT Communicate with a server using RPC (3)

 

Download source code

  • David Benque

    Hi,

    Thanks for this nice tuto.

    The interface com.keylesson.gwt.client.AuthService being used both by server side and client side, doesn’t it make sense to have a “shared” package to host this interface ?
    something like com.keylesson.gwt.shared.AuthService ?

    Regards,
    David