Whiteboard

Summary

Overview

Whiteboard app consist of a portlet which integrates innovative technologies for intuitive graphical user interface in javascript and asynchronous communication ("real-time")

Whiteboard app uses fabrics.js for build whiteboard canvas and tools.
Whiteboard app uses Atmosphere Framework in client and server side, to manage the asynchronous communication mechanism. The first protocol which portlet tries to use is web sockets, however this depends on the browser and the application container (server) where the app is installed.

This application has been tested in these Liferay bundles:

• Tomcat 7
• Glassfish 3.1
• JBoss AS 7.1

And in these browsers:

• IE9+
• Firefox 25+
• Safari 6.1.3
• Chrome 34

Currently, Whiteboard app works with web sockets if the server is Tomcat 7 for almost all browsers. If it is running in a JBoss AS 7.1 or Glassfish 3.1 Whiteboard app works but using pooling-streaming mechanism.

Features

Description	Screenshot
List of users connected to the whiteboard (users which are currently visiting the page where the application is installed) Non-logged in users are shown as "Guest". If user leaves the page, the list of users is immediately updated.
The whiteboard toolbar includes the following tools: Shapes: rectangles, lines, circles, free drawing, text. Delete a shape. Clean the whole whiteboard.
Line and background color, with opacity control.
All users can add new shapes and text to the whiteboard. When a user draws or edits a shape in the whiteboard, the changes are reflected in every whiteboard.

Installation

The installation steps are as follows:

• Obtain the Whiteboard app from the Liferay Marketplace
• Deploy the app in your existing Liferay instance. If you haven't installed Liferay, please download and follow the instructions to do so
• Go to site page where you intend to add Whiteboard app with the administrator permission in order to add the app to the page
• Select "Add Applications", then search for Whiteboard and click on “Add”

Configuration

There's no additional configuration needed to get this application working, except for Glassfish, because by the default comet support is not enabled.

Specific configuration steps for Glassfish 3.1:

In the domain configuration file (typically $GLASSFISH_HOME/domains/domain1/config/domain.xml) the element protocol named "http-listener-1" must be modified. Tipically you are going to find this element twice, under element config named "server-config" and "default-config". You can modify both of them, by changing the element http to

...
<network-config>
<protocols>
<protocol name="http-listener-1">
<http websockets-support-enabled="true" default-virtual-server="server" max-connections="250" comet-support-enabled="true">
...

Note:

You might get these warning and error massages when using the app for the first time:

WARN  [http-bio-8080-exec-14][AtmosphereFramework:306] Failed using comet support: org.atmosphere.container.Tomcat7AsyncSupportWithWebSocket, error: Tomcat failed to detect this is a Comet application because context.xml is missing or the Http11NioProtocol Connector is not enabled.You must use the atmosphere-native-runtime dependency in order to use native Comet Support_If that's not the case, you can also remove META-INF/context.xml and WEB-INF/lib/atmosphere-compat-tomcat7.jar Is the NIO or APR Connector enabled? [Sanitized]

ERROR [http-bio-8080-exec-14][AtmosphereFramework:113] If you have more than one Connector enabled, make sure they both use the same protocol, e.g NIO/APR or HTTP for all. If not, org.atmosphere.container.BlockingIOCometSupport will be used and cannot be changed.

java.lang.IllegalStateException: Tomcat failed to detect this is a Comet application because context.xml is missing or the Http11NioProtocol Connector is not enabled.You must use the atmosphere-native-runtime dependency in order to use native Comet Support_If that's not the case, you can also remove META-INF/context.xml and WEB-INF/lib/atmosphere-compat-tomcat7.jar [Sanitized]

Don't worry about those, the app functionality is not affected. Those are reported as part of the Atmosphere framework discovery of supported fallback protocols.

If you really want to get rid of those you can do that by changing the file WEB-INF/web.xml from this:

<servlet>

        <servlet-name>CollaborationWhiteBoard</servlet-name>

        ...

        <init-param>

            <param-name>org.atmosphere.useNative</param-name>

            <param-value>true</param-value>

        </init-param>

        ...

</servlet>

to this:

<servlet>

        <servlet-name>CollaborationWhiteBoard</servlet-name>

        ...

        <init-param>

            <param-name>org.atmosphere.useNative</param-name>

            <param-value>false</param-value>

        </init-param>

        ...

</servlet>

 but by doing that you will disable the support for IE9 browsers, and would start getting errors in the log file if an IE9 browser access the app.

Known Issues

The application stops working in JBoss server when the Security Manager is enabled, the following exception is generated during the server startup:

ERROR [org.atmosphere.cpr.AtmosphereFramework] (MSC service thread 1-7) Failed to initialize Atmosphere Framework: javax.servlet.ServletException: java.security.AccessControlException: Access denied ("java.lang.RuntimePermission" "getClassLoader")

This error is generated even when the policy file is set to grant AllPermission and the liferay-plugin-package.properties contains the proper permissions for the ClassLoader.

If the application is deployed when the Security Manager is already enabled it works as expected, however the exception will appear if the server is restarted.

Liferay 7

Server Settings

On LR 7, websockets seems will become out of the box, but prior to version CE GA 4, following configuration is required to make the whiteboard work:

Overwrite the system packages from Liferay root folder via portal-ext.properties file:

module.framework.system.packages.extra=\
        com.ibm.crypto.provider,\
        com.ibm.db2.jcc,\
        com.microsoft.sqlserver.jdbc,\
        com.mysql.jdbc,\
        com.p6spy.engine.spy,\
        com.sun.security.auth.module,\
        com.sybase.jdbc4.jdbc,\
        oracle.jdbc,\
        org.postgresql,\
        org.apache.naming.java,\
        org.hsqldb.jdbc,\
        org.mariadb.jdbc,\
        sun.misc,\
        sun.net.util,\
        sun.security.provider,\
        javax.websocket;version="1.1.0",\
        javax.websocket.server;version="1.1.0"

Also we should install/paste inside Liferay root /osgi/modules the jar for com.liferay:com.liferay.com.liferay.websocket.whiteboard:1.0.0 , first generating the jar by compiling the code from here https://github.com/cgoncas/liferay-portal/tree/WEBSOCKET_LIFERAY_SUPPORT/modules/apps/foundation/websocket (gradle install)

or 

Donwload the jar form the next location:

https://search.maven.org/#search%7Cga%7C1%7Cliferay.websocket.whiteboard

Portlet Settings/Preferences

• "Use Secured Websocket (SSL) ?" : If this option is checked, connection url will begin with "wss://" (secure protocol) instead of "ws://"
• "Use Custom Websocket Base Path?": If this option is checked, the "Custom Websocket Base Path" field value will be used in the connection url. If no checked, by default connection url looks like, ws://SERVER_NAME:SERVER_PORT/o/collaboration-whiteboard but if checked, while this checkbox checked, connection url will look like ws://SERVER_NAME:SERVER_PORT/ws/o/collaboration-whiteboard . This setting is useful when running liferay/tomcat behind a proxy or apache server, when using apache server additional configuration needs to be set, like setting up proxy_wstunnel_module and create a proxy pass like ProxyPass /ws ws://localhost:8080/ this way  for example a connection made to ws://SERVER_NAME:SERVER_PORT/ws/o/collaboration-whiteboard will try to request the localhost


Code repository

The latest source code is located at the following location:

https://github.com/rivetlogic/liferay-whiteboard

Contact Us

We welcome feature/bug reports concerning the Whiteboard app. Discussion helps to clarify the ways the app can be used and also helps define directions for future development. Please post your concerns at http://issues.rivetlogic.com/browse/LRA

Change log:

1.0.2