AD102 - Bring WebSocket Technology to Your Next XPage Application

Csaba Kiss 08/19/2016

LA-UR-16-20047

Credentials

Over 25 years experience in molecular biology

Began XPage application development in 2014

JavaScript enthusiast

Twitter: @csakis

Blog: XpageXplorer.org

MWLUG survey

mwlug2016.mybluemix.net

Agenda

HTTP protocol drawbacksWebsocket

– Why does it exist? (Background)– How do you use it? (API)– How do you get it work? (Installation)– WebSocket code examples– Server side listeners using SSJS – Pros and cons

DEMO DEMO DEMO

HTTP protocol

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP functions as a request-response protocol in the client-server computing model.*

*: wikipedia

Client Server

Request

Request

Response

Response

Response

Too much overhead

871 bytes header data (without any session/cookie data)

Clients Req/min* MB/min

100 600 5

500 30,000 26

1,000 60,000 52

10,000 600,000 522

*: 1 request every second

Other HTTP limitations

Every request needs a new connection (latency)Half duplex connection (walkie talkie)

Work aroundsLong-polling (comet)

Complicated implementation, Not standardized.

Client

Server

Req

uest

Req

uest

Res

pons

e

Res

pons

e

The creation of WebSocket WebSocket is a protocol providing full-duplex communication channels over a single

TCP connection. Both the WebSocket API itself (W3C) and the WebSocket protocol are HTML5

standards. The WebSocket protocol is supported in the latest versions of browsers

Client Server

Message

Message

Message

Message

Message

Message

Browser compatibility*

*:caniuse.com

MWLUG 2016

Websocket API

Websocket constructorEstablishing a new websocket connection

1 2 3 4

1. ws is the new websocket object2. ws:// denotes websocket protocol3. WebSocket port4. optional protocols

The hand shakeThe client sends a WebSocket handshake request:

The server responds:

Connection is “upgraded”

WebSocket is purely event driven

4 events

WebSocket methods

2 methods

The websocket message format is important with the OpenNTF websocket plugin.Optional close codes:

1000 – CLOSE_NORMAL1006 – CLOSE_ABNORMAL1012 – SERVICE_RESTART…

Simple websocket message format

Message in JSON formatSender format needs to be in a canonical format: @UserName()Recipient:

– broadcast (everybody receives it)– to: single user (canonical user name)– targets: [‘user1’, ‘user2’, …]– URI based: /mwlug2016.nsf/home.xsp*– Role based targeting

Date: omitted || Unix epoch || yyyy-MM-dd hh:mm

Complex WebSocket messageEmbedded data objectBinary data transferSending other attributes

– Application– Message type…

WebSocket server is not application specific!!

WebSocket attributesreadyStateCONNECTINGOPENCLOSINGCLOSED

bufferedAmountreturns the number of bytes that have been queued but not yet sent.

Useful to prevent network saturation

WebSocket server side listener

• Very convenient to communicate with the underlying Domino Db• Adds an extra WebSocket user that sits and listens on the server side• Gives you an alternative way of submitting data or querying the database• Server side listener uses Rhino JavaScript Engine

– No access to scope variables or @functions– Cannot define variables with : notation

• i.e. var doc:NotesDocument = currentDocument.getDocument();

• Initialization:

ServerSide tips

websocket message = socketMessage

sender = socketMessage.getFrom();

websocket text message = socketMessage.getText();

Getting Data attribute example:

var application = socketMessage.getData().get("application");

WebSocket debugging in Chrome

Use Chrome!!

New!! WebSocket debugging in Firefox 48

WebSocket monitor extension

Potential applications

If you build multi-user applications in which users interact with each other and the underlying database; and data is updated regularly in the webapp, you should use WebSocket technology.

Watson IoT HQ in Munich

Potential problems and pitfalls

Proxies and firewalls:– Long-lived connections might not be allowed– Designed for HTTP traffic– Might filter out other traffic(use Secure connection wss://…)

Scaling presents a different challenge: – Many free ports are needed on your server

OpenNTF xockets.io extension*https://www.openntf.org/main.nsf/project.xsp?r=project/xockets.io/GitHub:https://github.com/mwambler/xockets.ioDomino Implementation of Java-WebSocket server http://java-websocket.orgSupport

Mark AmblerTek Counsel LLCTwitter: @mwamblerBlog: http://markwambler.blogspot.comEmail:mambler@tekcounsel.net

*: IBM Domino server does not support WebSocket protocol

Xockets.io installation on Domino server

Detailed instructions:http://xpagexplorer.org/websocket-install/

3-part blog post series

Test Domino websocket extension

Use included chat.nsf application to test if WebSocket connection can be established

DEMO

Lucky widget code example

• On page load, we need to get the latest styles from the DB

• On button click, we need to generate the styles and send the websocket message

• Client side: On Message received: apply the style to the page element

• Server Side: On Message received: update the DB with the latest style

Client side initializationXPage

application.js

Tip: Use the chat.nsf example database that comes with the xocket.io plugin.

luckyWidget/sending msg

Xpage code

Button event listener

Create message header

Create shape message

luckyWidget/receiving msgClient side websocket handling

luckyWidget/socketListener

beforePageLoad event

applicationSSJS

luckyWidget/SSJSbeforePageLoad event luckyDiv calculated style

Websocket conclusion

Allows you combine http protocol with websocket data traffic.Lets developers write event-driven real-time applications.Helps you writing single page Xpage applications with no partial refreshes.User experience is more fluid and satisfying.The OpenNTF xocket.io library allows developers to write native XPage applications

with seamless server side Domino database integration.

ContactTwitter: @csakisBlog: http://XpageXplorer.org

Thank you for your attention!