Examples

Example - Simple Message

Features

In this example, the message "My first WebSocket message" is sent to the "Simple Message" display page. The "Simple Message" display page is part of the "Simple Message" app of the same name. Message delivery is triggered by a global timer in Intrexx. The execution interval is set to every 10 seconds. The message is created in a WebSocket action and linked there to a topic from the "Simple Message" application.

Note: This example is intended to help you understand the basic functionality of WebSockets in Intrexx.

It does not represent a real-world use case. However, the setup steps can be applied in the same way to real-world use cases.

Setting Up / Configuring the Example

1. What prompted the news

The message is triggered by an internal event. This is a global timer. The execution interval is set to every 10 seconds. The Global Timer is the event source in the "Simple Message" example.

2. Create a topic

In the "Simple Message" campaign, the topic "Topic for simple messages" was created.

3. Set the display on the portal

1. Create an element in which the messages are to be displayed.
   The "Simple Message" display page was created in the "Simple Message" application.
   A "Static Text" control was added to the display page to show the messages.

   

2. Define the element in which the message should be displayed.
   The JavaScript function looks like this:

                       function displayWebsocketMessage() {
     ix.websocket.subscribeToTopic(topicGUID, {
       key: "key1",
       onmessage: function onmessage(data) {
         var elementToDisplayMessage = getElement(elementToDisplayMessageGUID);
         elementToDisplayMessage.innerHTML =
           elementToDisplayMessage.innerHTML + data + " ";
       }
     });
   }
   
                   

   
   

   Note: Here's how you can easily insert the topic GUID into the code in the Script Editor:
   

   1. Place the cursor where you want to insert the topic GUID.

   2. In the "Application Structure," select the desired topic.

   3. Click the " " icon.

   

3. Define an event for the subscription.
   The "Topic for simple message" topic should be subscribed to by the "Simple Message" display page when the page loads. Therefore, in the example, the onload event was selected to execute the JavaScript function and thus to subscribe.

   

4. Set Up a WebSocket Action

The "Simple Message" process was created in Intrexx.

A WebSocket action was added to the process.
In the WebSocket action, the "Simple Message" application and the "Topic for simple message" were selected on the "Topic" tab.

In the WebSocket action, the static text "My first WebSocket message" was entered on the "Content" tab.

Example - Simple Message with a Groovy Script

Features

This example produces the same result as the "Simple Message" example. However, the message content and the link to the topic are implemented using a Groovy action.

Setting Up / Configuring the Example

1. What prompted the news
   

   As in the "Simple Message" example

2. Create a topic
   

   As in the "Simple Message" example

3. Set the display on the portal
   

   As in the "Simple Message" example

4. Set Up a Groovy Campaign
   

   The "Simple Message" process was created in Intrexx.

   

   A Groovy action was added to the process.
   In the Groovy action, the following Groovy script code was inserted into the script editor:

                       import de.uplanet.lucy.server.websocket.groovy.GroovyWebSocketTopic
   GroovyWebSocketTopic.sendTextMessage(topicGUID, "My first WebSocket message")
   
                   

   It would also be possible to generate a JSON message. The code for this might look like this:

                       import de.uplanet.lucy.server.websocket.groovy.GroovyWebSocketTopic
   
   def msg = [
     seq: 1,
     greet: "My first WebSocket message"
   ]
   
   GroovyWebSocketTopic.sendJsonMessage(topicGUID, msg)
   
                   

Groovy Action and WebSocket Action in a Single Process

Features

This example is intended to illustrate a dynamic message. The message consists of a random number. This is generated by a Groovy script and assigned to a variable. A global timer triggers the Groovy script every 10 seconds. This means that a new random number is generated every 10 seconds and, using a WebSocket action, is displayed in an input field and automatically updated every 10 seconds.

Setting Up / Configuring the Example

1. What prompted the news
   

   As in the "Simple Message" example

2. Create a topic
   

   An application named "Display Random Number" was created, and the "Topic-Random Number" topic was created in the application's properties.

3. Set the display on the portal
   

   The JavaScript functions are as follows:

                       function displayRandomNumber() {
     var myfield = getElement(elementToDisplayRandomNumberGUID);
     subscribeMyTopic(topicGUID, myfield);
   }
   
   function subscribeMyTopic(topicGuid, elementTarget) {
     return ix.websocket.subscribeToTopic(topicGuid, {
       onmessage: function onmessage(data) {
         Browser.setValue(elementTarget, data);
       }
     });
   }
   
                   

4. Set Up a Groovy Campaign
   

   The "Random Number" process was created in Intrexx.

   

   In this example, the Groovy action generates a random number and assigns it to a variable.
   The Groovy script code looks like this:

                       def yourVar=(int)(Math.random() *20);
   g_sharedState.myVar=Integer.toString(yourVar)
   
                   

   In the WebSocket action, the "Display Random Number" application and the "Topic Random Number" were selected on the "Topic" tab.

   

   In the WebSocket action, the "Text from System Value" option was selected on the "Content" tab.

   

   In the "Edit System Value" dialog box, "Processing Context" was selected in the "Type" drop-down list.
   "msg" was entered in the "Value" field.

   

Example of Starting and Ending a Subscription Using Buttons

Features

In this example, the message "My first WebSocket message" is also sent to the "Simple Message" display page. However, the (portal) user has the option to stop the automatic display of messages and restart it manually.

Setting Up / Configuring the Example

1. What prompted the news
   

   As in the "Simple Message" example

2. Create a topic
   

   As in the "Simple Message" example

3. Set the display on the portal
   

   Create elements that allow users to manually start and stop the subscription.
   Two buttons have been added to the "Simple Message" display page.

   

   The user subscribes to the "Topic for simple message" topic by clicking the "Start subscription manually" button. The JavaScript function looks like this:

                       function displayWebsocketMessage() {
     ix.websocket.subscribeToTopic(topicGUID, {
       key: "key1",
       onmessage: function onmessage(data) {
         var elementToDisplayMessage = getElement(elementToDisplayMessageGUID);
         elementToDisplayMessage.innerHTML =
           elementToDisplayMessage.innerHTML + data + " ";
       }
     });
   }
   
                   

   The user can unsubscribe from the "Topic for simple message" topic by clicking the "Unsubscribe" button. The JavaScript function looks like this:

                       function unsubscribeWebsocketMessage(){
   	ix.websocket.unsubscribeFromTopic("key1");
   }
   
                   

Example of Starting and Ending a Subscription Using Checkboxes

Features

In this example, the message "My first WebSocket message" is also sent to the "Simple Message" display page. However, the (portal) user has the option to enable or disable the automatic display of messages using a checkbox.

Setting Up / Configuring the Example

1. What prompted the news
   

   As in the "Simple Message" example

2. Create a topic
   

   As in the "Simple Message" example

3. Set the display on the portal
   

   Create an element that can be used to enable and disable automatic updates.
   A checkbox has been added to the "Simple Message" display page.

   

   Define an event for the subscription.
   The "Topic for simple message" topic is subscribed to by the "Simple Message" display page when the page loads. Therefore, in the example, the onload event was selected to execute the JavaScript function simpleMessage() and thus to subscribe.

   

   Define an event for canceling the subscription. The onclick event of the checkbox is used to cancel and reactivate the subscription.

   

   The onclick event calls the function toggleTopicHandler(guidInput, guidTarget). The JavaScript function looks like this:

                       function toggleTopicHandler(guidInput, guidTarget) {
     var elementInput = getElement(guidInput);
     var elementTarget = getElement(guidTarget);
   
     if ($(elementTarget).data("topicSub")) {
       unsubscribeTopic($(elementTarget).data("topicSub"));
       $(elementTarget).removeData("topicSub");
       writeMessage(elementTarget, "Stop listening...");
       return true;
     } else {
       var promiseSub = subscribeTopic(elementInput.oUp.getValue(), elementTarget);
       $.when(promiseSub).done(function (subscriber) {
         writeMessage(elementTarget, "Start listening...");
         $(elementTarget).data("topicSub", subscriber);
       });
       return promiseSub;
     }
   }
   
   function subscribeTopic(topicGuid, elementTarget) {
     return ix.websocket.subscribeToTopic(topicGuid, {
       onmessage: function onmessage(data) {
         writeMessage(elementTarget, data);
       }
     });
   }
   
   function unsubscribeTopic(subscriber) {
     return ix.websocket.unsubscribeFromTopic(subscriber);
   }
   
   function writeMessage(elementTarget, message) {
     elementTarget.innerHTML = "<p>" + message + "</p>" + elementTarget.innerHTML;
   }