Table of Contents

What's this for?

This article demonstrate the implementation of the is a guide for implementing web socket support as function into a pluginJoget application.

...

Prerequisites

Identify the type of plugin you want to develop. Refer: Introduction to Plugin Architecture
You are required to have a plugin project ready. Refer: Guideline for Developing a Plugin

Plugin Info

The following is an example of implementing the WebSocket feature inside a radio form element. It showcases one of the ways to create a WebSocket plugin and the code belongs to the plugin class.

Info

There are 4 key web socket methods that you are required to pay attention to:

public void onOpen(Session session)
- This method will be invoked when a WebSocket connection is opened. It send a specified text message to client side.

public void onMessage(String message, Session session) 
- This method will be invoked when a message is received on the WebSocket. It will send a response back to the client to indicate that the server has received the message.

public void onClose(Session session) 
- This method will be invoked when WebSocket connection is closed. It will log an information message indicating that the connection is closed.

public void onError(Session session, Throwable throwable)
- This method will be invoked when an error occurs in the WebSocket communication. It will log an error message.

Code Block

language	java

package org.joget;

import java.io.IOException;
import java.util.Map;

import javax.websocket.Session;

import org.joget.apps.app.service.AppPluginUtil;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.lib.Radio;
import org.joget.apps.form.model.FormBuilderPalette;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.FormRow;
import org.joget.apps.form.model.FormRowSet;
import org.joget.apps.form.service.FormUtil;
import org.joget.commons.util.LogUtil;
import org.joget.plugin.base.PluginWebSocket;
import org.joget.workflow.model.service.WorkflowUserManager;

public class WebSocketPlugin extends Radio implements PluginWebSocket {

    private final static String MESSAGE_PATH = "message/form/WebSocketPlugin";

    @Override
    public String getName() {
        return "WebSocketPlugin";
    }

    @Override
    public String getVersion() {

Examples

Pay attention to the

Code Block

language	java

package org.joget;

import java.io.IOException;
import java.util.Map;

import javax.websocket.Session;

import org.joget.apps.app.service.AppPluginUtil;
import org.joget.apps.app.service.AppUtil;
import org.joget.apps.form.lib.Radio;
import org.joget.apps.form.model.FormBuilderPalette;
import org.joget.apps.form.model.FormData;
import org.joget.apps.form.model.FormRow;
import org.joget.apps.form.model.FormRowSet;
import org.joget.apps.form.service.FormUtil;
import org.joget.commons.util.LogUtil;
import org.joget.plugin.base.PluginWebSocket;
import org.joget.workflow.model.service.WorkflowUserManager;

public class WebSocketPlugin extends Radio implements PluginWebSocket {

    private final static String MESSAGE_PATH = "message/form/WebSocketPlugin";

    @Override
    public String getName() {
        return "WebSocketPlugin";
    }

    @Override
    public String getVersion() {
        return "5.0.0";
    }

    @Override
    public String getClassName() {
        return getClass().getName();
    }

    @Override
    public String getLabel() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginLabel", getClassName(), MESSAGE_PATH);
    }

    @Override
    public String getDescription() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginDesc", getClassName(), MESSAGE_PATH);
    }

    @Override
    public String getPropertyOptions() {
        return AppUtil.readPluginResource(getClass().getName(), "/properties/form/" + getName() + ".json", null, true, MESSAGE_PATH);

    }

    @Override
    public FormRowSet formatData(FormData formData) {

        FormRowSet rowSet = null;

        // get value
        String id = getPropertyString(FormUtil.PROPERTY_ID)return "5.0.0";
    }

    @Override
   if (idpublic !=String nullgetClassName() {
            String value = FormUtil.getElementPropertyValue(this, formDatareturn getClass().getName();
    }

    @Override
    ifpublic String getLabel(value != null) {
        //support i18n
       // set value into Properties and FormRowSet object return AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginLabel", getClassName(), MESSAGE_PATH);
    }

    @Override
    public String getDescription() {
     FormRow result = new FormRow();//support i18n
                result.setProperty(id, valuereturn AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginDesc", getClassName(), MESSAGE_PATH);
    }

    @Override
    public    rowSet = new FormRowSet();String getPropertyOptions() {
                rowSet.add(result);
        return AppUtil.readPluginResource(getClass().getName(), "/properties/form/" + getName() + ".json", null, true, MESSAGE_PATH);

    }

    @Override
    public FormRowSet formatData(FormData formData) }{

        returnFormRowSet rowSet = null;

    }

    // get @Overridevalue
       public String renderTemplate(FormData formData, Map dataModel) {id = getPropertyString(FormUtil.PROPERTY_ID);
        Stringif template(id != "webSocketPlugin.ftl";

null) {
            WorkflowUserManagerString wumvalue = (WorkflowUserManager) AppUtil.getApplicationContext().getBean("workflowUserManager"FormUtil.getElementPropertyValue(this, formData);
        String username = wum.getCurrentUsername();    if (value != null) {
        dataModel.put("username", username);

       // Stringset htmlvalue = FormUtil.generateElementHtml(this, formData, template, dataModel);into Properties and FormRowSet object
        return html;
    }

   FormRow @Override
result = new FormRow();
 public String getFormBuilderTemplate() {
        return "<label class='label'>" + getLabel() + "</label>";
result.setProperty(id, value);
         }

    @Override
   rowSet public= Stringnew getFormBuilderCategoryFormRowSet();
   {
        return FormBuilderPalette.CATEGORY_CUSTOM;
    }
rowSet.add(result);
    @Override
    public void onOpen(Session session) {}
        try}
 {
       return rowSet;
    session.getBasicRemote().sendText("Connection established");}

    @Override
    }public catchString (IOException erenderTemplate(FormData formData, Map dataModel) {
        String template =  e.printStackTrace();"webSocketPlugin.ftl";

        }
WorkflowUserManager wum =  }

    @Override
(WorkflowUserManager) AppUtil.getApplicationContext().getBean("workflowUserManager");
      public void onMessage(String message,username Session session) {= wum.getCurrentUsername();
        try {dataModel.put("username", username);

        String html =  sessionFormUtil.getBasicRemote().sendText("Server received: " + messagegenerateElementHtml(this, formData, template, dataModel);
        } catch (IOException e) {
            e.printStackTrace();
        }return html;
    }

    @Override
    public voidString onClosegetFormBuilderTemplate(Session session) {
        LogUtil.info(getClassName(), "Webscoket connection closed")return "<label class='label'>" + getLabel() + "</label>";
    }
    
    @Override
    public voidString onError(Session session, Throwable throwablegetFormBuilderCategory() {
        return LogUtil.error(getClassName(), throwable, "");FormBuilderPalette.CATEGORY_CUSTOM;
    }

    }
@Override
    public booleanvoid isEnabledonOpen(Session session) {
        if ("true".equalsIgnoreCase(getPropertyString("enableWebsocket"))) try {
            return truesession.getBasicRemote().sendText("Connection established");
        } elsecatch (IOException e) {
            return falsee.printStackTrace();
        }
    }

}

Figure 1:

Code Block

language	js

<div class="form-cell" ${elementMetaData!}>
    <label class="label">    @Override
    public void onMessage(String message, Session session) {
        ${element.properties.label} <span class="form-cell-validator">${decoration}</span>
try {
            <#if error??>
   session.getBasicRemote().sendText("Server received: " + message);
        } <span class="form-error-message">${error}</span>catch (IOException e) {
        </#if>
    </label>e.printStackTrace();
    <#if (element.properties.enableWebsocket! == 'true')>
      }
    }

    @Override
  <input id="isEnabled" name="isEnabled" type="hidden" /> public void onClose(Session session) {
    </#if>

    <#if (element.properties.readonly! == 'true' && element.properties.readonlyLabel! == 'true') >LogUtil.info(getClassName(), "Webscoket connection closed");
    }
    
    @Override
    public void onError(Session  <div class="form-cell-value"><span>${value!?html}</span></div>session, Throwable throwable) {
        <input id="${elementParamName!}" name="${elementParamName!}" type="hidden" value="${value!?html}" />LogUtil.error(getClassName(), throwable, "");
    }

    <#else>public boolean isEnabled()  {
        <inputif type=("text" id="messageInput" placeholder="Enter message">true".equalsIgnoreCase(getPropertyString("enableWebsocket"))) {
        <button id="sendButton">Send</button>
   return true;
    <button id="closeButton">Close</button><br>
   } else {
   <div id='output'></div>
    </#if>

    <script>
    $(document).ready(function() {return false;
        $("#sendButton").off("click");}
        $("#closeButton").off("click");

        if ($("#isEnabled").length > 0) {

            const ws = new WebSocket(((window.location.protocol === "https:") }

}

A FTL file is required for rendering the HTML content for the WebSocket plugin, you may copy the following code as a starting template.

Info

The endpoint is specified at this line:

Code Block
const ws = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "${request.contextPath}/web/socket/plugin/org.joget.WebSocketPlugin");

The following 4 functions are event handlers that handles different WebSocket Events :

ws.onopen

=

function(event)
ws.onmessage = function(event)
ws.onclose = function(event)
ws.onError = function(event)

You may make changes to any of the FTL code as it suits.

Code Block

language	js

<div class="form-cell" ${elementMetaData!}>
    <label class="label">
 {
                console.log(event);
                $("#output").append('Connection opened with timeStamp: ' + event.timeStamp + '<br/>');
     ${element.properties.label} <span class="form-cell-validator">${decoration}</span>
        <#if error??>
                $("#sendButton").on("click", function(){<span class="form-error-message">${error}</span>
        </#if>
    </label>
    <#if (element.properties.enableWebsocket! == 'true')>
     const message = $("#messageInput").val();

    <input id="isEnabled" name="isEnabled" type="hidden" />
    </#if>

    <#if (element.properties.readonly! == 'true' && element.properties.readonlyLabel! == 'true') >
 //send message to endpoint
    <div class="form-cell-value"><span>${value!?html}</span></div>
        <input id="${elementParamName!}"      ws.send(message);  name="${elementParamName!}" type="hidden" value="${value!?html}" />
    <#else>    
        <input    $("#output").append("${username} send " + message + '<br/>'); type="text" id="messageInput" placeholder="Enter message">
        <button id="sendButton">Send</button>
           $("#messageInput").val("");<button id="closeButton">Close</button><br>
        <div id='output'></div>
    </#if>

       return false;<script>
        $(document).ready(function() {
        }$("#sendButton").off("click");

                $("#closeButton").onoff("click", function(){);

        if ($("#isEnabled").length > 0) {

          if (ws.readyState === WebSocket.OPEN) {
                const ws = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "${request.contextPath}/web/socket/plugin/org.joget.WebSocketPlugin");

         //close the endpoint connection
ws.onopen = function(event) {
                     ws.close(console.log(event);
                $("#output").append('Connection opened with  }timeStamp: ' + event.timeStamp + '<br/>');
    
                $("#sendButton").hideon("click", function();{
                    const message = $("#closeButton#messageInput").hideval();

                    return false;  //send message to endpoint
     
                }ws.send(message);  
            }; 

       $("#output").append("${username} send " + message ws.onmessage = function(event) {+ '<br/>'); 
                    $("#output#messageInput").append(event.data + '<br/>'val("");
            }; 

        return false;
              ws.onclose = function(event) {});

                $("#output#closeButton").append('Connection closed with timeStamp: ' + event.timeStamp + '<br/>');
on("click", function(){
                    if (ws.readyState  $("#output").append('WebSocket closed<br/>');=== WebSocket.OPEN) {
            }; 

            ws.onError = function(event) {
//close the endpoint connection
                 $("#output").append("Error: " + event.data   + '<br/>' ws.close();
            };  
        }
        } else {
            $("#output#sendButton").html('WebSocket is not enable.<br>'hide();
        }
    });
    </script>
    <div style="clear:both;"></div>
</div>

Step 2: Testing the plugin

...

 $("#closeButton").hide();
                    return false;       
                });
            }; 

            ws.onmessage = function(event) {
                $("#output").append(event.data + '<br/>');
            }; 

            ws.onclose = function(event) {
                $("#output").append('Connection closed with timeStamp: ' + event.timeStamp + '<br/>');
                $("#output").append('WebSocket closed<br/>');
            }; 

            ws.onError = function(event) {
                $("#output").append("Error: " + event.data + '<br/>');
            };  
        
        } else {
            $("#output").html('WebSocket is not enable.<br>');
        }
    });
    </script>
    <div style="clear:both;"></div>
</div>

Sample

Figure 2:

Figure 3:

Step 3:

Figure 4:

Figure 5:

...

This sample plugin code is available at https://github.com/jogetoss/sample-web-socket-plugin. JogetOSS is a community-led team for open source software related to the Joget no-code/low-code application platform. Projects under JogetOSS are community-driven and community-supported, and you are welcome to contribute to the projects.

Space shortcuts

Page tree

Versions Compared

Old Version 6

New Version Current

Key

What's this for?

Prerequisites

Plugin Info

Examples

Step 2: Testing the plugin

Sample

Step 3:

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 6

New Version Current

Key

What's this for?

Prerequisites

Plugin Info

Examples

Step 2: Testing the plugin

Sample

Step 3: