Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Websocket technology for XPages


Published on

The MWLUG2016 presentation in Austin, TX

Published in: Software
  • Be the first to comment

  • Be the first to like this

Websocket technology for XPages

  1. 1. AD102 - Bring WebSocket Technology to Your Next XPage Application Csaba Kiss 08/19/2016 LA-UR-16-20047
  2. 2. Credentials Over 25 years experience in molecular biology Began XPage application development in 2014 JavaScript enthusiast Twitter: @csakis Blog:
  3. 3. MWLUG survey
  4. 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. 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. 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. 7. Other HTTP limitations Every request needs a new connection (latency) Half duplex connection (walkie talkie)
  8. 8. Work arounds Long-polling (comet) Complicated implementation, Not standardized. Client Server Request Request Response Response
  9. 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. 10. Browser compatibility* *
  11. 11. MWLUG 2016 Websocket API
  12. 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. 13. The hand shake The client sends a WebSocket handshake request: The server responds: Connection is “upgraded”
  14. 14. WebSocket is purely event driven 4 events
  15. 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. 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. 17. Complex WebSocket message Embedded data object Binary data transfer Sending other attributes – Application – Message type … WebSocket server is not application specific!!
  18. 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. 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. 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. 21. WebSocket debugging in Chrome Use Chrome!!
  22. 22. New!! WebSocket debugging in Firefox 48 WebSocket monitor extension
  23. 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. 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. 25. OpenNTF extension* GitHub: Domino Implementation of Java-WebSocket server Support Mark Ambler Tek Counsel LLC Twitter: @mwambler Blog: *: IBM Domino server does not support WebSocket protocol
  26. 26. installation on Domino server Detailed instructions: 3-part blog post series
  27. 27. Test Domino websocket extension Use included chat.nsf application to test if WebSocket connection can be established
  28. 28. DEMO
  29. 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. 30. Client side initialization XPage application.js Tip: Use the chat.nsf example database that comes with the plugin.
  31. 31. luckyWidget/sending msg Xpage code Button event listener Create message header Create shape message
  32. 32. luckyWidget/receiving msg Client side websocket handling
  33. 33. luckyWidget/socketListener beforePageLoad event applicationSSJS
  34. 34. luckyWidget/SSJS beforePageLoad event luckyDiv calculated style
  35. 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 library allows developers to write native XPage applications with seamless server side Domino database integration.
  36. 36. Contact Twitter: @csakis Blog: Thank you for your attention!