Table of Contents

What's this for?

This article is for people who wants to implement a guide for implementing web socket support function into their a Joget application.

Plugin Info

The following is the code for the plugin.

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

Info

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

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

public void onCloseonMessage(String message, Session session) 
public- voidThis onError(Session session, Throwable throwable)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";

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 getDescriptiongetName() {
        //support i18n
        return AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginDesc", getClassName(), MESSAGE_PATH);
    }

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

    @Override
    public FormRowSetString formatDatagetClassName(FormData formData) {

        FormRowSet rowSet = null;
return getClass().getName();
    }

    // get value@Override
      public  String id = getPropertyString(FormUtil.PROPERTY_ID);getLabel() {
        if (id != null) {//support i18n
            String value = FormUtil.getElementPropertyValue(this, formDatareturn AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginLabel", getClassName(), MESSAGE_PATH);
    }

    @Override
    public ifString getDescription(value != null) {
                //support seti18n
 value into Properties and FormRowSet object
      return AppPluginUtil.getMessage("org.joget.WebSocketPlugin.pluginDesc", getClassName(), MESSAGE_PATH);
    }

    @Override
  FormRow result =public newString FormRowgetPropertyOptions(); {
                result.setProperty(id, value);
                rowSet = new FormRowSet();return AppUtil.readPluginResource(getClass().getName(), "/properties/form/" + getName() + ".json", null, true, MESSAGE_PATH);

    }

    @Override
    public FormRowSet formatData(FormData formData) {

        FormRowSet rowSet = null;

     rowSet.add(result   // get value
        String id = getPropertyString(FormUtil.PROPERTY_ID);
        if (id != null) }{
        }
    String value =  return rowSetFormUtil.getElementPropertyValue(this, formData);
    }

    @Override
    publicif String renderTemplate(FormData formData, Map dataModel(value != null) {
        String template = "webSocketPlugin.ftl";

     // set value WorkflowUserManagerinto wumProperties =and (WorkflowUserManager) AppUtil.getApplicationContext().getBean("workflowUserManager");FormRowSet object
        String username = wum.getCurrentUsername();
     FormRow result = new dataModel.put("username", usernameFormRow();

             String html = FormUtilresult.generateElementHtmlsetProperty(thisid, formData, template, dataModelvalue);
         return html;
    }

  rowSet  @Override= new FormRowSet();
    public String getFormBuilderTemplate() {
        return "<label class='label'>" + getLabel() + "</label>";
    }

 rowSet.add(result);
            @Override}
     public String getFormBuilderCategory() {}
        return FormBuilderPalette.CATEGORY_CUSTOMrowSet;
    }

    @Override
    public voidString onOpen(Session sessionrenderTemplate(FormData formData, Map dataModel) {
        try {String template = "webSocketPlugin.ftl";

        WorkflowUserManager wum = (WorkflowUserManager) sessionAppUtil.getBasicRemotegetApplicationContext().sendTextgetBean("Connection establishedworkflowUserManager");
        String }username catch= wum.getCurrentUsername(IOException e) {;
            e.printStackTrace(dataModel.put("username", username);

        }
    }

String html = FormUtil.generateElementHtml(this, formData, template, dataModel);
     @Override
   return publichtml;
 void onMessage(String message, Session}

 session) {
  @Override
    public String trygetFormBuilderTemplate() {
        return "<label class='label'>" + session.getBasicRemotegetLabel().sendText("Server received: " + message); + "</label>";
    }

    @Override
    }public catchString getFormBuilderCategory(IOException e) {
        return    e.printStackTrace()FormBuilderPalette.CATEGORY_CUSTOM;
        }
    }

    @Override
    public void onCloseonOpen(Session session) {
        LogUtil.info(getClassName(), "Webscoket connection closedtry {
            session.getBasicRemote().sendText("Connection established");
        }
 catch (IOException e) {
    @Override
    public void onError(Session session, Throwable throwable) { e.printStackTrace();
        LogUtil.error(getClassName(), throwable, "");}
    }

    public boolean isEnabled() {@Override
    public void onMessage(String message, if ("true".equalsIgnoreCase(getPropertyString("enableWebsocket")))Session session) {
            return true;try {
        } else {
    session.getBasicRemote().sendText("Server received: " + message);
        } catch (IOException e) {
            return false;
        }
    }

}

...

e.printStackTrace();
        }
    }

    @Override
    public void onClose(Session session) {
        LogUtil.info(getClassName(), "Webscoket connection closed");
    }
    
    @Override
    public void onError(Session session, Throwable throwable) {
        LogUtil.error(getClassName(), throwable, "");
    }

    public boolean isEnabled() {
        if ("true".equalsIgnoreCase(getPropertyString("enableWebsocket"))) {
            return true;
        } else {
            return false;
        }
    }

}

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">
        ${element.properties.label} <span class="form-cell-validator">${decoration}</span>
        <#if error??>
            <span class="form-error-message">${error}</span>
        </#if>
    </label>
    <#if (element.properties.enableWebsocket! == 'true')>
        <input id="isEnabled" name="isEnabled" type="hidden" />
    </#if>

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

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

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

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

            ws.onopen = function(event) {
                console.log(event);
                $("#output").append('Connection opened with timeStamp: ' + event.timeStamp + '<br/>');
   
                $("#sendButton").on("click", function(){
                    const message = $("#messageInput").val();

                    //send message to endpoint
                    ws.send(message);  
                    $("#output").append("${username} send " + message + '<br/>'); 
                    $("#messageInput").val("");
                    return false;
                });

                $("#closeButton").on("click", function(){
                    if (ws.readyState === WebSocket.OPEN) {
                        //close the endpoint connection
                        ws.close();
                    }
                    $("#sendButton").hide();
                    $("#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

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 10

New Version Current

Key

What's this for?

Plugin Info

Prerequisites

Plugin Info

Sample

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 10

New Version Current

Key

What's this for?

Plugin Info

Prerequisites

Plugin Info

Sample