Examples

Example - Simple message

Functions

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" application of the same name. The message sending is triggered by a global timer in Intrexx. The execution time 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 should help you to understand the basic functionality of WebSockets in Intrexx.

It does not represent a real-life use case. Nonetheless, the configuration steps can be transferred one-to-one to real-life use cases.

Setup / configuration of the example

1. Trigger of the message

The message is triggered by an internal event, a global timer in this case. The execution time is set to every 10 seconds. The global timer is the event source in the "Simple Message" example.

2. Create topic

The topic "Topic for simple messages" was created in the "Simple Message" action.

3. Set display in the portal

1. Create element in which the messages are to be displayed.
   The "Simple Message" display page was created in the "Simple Message" application.
   A control element of the type "Static text" has been added to the display page to display the messages.

   

2. Define the element in which the message is to 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 This allows you to simply insert the topic GUID into the code in the script editor:
   

   1. Place the cursor at the position where the topic GUID is to be inserted.

   2. Select the desired topic in the "Application structure".

   3. Click on the icon.

   

3. Define event for the subscription.
   The topic "Topic for simple message" should be subscribed to by the "Simple Message" display page when the page is loaded. Therefore, ""onload"" is selected as the event for the JavaScript function for subscribing to the topic.

   

4. Set up WebSocket action

The "Simple Message" process was created in Intrexx.

This process contains a WebSocket action.
In the WebSocket action, the "Simple Message" application and the "Topic for simple message" were selected in the "Topic" tab.

In the WebSocket action, the static text "My first WebSocket message" has been stored in the "Content" tab.

Example - Simple message with Groovy script

Functions

This example leads to the same result as the "Simple Message" example. In this case, however, the message content and the link to the topic will be implemented using a Groovy script action.

Setup / configuration of the example

1. Trigger of the message
   

   As in the "Simple Message" example

2. Create topic
   

   As in the "Simple Message" example

3. Set display in the portal
   

   As in the "Simple Message" example

4. Configure Groovy script action
   

   The "Simple Message" process was created in Intrexx.

   

   A Groovy action was added to the process.
   This contains the following Groovy script:

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

   You could also generate a JSON message. The code for this looks 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 one process

Functions

This example is designed to demonstrate a dynamic message. The message consists of a random number. This number is generated by a Groovy script and transferred to a variable. A global timer triggers the script every 10 seconds. In this way, a new random number is generated every 10 seconds, which is then displayed in an edit field and automatically updated every 10 seconds by a WebSocket action.

Setup / configuration of the example

1. Trigger of the message
   

   As in the "Simple Message" example

2. Create topic
   

   An application "Display random number" was created and the topic "Topic random number" was created in the properties of the application.

3. Set display in the portal
   

   The JavaScript functions look like this:

                       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. Configure Groovy script action
   

   The "Random number" process was created in Intrexx.

   

   In this example, the Groovy action is used to generate a random number and pass 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 "Random number topic" were selected in the "Topic" tab.

   

   In the WebSocket action, the option "Text from system value" was selected in the "Content" tab.

   

   In the "Edit system value" dialog box, the value "Processing context" was selected in the "Type" selection field.
   Msg" was entered in the "Value" field.

   

Example - Subscribe and unsubscribe via buttons

Functions

In this example, the message "My first WebSocket message" is also sent to the "Simple Message" display page. But in this case, the (portal) user has the option of turning the automatically received messages on or off by clicking on the corresponding buttons.

Setup / configuration of the example

1. Trigger of the message
   

   As in the "Simple Message" example

2. Create topic
   

   As in the "Simple Message" example

3. Set display in the portal
   

   Create elements that can be used to start and end the subscription manually.
   Two buttons have been added to the "Simple Message" display page.

   

   The topic "Topic for simple message" is subscribed to by the user by clicking on 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 + " ";
       }
     });
   }
   
                   

   Subscription to the topic "Topic for simple message" is ended by the user by clicking on the "End subscription" button. The JavaScript function looks like this:

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

Example - Subscribe and unsubscribe via buttons

Functions

In this example, the message "My first WebSocket message" is also sent to the "Simple Message" display page. But in this case, the (portal) user has the option of turning the automatically received messages on or off by activating or deactivating a checkbox.

Setup / configuration of the example

1. Trigger of the message
   

   As in the "Simple Message" example

2. Create topic
   

   As in the "Simple Message" example

3. Set display in the portal
   

   Create an element with which automatic updating can be activated and deactivated.
   A checkbox has been added to the "Simple Message" display page.

   

   Define event for the subscription.
   The topic "Topic for simple message" is subscribed to by the "Simple Message" display page when the page is loaded. Therefore, ""onload"" is selected as the event for the JavaScript function for subscribing to the topic.

   

   Define the event for unsubscribing. The ""onclick"" event of the checkbox is selecting for unsubscribing and resubscribing.

   

   The ""onclick"" event calles 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;
   }