This document discusses bringing WebSocket technology to XPage applications. It begins with an overview of the limitations of HTTP and how WebSocket addresses them by allowing full-duplex communication over a single TCP connection. It then covers how to use the WebSocket API, providing code examples of establishing a connection and handling messages. It demonstrates how to create a server-side listener in SSJS and discusses potential applications and problems. Finally, it summarizes the OpenNTF xockets.io extension which implements WebSocket support for Domino applications and provides a demo of its use.

1. AD102 - Bring WebSocket Technology to Your Next
XPage Application
Csaba Kiss 08/19/2016
LA-UR-16-20047

2. Credentials
Over 25 years experience in molecular biology
Began XPage application development in 2014
JavaScript enthusiast
Twitter: @csakis
Blog: XpageXplorer.org

3. MWLUG survey
mwlug2016.mybluemix.net

4. Agenda
HTTP protocol drawbacks
Websocket
– 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

5. 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

6. 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

7. Other HTTP limitations
Every request needs a new connection (latency)
Half duplex connection (walkie talkie)

8. Work arounds
Long-polling (comet)
Complicated implementation, Not standardized.
Client
Server
Request
Request
Response
Response

9. 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

10. Browser compatibility*
*:caniuse.com

11. MWLUG 2016
Websocket API

12. Websocket constructor
Establishing a new websocket connection
1 2 3 4
1. ws is the new websocket object
2. ws:// denotes websocket protocol
3. WebSocket port
4. optional protocols

13. The hand shake
The client sends a WebSocket handshake request:
The server responds:
Connection is “upgraded”

14. WebSocket is purely event driven
4 events

15. WebSocket methods
2 methods
The websocket message format is important with the OpenNTF websocket plugin.
Optional close codes:
1000 – CLOSE_NORMAL
1006 – CLOSE_ABNORMAL
1012 – SERVICE_RESTART
…

16. Simple websocket message format
Message in JSON format
Sender 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

17. Complex WebSocket message
Embedded data object
Binary data transfer
Sending other attributes
– Application
– Message type
…
WebSocket server is not
application specific!!

18. WebSocket attributes
readyState
CONNECTING
OPEN
CLOSING
CLOSED
bufferedAmount
returns the number of bytes
that have been queued but
not yet sent.
Useful to prevent network
saturation

19. 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:

20. ServerSide tips
websocket message = socketMessage
sender = socketMessage.getFrom();
websocket text message = socketMessage.getText();
Getting Data attribute example:
var application = socketMessage.getData().get("application");

21. WebSocket debugging in Chrome
Use Chrome!!

22. New!! WebSocket debugging in Firefox 48
WebSocket monitor extension

23. 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

24. 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

25. OpenNTF xockets.io extension*
https://www.openntf.org/main.nsf/project.xsp?r=project/xockets.io/
GitHub:
https://github.com/mwambler/xockets.io
Domino Implementation of Java-WebSocket server http://java-websocket.org
Support
Mark Ambler
Tek Counsel LLC
Twitter: @mwambler
Blog: http://markwambler.blogspot.com
Email:mambler@tekcounsel.net
*: IBM Domino server does not support WebSocket protocol

26. Xockets.io installation on Domino server
Detailed instructions:
http://xpagexplorer.org/websocket-install/
3-part blog post series

27. Test Domino websocket extension
Use included chat.nsf application to test if WebSocket connection can be established

28. DEMO

29. 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

30. Client side initialization
XPage
application.js
Tip: Use the chat.nsf example database
that comes with the xocket.io plugin.

31. luckyWidget/sending msg
Xpage code
Button event listener
Create message header
Create shape message

32. luckyWidget/receiving msg
Client side websocket handling

33. luckyWidget/socketListener
beforePageLoad event
applicationSSJS

34. luckyWidget/SSJS
beforePageLoad event luckyDiv calculated style

35. 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.

36. Contact
Twitter: @csakis
Blog: http://XpageXplorer.org
Thank you for your attention!