Websocket technology for XPages
-
Upload
csaba-kiss -
Category
Software
-
view
233 -
download
6
Transcript of Websocket technology for XPages
![Page 1: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/1.jpg)
AD102 - Bring WebSocket Technology to Your Next XPage Application
Csaba Kiss 08/19/2016
LA-UR-16-20047
![Page 2: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/2.jpg)
Credentials
Over 25 years experience in molecular biology
Began XPage application development in 2014
JavaScript enthusiast
Twitter: @csakis
Blog: XpageXplorer.org
![Page 3: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/3.jpg)
MWLUG survey
mwlug2016.mybluemix.net
![Page 4: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/4.jpg)
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
![Page 5: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/5.jpg)
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
![Page 6: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/6.jpg)
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
![Page 7: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/7.jpg)
Other HTTP limitations
Every request needs a new connection (latency)Half duplex connection (walkie talkie)
![Page 8: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/8.jpg)
Work aroundsLong-polling (comet)
Complicated implementation, Not standardized.
Client
Server
Req
uest
Req
uest
Res
pons
e
Res
pons
e
![Page 9: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/9.jpg)
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
![Page 10: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/10.jpg)
Browser compatibility*
*:caniuse.com
![Page 11: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/11.jpg)
MWLUG 2016
Websocket API
![Page 12: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/12.jpg)
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
![Page 13: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/13.jpg)
The hand shakeThe client sends a WebSocket handshake request:
The server responds:
Connection is “upgraded”
![Page 14: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/14.jpg)
WebSocket is purely event driven
4 events
![Page 15: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/15.jpg)
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…
![Page 16: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/16.jpg)
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
![Page 17: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/17.jpg)
Complex WebSocket messageEmbedded data objectBinary data transferSending other attributes
– Application– Message type…
WebSocket server is not application specific!!
![Page 18: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/18.jpg)
WebSocket attributesreadyStateCONNECTINGOPENCLOSINGCLOSED
bufferedAmountreturns the number of bytes that have been queued but not yet sent.
Useful to prevent network saturation
![Page 19: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/19.jpg)
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:
![Page 20: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/20.jpg)
ServerSide tips
websocket message = socketMessage
sender = socketMessage.getFrom();
websocket text message = socketMessage.getText();
Getting Data attribute example:
var application = socketMessage.getData().get("application");
![Page 21: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/21.jpg)
WebSocket debugging in Chrome
Use Chrome!!
![Page 22: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/22.jpg)
New!! WebSocket debugging in Firefox 48
WebSocket monitor extension
![Page 23: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/23.jpg)
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
![Page 24: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/24.jpg)
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
![Page 25: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/25.jpg)
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
![Page 26: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/26.jpg)
Xockets.io installation on Domino server
Detailed instructions:http://xpagexplorer.org/websocket-install/
3-part blog post series
![Page 27: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/27.jpg)
Test Domino websocket extension
Use included chat.nsf application to test if WebSocket connection can be established
![Page 28: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/28.jpg)
DEMO
![Page 29: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/29.jpg)
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
![Page 30: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/30.jpg)
Client side initializationXPage
application.js
Tip: Use the chat.nsf example database that comes with the xocket.io plugin.
![Page 31: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/31.jpg)
luckyWidget/sending msg
Xpage code
Button event listener
Create message header
Create shape message
![Page 32: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/32.jpg)
luckyWidget/receiving msgClient side websocket handling
![Page 33: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/33.jpg)
luckyWidget/socketListener
beforePageLoad event
applicationSSJS
![Page 34: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/34.jpg)
luckyWidget/SSJSbeforePageLoad event luckyDiv calculated style
![Page 35: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/35.jpg)
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.
![Page 36: Websocket technology for XPages](https://reader034.fdocuments.us/reader034/viewer/2022050914/58a373421a28abaa488b4a67/html5/thumbnails/36.jpg)
ContactTwitter: @csakisBlog: http://XpageXplorer.org
Thank you for your attention!