websocket technology for xpages
TRANSCRIPT
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:[email protected]
*: 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!