I recently posted a number of examples (Yahoo! Maps collaboration using Flex and BlazeDS and Collaborative data entry with Flex and BlazeDS) showing how to use the BlazeDS/LiveCycle Data Services Message Service to build collaborative applications. In this example, I'm extending the Collaborative data entry with Flex and BlazeDS application to provide an example of a more complete and real-life "Live Help/Call Center" application.

The use case goes like this: a customer tries to complete a task (in this case: apply for a mortgage) on a website, gets in trouble, and starts a "live help" session with a support representative. Among other things, the support representative can remotely drive the customer's application, enter data collaboratively with the customer, chat with the customer using a text-based and/or a video-chat session, close the support ticket, etc.

Figure 1. The mortgage application

To make it easier for you to experience the application, I'm hosting it on my server. You can test it using the instructions below.

Installation instructions

1. Install BlazeDS or LiveCycle Data Services.
2. Download livehelp-client.zip (ZIP, 847K)
3. Download livehelp-server.zip (ZIP, 10K)

4. Add the following destination in WEB-INF/flex/remoting-config.xml.

   <destination id="ticket-service">
       <properties>
           <source>flex.samples.livehelp.TicketService</source>
           <scope>application</scope>
       </properties>
       <channels>
           <channel ref="my-rtmp"/>
           <channel ref="my-amf"/>
       </channels>
   </destination>

   Note: If you are using BlazeDS, remove the line that defines the "my-rtmp" channel.

5. Add the following destination in WEB-INF/flex/messaging-config.xml.

<destination id="callcenter">
    <properties>
        <server>
            <allow-subtopics>true</allow-subtopics>
            <subtopic-separator>.</subtopic-separator>
        </server>
    </properties>
    <channels>
        <channel ref="my-rtmp"/>
        <channel ref="my-longpolling-amf"/>
    </channels>
</destination>

Note: If you are using BlazeDS, remove the line that defines the "my-rtmp" channel in the above destination, and add the following channel definition in WEB-INF/flex/services-config.xml:

<channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
  <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
  <properties>
         <polling-enabled>true</polling-enabled>
         <polling-interval-seconds>3</polling-interval-seconds>
         <wait-interval-millis>60000</wait-interval-millis>
         <client-wait-interval-millis>1</client-wait-interval-millis>
         <max-waiting-poll-requests>200</max-waiting-poll-requests>
  </properties>
</channel-definition>

Testing the hosted version

1. Open a browser and access http://coenraets.org/apps/livehelp/customer.html. Enter your e-mail address and click Start. Note: Your e-mail address is used as a unique identifier to allow you to test the application in your own sandbox. Your experiments are isolated from the experiments of other users testing the application.
2. Open another browser window (on the same computer or on a different computer) and access http://coenraets.org/apps/livehelp/callcenter.html. Enter your e-mail address and click "Start".

   Note: Make sure you use the same e-mail address you used in the customer application.

3. In the customer application, enter some data in different tabs.
4. Click "Start session" to initiate a Live Help session with a support rep. Notice that a new ticket appears in the call center application.
5. In the call center application select the new ticket, and click "Handle Ticket" (upper right corner). A message should appear in the chat window of the customer application. Notice that the data you typed in the customer application automatically appears in the support rep application.
6. Type a chat message in the support rep app. The message appears in the customer app.
7. The support rep can remotely drive the customer application. In the support rep application, change the selected Accordion tab, and notice that the customer application's user interface is automatically synchronized. This works in both directions: you can change the Accordion tab in the customer app and the support rep's user interface will be automatically synchronized as well.
8. The application supports collaborative data entry (collaborative form filling). Enter some data in the support rep application. Notice that the data automatically appears in the customer application. This works in both directions as well.
9. On the Employment History tab, add a few companies (including start date, end date, and salary) and notice that the employment history list is automatically synchronized in the other browser.
10. If you have a webcam attached to your system, click the "Start webcam" button in one of the applications.

Note: Live video streaming is powered by Flash Media Server. Since I don't have access to a hosted instance of Flash Media Server, live video streaming is not enabled in this hosted version.

About the author