DEVELOPING KAAZING WEBSOCKET GATEWAY APPLICATIONS WITH GWT

Arya MirInternet και Εφαρμογές Web

12 Φεβ 2012 (πριν από 5 χρόνια και 6 μήνες)

3.175 εμφανίσεις

Google Web Toolkit (GWT) is a toolkit for building complex browser-based applications, which allows developers to code in Java and cross-compile Java source into JavaScript. The Kaazing GWT Client Code Library (Preview Release) provides a starting point for building real-time web applications with GWT. The Kaazing GWT demo application described in this document illustrates how you can create a simple GWT application that connects to the Kaazing WebSocket Gateway using WebSockets and a Streaming Text Orientated Messaging Protocol (Stomp) Client.


Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com

DEVELOPING KAAZING WEBSOCKET
GATEWAY APPLICATIONS WITH GWT
A KAAZING ORANGE PAPER (PREVIEW RELEASE)
March 2010



DEVELOPING KAAZING WEBSOCKET
GATEWAY APPLICATIONS WITH GWT
A KAAZING ORANGE PAPER (PREVIEW RELEASE)
Google Web Toolkit (GWT) is a toolkit for building complex browser-based applications, which
allows developers to code in Java and cross-compile Java source into JavaScript.
The Kaazing GWT Client Code Library (Preview Release) provides a starting point for building
real-time web applications with GWT. The Kaazing GWT demo application described in this
document illustrates how you can create a simple GWT application that connects to the
Kaazing WebSocket Gateway using WebSockets and a Streaming Text Orientated Messaging
Protocol (Stomp) Client.
Software Prerequisites
Perform the following steps to set up the prerequisite software:
1. Download the Kaazing WebSocket Gateway (KWG) demo bundle from
http://www.kaazing.com/download
.
2. Install KWG as described in Getting Started at
http://tech.kaazing.com/documentation/getting-started.html
.
Note: You can start Apache ActiveMQ (ACTIVEMQ_HOME/bin/activemq) and the
stock feed program (KAAZING_HOME/bin/stock.start), but do not yet start
Kaazing WebSocket Gateway.
3. Download and install the GWT plugin for Eclipse from
http://code.google.com/webtoolkit/download.html
.
Note: The procedures in this document assume that you have already installed the
Eclipse IDE, which can be downloaded from http://www.eclipse.org/downloads/
.
4. Download the Kaazing GWT Client Code Library Preview Release GWTClient.jar from
http://tech.kaazing.com/code/gwt
.



Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 2


Using the Kaazing GWT Client Code Library
The following steps show you how to install and use the Kaazing GWT Client Code Library to
run a Stomp client demo from the Eclipse IDE.
1. Open the file KAAZING_HOME/conf/gateway-config.xml in a text editor.
2. Search for ‘Proxy service to the Stomp server’ and update that service
configuration element by adding a cross-site constraint for the origin of the content
that is served up by the development web server within Eclipse. Cross-site-constraints
allow you to "white-list" cross-origin sites. This is required, because cross-site access to
backend services is denied by default. The following example shows the new constraint
in bold text.
<!-- Proxy service to Stomp server -->
<service>
<accept>ws://localhost:8000/activemq</accept>
<accept>wss://localhost:9000/activemq</accept>

<type>proxy</type>
<properties>
<connect>stomp://localhost:61613</connect>
</properties>

<!--
<auth-constraint>
<require-role>AUTHORIZED</require-role>
</auth-constraint>
-->
<cross-site-constraint>
<allow-origin>http://127.0.0.1:8888</allow-origin>
</cross-site-constraint>
<cross-site-constraint>
<allow-origin>http://localhost:8000</allow-origin>
</cross-site-constraint>
<cross-site-constraint>
<allow-origin>https://localhost:9000</allow-origin>
</cross-site-constraint>
</service>
Note: The development web server within Eclipse serves up pages at the IP address
127.0.0.1 (localhost) on port 8888 by default. If you changed this, you must
change the origin specified in the cross-site constraint and add the IP address and
the port number you are using.
See also: Refer to the tutorial Creating a Stomp-Driven Application in JavaScript at
http://tech.kaazing.com/documentation/tutorial-stomp-js.html
for more information
about Stomp.

Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 3


3. Follow the instructions in the Kaazing WebSocket Gateway Getting Started
to start
Kaazing WebSocket Gateway (KAAZING_HOME/bin/gateway.start)
4. Verify that KWG, Apache ActiveMQ, and the stock feed program are working. To do
this, open a browser and navigate to the following page:
http://localhost:8000/demo/demo.html#stock
and click Connect (no user name and
password are required). You should see streaming stock quotes as shown in the
following figure.




Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 4



Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 5

5. Next, open the Eclipse IDE and select File > Import.
6. In the Import dialog, select General > Existing Projects into Workspace and click
Next as shown in the following figure.
7. Select Select archive file and browse to the GWTClient.jar file that you downloaded
earlier as shown in the fo re and click . llowing figu Finish


Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 6


8. Compile the GWTClient project. To do this, click GWT Compile Project and click
t is


Compile in the GWT Compile dialog when prompted. Example GWT compile outpu
shown in the following figure.



Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 7

9. You’re ready to run the project now. Click Run As… to run the application, select Run
as Web Application, and click OK.
10. Copy the URL that displays in the Development Mode console and paste it in your
browser’s address bar as shown in the following figure.
Note: For debugging purposes, it is best to run the project in Google Chrome,
Microsoft Internet Explorer, or Mozilla Firefox with the GWT development plugin.
11. If prompted, follow the steps to download and install the GWT Developer Plugin as
shown in the following figure.




Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 8

12. In your browser, you should now see the Kaazing Web Sockets-based GWT Stomp client
in action as shown in the following figure. This is a simple demo in which the GWT
Stomp client subscribes to the stock topic on the Apache ActiveMQ message broker,
similar to the JavaScript demo in the Kaazing WebSocket Gateway demo bundle.



Running the WebSocket and ByteSocket Demos
The previous procedure showed how you can run the Kaazing GWT Client Code Library’s
Stomp demo to take advantage of the Stomp protocol over HTML5 Web Sockets. The Kaazing
GWT Client Code Library also contains a WebSocket and ByteSocket demos, which
communicate with the Kaazing WebSocket Gateway demo bundle’s echo service.
Note: The StompClient client library is layered on top of ByteSocket. Although
Stomp is a text-based protocol, the body of a Stomp message can contain bytes,
provided a Content-Length header is specified. Therefore, WebSocket, which is text-
based, cannot be used to implement a fully-compatible Stomp client, because it
would break on non-text body content. Additionally, each Stomp message ends
with a null byte, which can cause browsers to ignore the content of the string that
follows that null byte.
To run the other demos, perform the following steps:
1. Open the file KAAZING_HOME/conf/gateway-config.xml in a text editor.
2. Search for ‘Echo service’ and update that service configuration element by adding a
cross-site constraint for the origin of the content that is served up by the development
web server within Eclipse. The following example shows the new constraint.
<!-- Proxy service to Stomp server -->
<service>
<accept>ws://localhost:8001/echo</accept>
<accept>wss://localhost:9001/echo</accept>

<type>echo</type>

<!--
<auth-constraint>
<require-role>AUTHORIZED</require-role>
</auth-constraint>
-->

<cross-site-constraint>
<allow-origin>http://127.0.0.1:8888</allow-origin>
</cross-site-constraint>
<cross-site-constraint>
<allow-origin>http://localhost:8000</allow-origin>
</cross-site-constraint>
<cross-site-constraint>
<allow-origin>https://localhost:9000</allow-origin>
</cross-site-constraint>
</service>
Note: The development web server within Eclipse serves up pages at the IP address
127.0.0.1 (localhost) on port 8888 by default. If you changed this, you must
change the origin specified in the cross-site constraint and add the IP address and
the port number you are using.

Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 9



Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 10

3. Restart Kaazing WebSocket Gateway
4. Next, in your Java Project, open the file
/GWTClient/src/com/kaazing/gateway/client/gwt/GWTClient.gwt.xml.
5. Comment out the StompClient demo script references and its entry point and
uncomment the script reference and entry point for one of the following demos:
a. WebSocketDemo (shown uncommented in the following figure)
b. ByteSocketDemo (leave the WebSocket demo commented out if you choose this
one)

6. Save the file
7. Recompile and run the project as shown in the steps above. The output from the
WebSocket and the ByteSocket clients should look like the following figure.




Troubleshooting
This section outlines some common errors and actions to resolve them.
ERROR: DEMO DOES NOT CONNECT
The browser demo page has the following output:
Demo Log
WebSocket Demo
CONNECTING
CLOSE
Cause
This is usually caused by a missing cross-site constraint. A cross-site constraint for the origin
of the URL at which you are accessing the demo has to be defined in the file
KAAZING_HOME/conf/gateway-config.xml.
Action
Check the URL at which you are accessing the demo. For example, if you are accessing the
demo at http://127.0.0.1:8888/GWTClient.html?gwt.codesvr=127.0.0.1:9997, you
must define a cross-site constraint in the service element of the service you are trying to
access as shown in the following example. For more details, refer to the first steps in the
procedure above).
cross-site-constraint>
<allow-origin>http://127.0.0.1:8888</allow-origin>
</cross-site-constraint>
Note: For the Stomp demo, the constraint has to be added to the Stomp proxy
service configuration element and for the WebSocket and ByteSocket demos, it has
to be added to the echo service configuration element.


Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 11


ERROR: PORT 127.0.0.1:8888 IS ALREADY IS USE
When running the project, you see the errors similar to the ones shown in the following
example in the console.
at com.google.gwt.dev.DevModeBase.startUp(DevModeBase.java:1035)
at com.google.gwt.dev.DevModeBase.run(DevModeBase.java:783)
at com.google.gwt.dev.DevMode.main(DevMode.java:275)
Port 127.0.0.1:8888 is already is use; you probably still have another
session active
Cause
This usually means you already have another process running on the built-in development
server.
Action
Before you run the project, always click Terminate Selected Launch (the red button) in the
Development Mode console.
PROBLEM: THE GWT APPLICATION DOES NOT WORK IN INTERNET EXPLORER 6 OR 7
The application does not connect when running in versions of Microsoft Internet Explorer 6 or
7.
Cause
If you are developing or running your web application on a separate web server, then cross-
origin access using HTML5 Cross Document Messaging (the PostMessage API) is required for
the application to connect to Kaazing WebSocket Gateway. Microsoft Internet Explorer
versions 6 and 7do not support communication across origins and require additional
configuration on the web server.
Action
Perform the steps documented in the section titled "Configuring a Web Server to Integrate with
Kaazing Gateway" in the Kaazing WebSocket Gateway Administrator's Guide.

Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 12



Copyright © 2010 Kaazing Corporation. All rights reserved. www.kaazing.com 13

About Kaazing
Kaazing is a web infrastructure software company that enables companies to quickly deliver
massively scalable, real-time enterprise web applications and significantly reduce operational
costs by simplify back-end server infrastructure.
Kaazing’s patent-pending, WebSocket Acceleration™ technology is the only solution in the
marketplace today that facilitates full-duplex web communication, which makes it possible to
extend any TCP-based messaging protocols to the Web seamlessly and reliably, without buying
expensive new hardware.
Unlike older, non-standard technologies that rely on “polling” or “long-polling,”—complex and
inefficient techniques that result in higher latency and sky-rocketing server infrastructure
costs—Kaazing delivers ultra-high application performance at the lowest operational cost.
RELATED LINKS
 Kaazing: http://www.kaazing.com

 Kaazing Technology Network (documentation, training, how-tos, and tutorials):
http://tech.kaazing.com

 websockets.org: http://www.websockets.org

FEEDBACK
Your feedback is appreciated. Send us a mail at doc@kaazing.com
.